Make server toolbar auto-hide and collapse buttons into dropdown on small screens

static/server/taskbar.css

@@ -5,6 +5,8 @@
     right:0;
     top: 0;
     z-index:100;
+    background-position-y: 0px;
+    transition: 0.3s;
 }
 
 #kiwixtoolbar > a {
@@ -28,8 +30,26 @@
     max-width: 720px;
     margin: 0 auto;
 }
-.kiwix .kiwix_button_wrapper {
+#button_show_toggle {
-    float: left;
+    display: none;
+}
+
+#button_show_toggle:not(:checked) ~ label:after {
+    content:'►';
+}
+#button_show_toggle:checked ~ label:after {
+    content:'▼';
+}
+#button_show_toggle:checked ~ label ~ .kiwix_button_cont,
+#button_show_toggle:checked ~ label ~ .kiwix_button_cont > a {
+    display: block;
+}
+#button_show_toggle:not(:checked) ~ label ~ .kiwix_button_cont {
+    display: none;
+}
+label[for="button_show_toggle"],
+.kiwix_button_cont {
+    display: block;
 }
 .kiwix .kiwix_searchform {
     float: right;
@@ -72,6 +92,18 @@ li.ui-state-focus {
     font-weight: bold;
 }
 
+@media(min-width:415px) {
+    .kiwix_button_cont {
+        display: block !important;
+    }
+    .kiwix_button_cont > a {
+        display: inline-block !important;
+    }
+    label[for="button_show_toggle"] {
+        display: none;
+    }
+}
+
 @media (max-width: 520px) {
     .kiwixsearch {
         margin-top: 5px;

static/server/taskbar.html.part

@@ -1,11 +1,6 @@
 <span class="kiwix">
   <span id="kiwixtoolbar" class="ui-widget-header">
     <div class="kiwix_centered">
-      <div class="kiwix_button_wrapper">
-        <a id="kiwix_serve_taskbar_library_button" href="__ROOT_LOCATION__/"><button>&#x1f3e0;</button></a>
-        <a id="kiwix_serve_taskbar_home_button" href="__ROOT_LOCATION__/__CONTENT__/"><button>__ZIM_TITLE__</button></a>
-        <a id="kiwix_serve_taskbar_random_button" href="__ROOT_LOCATION__/random?content=__CONTENT_ESCAPED__"><button>&#x1F3B2;</button></a>
-      </div>
       <div class="kiwix_searchform">
         <form class="kiwixsearch" method="GET" action="__ROOT_LOCATION__/search" id="kiwixsearchform">
           <input type="hidden" name="content" value="__CONTENT__" />
@@ -13,7 +8,55 @@
           <input type="submit" value="&#x1f50d;">
         </form>
       </div>
+      <input type="checkbox" id="button_show_toggle">
+      <label for="button_show_toggle"></label>
+      <div class="kiwix_button_cont">
+        <a id="kiwix_serve_taskbar_library_button" href="__ROOT_LOCATION__/"><button>&#x1f3e0;</button></a>
+        <a id="kiwix_serve_taskbar_home_button" href="__ROOT_LOCATION__/__CONTENT__/"><button>__ZIM_TITLE__</button></a>
+        <a id="kiwix_serve_taskbar_random_button"
+          href="__ROOT_LOCATION__/random?content=__CONTENT_ESCAPED__"><button>&#x1F3B2;</button></a>
+      </div>
     </div>
   </span>
 </span>
 <div style="display: block; height: 5em;"></div>
+<script>
+  (function ($) {
+    if ($(window).width() < 520) {
+      var didScroll;
+      var lastScrollTop = 0;
+      var delta = 5;
+      // on scroll, let the interval function know the user has scrolled
+      $(window).scroll(function (event) {
+        didScroll = true;
+      });
+      // run hasScrolled() and reset didScroll status
+      setInterval(function () {
+        if (didScroll) {
+          hasScrolled();
+          didScroll = false;
+        }
+      }, 250);
+      function hasScrolled() {
+        var st = $(this).scrollTop();
+
+        // Make sure they scroll more than delta
+        if (Math.abs(lastScrollTop - st) <= delta)
+          return;
+
+        // If they scrolled down and are past the navbar, add class .nav-up.
+        // This is necessary so you never see what is "behind" the navbar.
+        if (st > lastScrollTop) {
+          // Scroll Down
+          $('#kiwixtoolbar').css({ top: '-100%' });
+        } else {
+          // Scroll Up
+          $('#kiwixtoolbar').css({ top: '0' });
+        }
+
+        lastScrollTop = st;
+      }
+
+    }
+  })(jQuery);
+</script>