Fix padding and search bug, update button toggle icon

This commit is contained in:
Joe Reeve 2019-06-18 15:28:33 +01:00 committed by Kelson
parent 0a7f375f3a
commit ea93a8a195
2 changed files with 24 additions and 5 deletions

View File

@ -57,14 +57,17 @@
display: none;
}
#button_show_toggle:not(:checked)~label:after {
content: '►';
content: '⌃';
transform: rotate(180deg);
}
#button_show_toggle:checked~label:after {
content: '';
content: '';
}
#button_show_toggle:checked~label~.kiwix_button_cont,
#button_show_toggle:checked~label~.kiwix_button_cont>a {
display: block;
@ -74,6 +77,20 @@
display: none;
}
label[for="button_show_toggle"]:after {
transition: 0.1s;
display: inline-block;
line-height: 26px;
margin-top: 5px;
}
#button_show_toggle~label~.kiwix_button_cont.searching {
display: none !important;
}
label[for="button_show_toggle"].searching {
display: none !important;
}
label[for="button_show_toggle"],
.kiwix_button_cont {
display: block;
@ -125,7 +142,7 @@ li.ui-state-focus {
}
@media(min-width:415px) {
@media(min-width:420px) {
.kiwix_button_cont {
display: inline-block !important;
}
@ -145,7 +162,7 @@ li.ui-state-focus {
}
.kiwix_button_cont {
margin-top: 5px;
margin-top: 4px;
}
}

View File

@ -4,7 +4,7 @@
<div class="kiwix_searchform">
<form class="kiwixsearch" method="GET" action="__ROOT_LOCATION__/search" id="kiwixsearchform">
<input type="hidden" name="content" value="__CONTENT__" />
<input autocomplete="off" class="ui-autocomplete-input" id="kiwixsearchbox" name="pattern" type="text" placeholder="&#x1f50d;">
<input autocomplete="off" class="ui-autocomplete-input" id="kiwixsearchbox" name="pattern" type="text" placeholder="&#x1f50d;" onfocus="this.placeholder = ''" onblur="this.placeholder = '&#x1f50d;'">
</form>
</div>
<input type="checkbox" id="button_show_toggle">
@ -60,9 +60,11 @@
$('#kiwixsearchbox').on({
focus: function(){
$('.kiwix_searchform').addClass('full_width');
$('label[for="button_show_toggle"], .kiwix_button_cont').addClass('searching');
},
blur: function(){
$('.kiwix_searchform').removeClass('full_width');
$('label[for="button_show_toggle"], .kiwix_button_cont').removeClass('searching');
}
});
})(jQuery);