Search bar now resizes responsively via javascript

This commit is contained in:
Raelon Masters
2020-07-05 14:43:58 -04:00
parent 7eec7ae883
commit 3d5430a43c
3 changed files with 12 additions and 3 deletions

View File

@@ -32,12 +32,15 @@
max-width: min-content;
}
.nav_search{
display: none !important;
/* display: none !important; */
}
#horiz_nav_main{
grid-template-columns: auto;
}
}
@media only screen and (max-width: 768px) {
.nav_search{content: "Search"}
}
@media only screen and (max-width: 400px) {
.vert-nav{
list-style: None;

View File

@@ -8,7 +8,7 @@ $(document).ready(function(){
/* Initialize ui variables */
var outstream = []; // put customlog messages here
var win_height = window.innerHeight; // Get the displays height
var win_width = window.innwerWidth; // Get the displays width
var win_width = window.innerWidth; // Get the displays width
var scr_height = window.outerHeight;
var scr_width = window.outerWidth;
var hdr_height = $('.app_hdr').height(); // Get our header height
@@ -85,4 +85,10 @@ $(document).ready(function(){
window.location.href=_location;
});
$('#search_string').html("<i> "+$('#_search').val().substr(0,15)+"</i>")
if (win_width >= 1024)
$('.search_string').attr('size', 20)
$('.search_string').val("Search")
if (win_width >= 425)
$('.search_string').attr('size', 10)
$('.search_string').val("Search")
});

View File

@@ -61,7 +61,7 @@
<div id="horiz_nav_center">
<i class="fas fa-sort-alpha-down nav_icon"></i>
<i class="fas fa-sort-alpha-up nav_icon"></i>
<input class="nav_search input_box" type="text" size="40" value="search by Title, Author, Tags, or Collections">
<input class="nav_search input_box search_string" type="text" size="40" value="search by Title, Author, Tags, or Collections">
<i class="fas fa-search search_submit search_button" id="search_string" onclick="window.location.href = '/prev_page/{{ Set }}'"></i>
</div>
<div class="horiz_nav_stats">