From d6c62b3cd3c29ddf52111da7c06a8d9533aa3963 Mon Sep 17 00:00:00 2001
From: Manan Jethwani <mananjethwani02@gmail.com>
Date: Thu, 3 Jun 2021 19:56:28 +0530
Subject: [PATCH] corrected spinner and fadeout effect

---
 static/skin/index.js        | 16 ++++++----------
 static/templates/index.html | 33 +++++++++++++--------------------
 2 files changed, 19 insertions(+), 30 deletions(-)

diff --git a/static/skin/index.js b/static/skin/index.js
index 4be2e8eb0..df12f716c 100644
--- a/static/skin/index.js
+++ b/static/skin/index.js
@@ -57,11 +57,11 @@
 
     function toggleFooter(show=false) {
         const footer = document.getElementById('kiwixfooter');
-        const fadeOutDiv = document.getElementsByClassName('fadeOut')[0];
-        if (footer.style.display === 'none' && show) {
+        const fadeOutDiv = document.getElementById('fadeOut');
+        if (show) {
             footer.style.display = 'block';
             fadeOutDiv.style.display = 'none';
-        } else if (footer.style.display !== 'none' && !show) {
+        } else {
             footer.style.display = 'none';
             fadeOutDiv.style.display = 'block';
         }
@@ -105,7 +105,7 @@
                 const spanTag = document.createElement('span');
                 spanTag.setAttribute('class', 'noResults');
                 spanTag.innerHTML = `No result. Would you like to <a href="/?lang=">reset filter?</a>`;
-                kiwixBodyDiv.append(spanTag);
+                document.querySelector('body').append(spanTag);
                 spanTag.getElementsByTagName('a')[0].onclick = (event) => {
                     event.preventDefault();
                     window.history.pushState({}, null, `${window.location.href.split('?')[0]}?lang=`);
@@ -116,7 +116,7 @@
             return true;
         } else if (noResultInjected) {
             noResultInjected = false;
-            kiwixBodyDiv.getElementsByClassName('noResults')[0].remove();
+            document.getElementsByClassName('noResults')[0].remove();
         }
         return false;
     }
@@ -161,11 +161,7 @@
         bookMap.clear();
         params = new URLSearchParams(window.location.search);
         if (filterType) {
-            if (!filterValue) {
-                params.delete(filterType);
-            } else {
-                params.set(filterType, filterValue);
-            }
+            params.set(filterType, filterValue);
             window.history.pushState({}, null, `${window.location.href.split('?')[0]}?${params.toString()}`);
         }
         await loadAndDisplayBooks(true);
diff --git a/static/templates/index.html b/static/templates/index.html
index 46a13d424..50dd2b847 100644
--- a/static/templates/index.html
+++ b/static/templates/index.html
@@ -42,6 +42,7 @@
         text-align: center;
       }
       .kiwixHomeBody {
+        position: relative;
         text-align: center;
         min-height: 100%;
         margin: 30px 0;
@@ -132,16 +133,16 @@
       }
       .loader-spinner {
         position: absolute;
-        top: 50%;
+        top: -50%;
         left: 50%;
-        border: 2px solid #f3f3f3;
+        border: 5px solid #f3f3f3;
         border-radius: 50%;
-        border-top: 2px solid #3498db;
-        width: 50px;
-        height: 50px;
+        border-top: 5px solid #3498db;
+        width: 40px;
+        height: 40px;
         margin: auto;
-        -webkit-animation: spin 0.5s linear infinite; /* Safari */
-        animation: spin 2s linear infinite;
+        -webkit-animation: spin 1s linear infinite; /* Safari */
+        animation: spin 1s linear infinite;
         margin-top: 35px;
         margin-bottom: -35px;
       }
@@ -155,25 +156,17 @@
         100% { transform: rotate(360deg); }
       }
       .loader {
-        display: none;
-        background: rgba(0, 0, 0, 0.5);
-        overflow: hidden;
-        margin: 0;
-        padding: 0;
-        position: absolute;
-        left: 0;
-        top: 0;
+        position: relative;
+        height: 70px;
         width: 100%;
-        height: 100%;
-        z-index: 100;
       }
       .fadeOut {
         position: absolute;
         bottom: 0;
         left: 0;
         z-index: 1;
-        background: linear-gradient(180deg, #e8e8e8 50%, rgb(138, 137, 137) 100%);
-        height: 30px;
+        background: linear-gradient(180deg, rgba(232, 232, 232, 0) 0%, rgb(232, 232, 232) 100%);
+        height: 80px;
         width: 100%;
       }
     </style>
@@ -198,9 +191,9 @@
     </div>
     <div class="kiwixHomeBody">
       <div class="book__list"></div>
+      <div id="fadeOut" class="fadeOut"></div>
     </div>
     <div class="loader"><div class="loader-spinner"></div></div>
     <div id="kiwixfooter">Powered by <a href="https://kiwix.org">Kiwix</a></div>
-    <div class="fadeOut"></div>
   </body>
 </html>