Merge pull request #896 from kiwix/stickyNav

Stick kiwixNav on top
kiwix · Mar 6, 2023 · 32b4bca · 32b4bca
2 parents 973ac28 + f838314
commit 32b4bca
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 28 deletions.
diff --git a/static/skin/index.css b/static/skin/index.css
@@ -24,6 +24,10 @@ body {
     background-color: #f4f6f8;
     width: 100%;
     padding: 20px;
+    position: sticky;
+    top: 0;
+    z-index: 3;
+    transition: all 0.5s ease;
 }
 
 .kiwixHomeBody__results {
@@ -134,6 +138,7 @@ body {
     display: flex;
     flex-direction: column;
     align-items: center;
+    width: 100%;
 }
 
 .tagFilterLabel {
@@ -175,7 +180,7 @@ body {
 }
 
 #uiLanguageSelectorButton {
-  margin: 16px 12px 0 0;
+  margin: 0 12px 0 0;
   float: right;
 }
 
@@ -464,7 +469,6 @@ body {
 }
 
 .feedLogo {
-    margin: 16px 12px 0 0;
     height: 30px;
     float: right;
     border-radius: 5px;
@@ -487,8 +491,9 @@ body {
 
 @media screen and (max-width: 590px) {
 
-    .kiwixNav {
-        height: 285px;
+    .kiwixNav__SearchForm {
+        display: flex;
+        flex-direction: column;
     }
 
     .kiwixHomeBody {

diff --git a/static/skin/index.js b/static/skin/index.js
@@ -18,6 +18,7 @@
     params.delete('userlang');
     let timer;
     let languages = {};
+    let previousScrollTop = Infinity;
 
     function updateFeedLink() {
         const inputParams = new URLSearchParams(window.location.search);
@@ -453,6 +454,22 @@
         }
     }
 
+    function updateNavVisibilityState() {
+        const st = window.scrollY;
+        const enableAutoHiding = document.body.clientWidth < 590;
+        if ((Math.abs(previousScrollTop - st) <= 5) || !enableAutoHiding)
+            return;
+        const kiwixNav = document.querySelector('.kiwixNav');
+        if (st > previousScrollTop) {
+            kiwixNav.style.position = 'fixed';
+            kiwixNav.style.top = '-100%';
+        } else {
+            kiwixNav.style.position = 'sticky';
+            kiwixNav.style.top = '0';
+        }
+        previousScrollTop = st;
+    }
+
     window.addEventListener('resize', (event) => {
         if (timer) {clearTimeout(timer)}
         timer = setTimeout(() => {
@@ -531,6 +548,7 @@
         }
         updateFeedLink();
         setCookie(filterCookieName, params.toString(), oneDayDelta);
+        setInterval(updateNavVisibilityState, 250);
     };
 
     // required by i18n.js:setUserLanguage()

diff --git a/static/templates/index.html b/static/templates/index.html
@@ -44,26 +44,26 @@
     <script type="text/javascript" src="{{root}}/skin/index.js?KIWIXCACHEID" defer></script>
   </head>
   <body>
-    <a href="{{root}}/catalog/v2/entries" id="feedLink">
-      <img src="{{root}}/skin/feed.png?KIWIXCACHEID"
-           class="feedLogo"
-           id="feedLogo"
-           alt="Library OPDS Feed"
-           aria-label="Library OPDS Feed"
-           title="Library OPDS Feed">
-    </a>
-    <a onclick="window.modalUILanguageSelector.show()">
-      <svg xmlns="http://www.w3.org/2000/svg"
-           id="uiLanguageSelectorButton"
-           width="30"
-           height="30"
-           viewBox="0 0 20 20">
-        <g fill="#36c">
-          <path d="M20 18h-1.44a.61.61 0 0 1-.4-.12.81.81 0 0 1-.23-.31L17 15h-5l-1 2.54a.77.77 0 0 1-.22.3.59.59 0 0 1-.4.14H9l4.55-11.47h1.89zm-3.53-4.31L14.89 9.5a11.62 11.62 0 0 1-.39-1.24q-.09.37-.19.69l-.19.56-1.58 4.19zm-6.3-1.58a13.43 13.43 0 0 1-2.91-1.41 11.46 11.46 0 0 0 2.81-5.37H12V4H7.31a4 4 0 0 0-.2-.56C6.87 2.79 6.6 2 6.6 2l-1.47.5s.4.89.6 1.5H0v1.33h2.15A11.23 11.23 0 0 0 5 10.7a17.19 17.19 0 0 1-5 2.1q.56.82.87 1.38a23.28 23.28 0 0 0 5.22-2.51 15.64 15.64 0 0 0 3.56 1.77zM3.63 5.33h4.91a8.11 8.11 0 0 1-2.45 4.45 9.11 9.11 0 0 1-2.46-4.45z"/>
-        </g>
-      </svg>
-    </a>
     <div class='kiwixNav'>
+      <a href="{{root}}/catalog/v2/entries" id="feedLink">
+        <img src="{{root}}/skin/feed.png?KIWIXCACHEID"
+             class="feedLogo"
+             id="feedLogo"
+             alt="Library OPDS Feed"
+             aria-label="Library OPDS Feed"
+             title="Library OPDS Feed">
+      </a>
+      <a onclick="window.modalUILanguageSelector.show()">
+        <svg xmlns="http://www.w3.org/2000/svg"
+             id="uiLanguageSelectorButton"
+             width="30"
+             height="30"
+             viewBox="0 0 20 20">
+          <g fill="#36c">
+            <path d="M20 18h-1.44a.61.61 0 0 1-.4-.12.81.81 0 0 1-.23-.31L17 15h-5l-1 2.54a.77.77 0 0 1-.22.3.59.59 0 0 1-.4.14H9l4.55-11.47h1.89zm-3.53-4.31L14.89 9.5a11.62 11.62 0 0 1-.39-1.24q-.09.37-.19.69l-.19.56-1.58 4.19zm-6.3-1.58a13.43 13.43 0 0 1-2.91-1.41 11.46 11.46 0 0 0 2.81-5.37H12V4H7.31a4 4 0 0 0-.2-.56C6.87 2.79 6.6 2 6.6 2l-1.47.5s.4.89.6 1.5H0v1.33h2.15A11.23 11.23 0 0 0 5 10.7a17.19 17.19 0 0 1-5 2.1q.56.82.87 1.38a23.28 23.28 0 0 0 5.22-2.51 15.64 15.64 0 0 0 3.56 1.77zM3.63 5.33h4.91a8.11 8.11 0 0 1-2.45 4.45 9.11 9.11 0 0 1-2.46-4.45z"/>
+          </g>
+        </svg>
+      </a>
       <div class="kiwixNav__filters">
         <div class="kiwixNav__select">
           <select name="lang" id="languageFilter" class='kiwixNav__kiwixFilter filter'>

diff --git a/test/server.cpp b/test/server.cpp
@@ -61,9 +61,9 @@ const ResourceCollection resources200Compressible{
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/i18n.js" },
   { STATIC_CONTENT,  "/ROOT%23%3F/skin/i18n.js?cacheid=2cf0f8c5" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.css" },
-  { STATIC_CONTENT,  "/ROOT%23%3F/skin/index.css?cacheid=f0ee124c" },
+  { STATIC_CONTENT,  "/ROOT%23%3F/skin/index.css?cacheid=be514520" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.js" },
-  { STATIC_CONTENT,  "/ROOT%23%3F/skin/index.js?cacheid=042058df" },
+  { STATIC_CONTENT,  "/ROOT%23%3F/skin/index.js?cacheid=39705b4f" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/iso6391To3.js" },
   { STATIC_CONTENT,  "/ROOT%23%3F/skin/iso6391To3.js?cacheid=ecde2bb3" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/isotope.pkgd.min.js" },
@@ -270,7 +270,7 @@ TEST_F(ServerTest, CacheIdsOfStaticResources)
   const std::vector<UrlAndExpectedResult> testData{
     {
       /* url */ "/ROOT%23%3F/",
-R"EXPECTEDRESULT(      href="/ROOT%23%3F/skin/index.css?cacheid=f0ee124c"
+R"EXPECTEDRESULT(      href="/ROOT%23%3F/skin/index.css?cacheid=be514520"
     <link rel="apple-touch-icon" sizes="180x180" href="/ROOT%23%3F/skin/favicon/apple-touch-icon.png?cacheid=f86f8df3">
     <link rel="icon" type="image/png" sizes="32x32" href="/ROOT%23%3F/skin/favicon/favicon-32x32.png?cacheid=79ded625">
     <link rel="icon" type="image/png" sizes="16x16" href="/ROOT%23%3F/skin/favicon/favicon-16x16.png?cacheid=a986fedc">
@@ -284,8 +284,8 @@ R"EXPECTEDRESULT(      href="/ROOT%23%3F/skin/index.css?cacheid=f0ee124c"
     <script type="text/javascript" src="/ROOT%23%3F/skin/languages.js?cacheid=b00b12db" defer></script>
     <script src="/ROOT%23%3F/skin/isotope.pkgd.min.js?cacheid=2e48d392" defer></script>
     <script src="/ROOT%23%3F/skin/iso6391To3.js?cacheid=ecde2bb3"></script>
-    <script type="text/javascript" src="/ROOT%23%3F/skin/index.js?cacheid=042058df" defer></script>
-      <img src="/ROOT%23%3F/skin/feed.png?cacheid=56a672b1"
+    <script type="text/javascript" src="/ROOT%23%3F/skin/index.js?cacheid=39705b4f" defer></script>
+        <img src="/ROOT%23%3F/skin/feed.png?cacheid=56a672b1"
 )EXPECTEDRESULT"
     },
     {