Merge pull request #896 from kiwix/stickyNav

Stick kiwixNav on top
2023-03-06 15:56:42 +04:00 · 2023-03-06 15:56:42 +04:00 · 32b4bca745
parent 973ac28dcb f838314435
commit 32b4bca745
4 changed files with 51 additions and 28 deletions
--- 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 {
--- 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()
--- 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'>
--- 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"
    },
    {