Show search bar in collapsed navbar

* Fixes #1446

data/interfaces/default/base.html

@@ -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');
+            if ($(window).width() >= 768) {
-            $('#query').clearQueue().val('').animate({ right: '0', width: '200px' }).addClass('active').focus();
+                $('#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');
         }
     });

data/interfaces/default/css/tautulli.css

@@ -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;

data/interfaces/default/search.html

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