Show search bar in collapsed navbar

* Fixes #1446
This commit is contained in:
JonnyWong16 2021-06-18 11:05:10 -07:00
parent fe034d97b1
commit eb46ff41fc
No known key found for this signature in database
GPG key ID: B1F1F9807184697A
3 changed files with 43 additions and 8 deletions

View file

@ -86,7 +86,7 @@
</div>
<div class="collapse navbar-collapse navbar-right" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="hidden-sm hidden-xs">
<li>
<form action="search" method="post" class="form" id="search_form">
<div class="input-group">
<span class="input-textbox">
@ -395,8 +395,22 @@ ${next.modalIncludes()}
}
});
function displaySearch() {
if ($(this).width() < 768) {
$('#search_button').removeClass('btn-inactive');
$('#query').css({ right: 0, width: '100%' })
} else if ($('#query').val().trim() == '') {
$('#search_button').addClass('btn-inactive');
$('#query').css({ right: '-200px', width: '0' })
}
}
displaySearch();
$(window).resize(function() {
displaySearch();
});
$('#search_form').submit(function (e) {
if ($('#query').hasClass('active') && $('#query').val().trim() != '') {
if ($('#query').val().trim() != '') {
$.ajax({
type: 'post',
url: 'search',
@ -404,14 +418,16 @@ ${next.modalIncludes()}
})
} else {
e.preventDefault();
$('#search_button').removeClass('btn-inactive');
$('#query').clearQueue().val('').animate({ right: '0', width: '200px' }).addClass('active').focus();
if ($(window).width() >= 768) {
$('#search_button').removeClass('btn-inactive');
$('#query').clearQueue().val('').animate({ right: '0', width: '200px' }).addClass('active').focus();
}
}
})
$('#query').on('blur', function (e) {
if ($(this).val().trim() == '') {
if ($(this).val().trim() == '' && $(window).width() >= 768) {
$(this).delay(200).animate({ right: '-200px', width: '0' }, function () {
$('#search_button').addClass('btn-inactive');
displaySearch();
}).removeClass('active');
}
});

View file

@ -3432,6 +3432,22 @@ pre::-webkit-scrollbar-thumb {
-o-transition: background 0.3s;
transition: background 0.3s;
}
@media (max-width: 767px) {
#search_form {
width: 100%;
}
#search_form span.input-textbox {
width: 100%;
}
#search_form #query {
width: 100%;
right: 0;
}
#search_form #query.active {
width: 100%;
right: 0px;
}
}
#update_search_form div.input-group {
display: inline-table;
vertical-align: middle;

View file

@ -30,8 +30,11 @@
<script>
var query_string = "${query.replace('"','\\"').replace('/','\\/') | n}";
$('#search_button').removeClass('btn-inactive');
$('#query').val(query_string).css({ right: '0', width: '250px' }).addClass('active');
$('#query').val(query_string);
if ($(window).width() >= 768) {
$('#search_button').removeClass('btn-inactive');
$('#query').css({ right: '0', width: '250px' }).addClass('active');
}
$.ajax({
url: 'get_search_results_children',