Added small viewport drawer

In smaller views (below md), the Home/Download menu is replaced with a drawer-like button
to go to Downloads and a similar button to “close” (go back home).
Also, the top menu is replaced with a hamburger icon that's supposed to open
a dedicated mobile view of the filter (not impl yet)

dashboard/assets/dashboard-tailwind-src.css

@@ -125,6 +125,23 @@ select {
     box-shadow: inset 0 0 1em #c60;
   }
 
+  .kiwix-mini-download-open-outerglow {
+    box-shadow: 0 0 1em 0.5em #c60;
+  }
+
+  .kiwix-mini-download-close-uppershadow {
+    box-shadow: #f39325 0 -0.4rem 0.9rem 0;
+  }
+
+  .kiwix-mini-download-open-downshadow {
+    box-shadow: inset 0 0.3em 0.3em #c60;
+  }
+
+  .bg-center-top {
+    background-position-x: center;
+    background-position-y: top;
+  }
+
   .content-max-w {
     @apply sm:max-w-screen-sm md:max-w-screen-md lg:max-w-screen-md xl:max-w-screen-lg 2xl:max-w-screen-xl;
   }

dashboard/assets/dashboard.js

@@ -224,12 +224,25 @@ function run() {
     filter.render(true);
   }
 
+  function onCloseDownloadDrawerButtonClick(el, ev) {
+    // go to home (from downloads)
+    window.location.assign("/");
+  }
+
+  function onOpenDownloadDrawerButtonClick(el, ev) {
+    // go (back) to downloads (from home)
+    window.location.assign("/download");
+  }
+
   live('#sort-by-name', 'click', onSortByButtonClick);
   live('#sort-by-natural', 'click', onSortByButtonClick);
   live('#sort-by-size', 'click', onSortByButtonClick);
   live('#order-desc', 'click', onOrderDirButtonClick);
   live('#order-asc', 'click', onOrderDirButtonClick);
 
+  live('#close-download-drawer', 'click', onCloseDownloadDrawerButtonClick);
+  live('#open-download-drawer', 'click', onOpenDownloadDrawerButtonClick);
+
   filter.render(true);
 }
 

dashboard/templates/base.html

@@ -19,7 +19,16 @@
     {% if page == 'download' %}bg-kworange{% else %}bg-kwbggrey{% endif %}
     md:bg-kwbggrey
   ">
-    <header class="bg-white">
+    <header class="
+      bg-white
+
+      {% if page == 'download' %}
+        kiwix-mini-download-open-outerglow
+      {% endif %}
+      {% if page == 'home' %}
+        kiwix-mini-download-open-outerglow
+      {% endif %}
+      ">
       <nav class="
         content-max-w
         content-w
@@ -33,7 +42,13 @@
                   class="object-scale-down w-[11rem] h-[6rem] object-left" />
               </a>
             </div>
-            <div class="flex flex-none font-normal">
+            <div class="
+              cursor-pointer
+              text-kwtextgrey
+              md:hidden">
+              <i title="Open filters" class="fa-solid fa-bars fa-2xl"></i>
+            </div>
+            <div class="hidden md:flex flex-none font-normal">
                 <a
                   href="/"
                   class="{% if page != 'home' %}hover:text-kworange-500 {% endif %} active:text-kworange me-8 auppercase qtracking-widest text-[1.1em] {% if page == 'home' %} text-kworange{% endif %}">Browse</a>
@@ -44,6 +59,69 @@
         </div>
       </nav>
     </header>
+
+    {% if page == 'home' %}
+    <div class="
+      md:hidden
+
+      asticky
+      abottom-0
+      w-[100%]
+    ">
+
+      <div class="
+        bg-kworange
+        kiwix-mini-download-open-downshadow
+
+        h-[0.9rem]
+        axxs-[1.5rem]
+        axs:h-[1.5rem]
+        asm:h-[2rem]
+
+        w-[100%]
+      "></div>
+
+      <div class="w-[100%] flex">
+        <div class="flex-col w-[33%]"></div>
+
+        <div
+        id="open-download-drawer"
+        class="
+          flex-col
+
+          w-[34%]
+          h-[1.2rem]
+          xxs:h-[1.6rem]
+          xs:h-[2rem]
+          sm:h-[2.4rem]
+
+          text-[0.7rem]
+          xxs:text-[0.8rem]
+          xs:text-[1rem]
+          sm:text-[1.2rem]
+
+          text-white
+          hover:text-kwbgwhitehover
+
+          font-normal
+          xs:font-medium
+          sm:font-medium
+
+          text-center
+
+          cursor-pointer
+
+          bg-contain
+          bg-origin-content
+          bg-no-repeat
+          bg-center-top
+        " style="background-image: url(assets/open-down-orange.png); "><a href="/download">DOWNLOADS</a></div>
+
+        <div class="flex-col w-[33%]"></div>
+      </div>
+    </div>
+    {% endif %}
+
     <div class="
       {% if page == 'download' %}
         bg-kworange kiwix-download-innerglow
@@ -136,6 +214,78 @@
         </nav>
       </div>
     </footer>
+
+    {% if page == 'download' %}
+    <div class="
+      md:hidden
+
+      bg-kwfiltersgrey
+
+      sticky
+      bottom-0
+      w-[100%]
+    ">
+
+      <div class="
+        bg-kworange
+
+        h-[1.5rem]
+        xxs-[1.5rem]
+        xs:h-[1.5rem]
+        sm:h-[2rem]
+
+        w-[100%]
+
+        kiwix-mini-download-close-uppershadow
+      "></div>
+
+      <div class="w-[100%] flex">
+        <div class="flex-col w-[33%]"></div>
+
+        <div
+        id="close-download-drawer"
+        class="
+          flex-col
+
+          w-[34%]
+          h-[2rem]
+
+          text-white
+          hover:text-kwbgwhitehover
+
+          font-normal
+          xs:font-medium
+          sm:font-medium
+
+          text-[0.9rem]
+          xxs:text-[0.9rem]
+          xs:text-[1.1rem]
+          sm:text-[1.2rem]
+
+          text-center
+
+          cursor-pointer
+
+          bg-contain
+          bg-origin-content
+          bg-no-repeat
+          bg-center-top
+        " style="background-image: url(assets/close-down-orange.png);"><a href="/">CLOSE</a></div>
+
+        <div class="flex-col w-[33%]"></div>
+      </div>
+
+      <div class="
+        w-[100%]
+
+        h-[0]
+        xxs:h-[0]
+        xs:h-[0.5rem]
+        sm:h-[0.5rem]
+      "></div>
+    </div>
+    {% endif %}
+
     <script type="text/javascript" src="/assets/dashboard.js">
     </script>
   </body>

dashboard/templates/download.html

@@ -18,6 +18,22 @@
         gap-y-2"
     >
 
+      <div class="
+        flex
+        flex-row
+        justify-center
+        mb-[0.7rem]
+        text-white
+        text-[1.5rem]
+        font-medium
+
+        md:hidden
+      ">
+        <h2 class="
+
+        ">DOWNLOADS</h2>
+      </div>
+
       {% if readers %}
       <div id="readers-banner" class="