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; max-width: min-content;
} }
.nav_search{ .nav_search{
display: none !important; /* display: none !important; */
} }
#horiz_nav_main{ #horiz_nav_main{
grid-template-columns: auto; grid-template-columns: auto;
} }
} }
@media only screen and (max-width: 768px) {
.nav_search{content: "Search"}
}
@media only screen and (max-width: 400px) { @media only screen and (max-width: 400px) {
.vert-nav{ .vert-nav{
list-style: None; list-style: None;

View File

@@ -8,7 +8,7 @@ $(document).ready(function(){
/* Initialize ui variables */ /* Initialize ui variables */
var outstream = []; // put customlog messages here var outstream = []; // put customlog messages here
var win_height = window.innerHeight; // Get the displays height 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_height = window.outerHeight;
var scr_width = window.outerWidth; var scr_width = window.outerWidth;
var hdr_height = $('.app_hdr').height(); // Get our header height var hdr_height = $('.app_hdr').height(); // Get our header height
@@ -85,4 +85,10 @@ $(document).ready(function(){
window.location.href=_location; window.location.href=_location;
}); });
$('#search_string').html("<i> "+$('#_search').val().substr(0,15)+"</i>") $('#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"> <div id="horiz_nav_center">
<i class="fas fa-sort-alpha-down nav_icon"></i> <i class="fas fa-sort-alpha-down nav_icon"></i>
<i class="fas fa-sort-alpha-up 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> <i class="fas fa-search search_submit search_button" id="search_string" onclick="window.location.href = '/prev_page/{{ Set }}'"></i>
</div> </div>
<div class="horiz_nav_stats"> <div class="horiz_nav_stats">