mirror of
https://codeberg.org/streams/streams.git
synced 2024-09-19 16:35:19 +00:00
Fancy categories input with bootstrap-tagsinput
This commit is contained in:
parent
148f0eb4ae
commit
aa73259a47
4 changed files with 40 additions and 36 deletions
|
@ -8,9 +8,7 @@ code {
|
|||
|
||||
/* jot */
|
||||
|
||||
#jot-title,
|
||||
#jot-category,
|
||||
#jot-pagetitle {
|
||||
.jothidden input {
|
||||
border: 0px;
|
||||
margin: 0px;
|
||||
padding: 8px;
|
||||
|
|
|
@ -11,6 +11,7 @@ head_add_css('library/colorbox/colorbox.css');
|
|||
head_add_css('view/css/conversation.css');
|
||||
head_add_css('view/css/widgets.css');
|
||||
head_add_css('library/justifiedGallery/dist/css/justifiedGallery.css');
|
||||
head_add_css('library/bootstrap-tagsinput/bootstrap-tagsinput.css');
|
||||
|
||||
head_add_js('jquery.js');
|
||||
head_add_js('jquery-migrate-1.1.1.js');
|
||||
|
@ -41,6 +42,7 @@ head_add_js('crypto.js');
|
|||
head_add_js('library/jslider/bin/jquery.slider.min.js');
|
||||
head_add_js('docready.js');
|
||||
head_add_js('library/colorbox/jquery.colorbox-min.js');
|
||||
head_add_js('library/bootstrap-tagsinput/bootstrap-tagsinput.js');
|
||||
|
||||
/**
|
||||
* Those who require this feature will know what to do with it.
|
||||
|
|
|
@ -1746,44 +1746,23 @@ img.mail-list-sender-photo {
|
|||
max-width: $converse_width;
|
||||
}
|
||||
|
||||
#jot-title,
|
||||
#jot-category,
|
||||
#jot-pagetitle {
|
||||
.jothidden {
|
||||
font-weight: bold;
|
||||
border: solid 1px #ffffff;
|
||||
border-radius: $radiuspx;
|
||||
}
|
||||
|
||||
#jot-category::-webkit-input-placeholder {
|
||||
.jothidden input::-webkit-input-placeholder {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#jot-category:-moz-placeholder {
|
||||
.jothidden input::-moz-placeholder {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#jot-title::-webkit-input-placeholder {
|
||||
font-weight: bold;
|
||||
.jothidden >input, .jothidden >input {
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
#jot-title:-moz-placeholder {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#jot-pagetitle::-webkit-input-placeholder {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#jot-pagetitle:-moz-placeholder {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#jot-title:hover,
|
||||
#jot-title:focus,
|
||||
#jot-pagetitle:hover,
|
||||
#jot-pagetitle:focus,
|
||||
#jot-category:hover,
|
||||
#jot-category:focus {
|
||||
.jothidden >input:hover, .jothidden >input:focus {
|
||||
border: 1px solid #cccccc;
|
||||
}
|
||||
|
||||
|
@ -2368,3 +2347,28 @@ aside .nav > li > a:hover, aside .nav > li > a:focus {
|
|||
.bb_observer img {
|
||||
border: 3px solid red !important;
|
||||
}
|
||||
|
||||
.bootstrap-tagsinput .tag:before {
|
||||
/* Copied from icon-asterisk, is there a better way to do it? */
|
||||
font-family: FontAwesome;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
text-decoration: inherit;
|
||||
content:"\f069";
|
||||
}
|
||||
|
||||
/* Modified original CSS to match input in Redbasic */
|
||||
.bootstrap-tagsinput {
|
||||
border-color:#fff;
|
||||
background-color: #fff;
|
||||
box-shadow: none;
|
||||
display: inline-block;
|
||||
border-radius: $radiuspx;
|
||||
cursor: text;
|
||||
padding: 0 6px;
|
||||
width: 70% !important;
|
||||
}
|
||||
|
||||
.jothidden .bootstrap-tagsinput:hover, .jothidden .bootstrap-tagsinput:focus {
|
||||
border: 1px solid #cccccc;
|
||||
}
|
||||
|
|
|
@ -19,17 +19,17 @@
|
|||
<span class="channel-id-select-desc">{{$id_seltext}}</span> {{$id_select}}
|
||||
</div>
|
||||
{{/if}}
|
||||
<div id="jot-title-wrap">
|
||||
<input name="title" id="jot-title" type="text" placeholder="{{$placeholdertitle}}" value="{{$title}}" class="jothidden" style="display:none">
|
||||
<div id="jot-title-wrap" class="jothidden" style="display:none">
|
||||
<input name="title" id="jot-title" type="text" placeholder="{{$placeholdertitle}}" value="{{$title}}">
|
||||
</div>
|
||||
{{if $catsenabled}}
|
||||
<div id="jot-category-wrap">
|
||||
<input name="category" id="jot-category" type="text" placeholder="{{$placeholdercategory}}" value="{{$category}}" class="jothidden" style="display:none" />
|
||||
<div id="jot-category-wrap" class="jothidden" style="display:none">
|
||||
<input name="category" id="jot-category" type="text" placeholder="{{$placeholdercategory}}" value="{{$category}}" data-role="tagsinput"/>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{if $webpage}}
|
||||
<div id="jot-pagetitle-wrap">
|
||||
<input name="pagetitle" id="jot-pagetitle" type="text" placeholder="{{$placeholdpagetitle}}" value="{{$pagetitle}}" class="jothidden" style="display:none" />
|
||||
<div id="jot-pagetitle-wrap" class="jothidden" style="display:none">
|
||||
<input name="pagetitle" id="jot-pagetitle" type="text" placeholder="{{$placeholdpagetitle}}" value="{{$pagetitle}}" />
|
||||
</div>
|
||||
{{/if}}
|
||||
<div id="jot-text-wrap">
|
||||
|
|
Loading…
Reference in a new issue