minor changes in fadeout effect

static/skin/index.js

@@ -6,6 +6,8 @@
     };
     const filterTypes = ['lang', 'category', 'q'];
     const bookMap = new Map();
+    let footer;
+    let fadeOutDiv;
     let iso;
     let isFetching = false;
     let noResultInjected = false;
@@ -56,11 +58,8 @@
     }
 
     function toggleFooter(show=false) {
-        const footer = document.getElementById('kiwixfooter');
-        const fadeOutDiv = document.getElementById('fadeOut');
         if (show) {
             footer.style.display = 'block';
-            fadeOutDiv.style.display = 'none';
         } else {
             footer.style.display = 'none';
             fadeOutDiv.style.display = 'block';
@@ -96,7 +95,6 @@
     }
 
     function checkAndInjectEmptyMessage() {
-        const kiwixBodyDiv = document.getElementsByClassName('kiwixHomeBody')[0];
         if (!bookMap.size) {
             if (!noResultInjected) {
                 noResultInjected = true;
@@ -158,6 +156,7 @@
         isFetching = false;
         incrementalLoadingParams.start = 0;
         incrementalLoadingParams.count = viewPortToCount();
+        fadeOutDiv.style.display = 'none';
         bookMap.clear();
         params = new URLSearchParams(window.location.search);
         if (filterType) {
@@ -173,8 +172,13 @@
     });
 
     async function loadSubset() {
-        if (incrementalLoadingParams.count && window.innerHeight + window.scrollY >= document.body.offsetHeight) {
-            loadAndDisplayBooks();
+        if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
+            if (incrementalLoadingParams.count) {
+                loadAndDisplayBooks();
+            }
+            else {
+                fadeOutDiv.style.display = 'none';
+            }
         }
     }
 
@@ -189,16 +193,18 @@
     window.addEventListener('scroll', loadSubset);
 
     window.onload = async () => {
-            iso = new Isotope( '.book__list', {
-                itemSelector: '.book',
-                getSortData:{
-                    weight: function( itemElem ) {
-                        const index = itemElem.getAttribute('data-idx');
-                        return index ? parseInt(index) : Infinity;
-                    }
-                },
-                sortBy: 'weight'
+        iso = new Isotope( '.book__list', {
+            itemSelector: '.book',
+            getSortData:{
+                weight: function( itemElem ) {
+                    const index = itemElem.getAttribute('data-idx');
+                    return index ? parseInt(index) : Infinity;
+                }
+            },
+            sortBy: 'weight'
         });
+        footer = document.getElementById('kiwixfooter');
+        fadeOutDiv = document.getElementById('fadeOut');
         await loadAndDisplayBooks();
         await loadAndDisplayOptions('#languageFilter', langList);
         await loadAndDisplayOptions('#categoryFilter', categoryList);

static/templates/index.html

@@ -45,7 +45,7 @@
         position: relative;
         text-align: center;
         min-height: 100%;
-        margin: 30px 0;
+        margin: 0 0 15px;
       }
       .book {
         display: inline-block;
@@ -76,6 +76,9 @@
       .kiwixFilter {
         margin: 8px 10px;
       }
+      .kiwixSearch, .searchButton {
+        margin: 0 13px 0 0;
+      }
       .kiwixSearchForm {
         margin: 8px 10px;
         float: right;
@@ -128,9 +131,6 @@
         top: 48%;
         left: 42%;
       }
-      .shadow {
-        box-shadow: 0 6px 2px -3px grey;
-      }
       .loader-spinner {
         position: absolute;
         top: -50%;
@@ -145,6 +145,7 @@
         animation: spin 1s linear infinite;
         margin-top: 35px;
         margin-bottom: -35px;
+        z-index: 2;
       }
       /* Safari */
       @-webkit-keyframes spin {
@@ -161,7 +162,8 @@
         width: 100%;
       }
       .fadeOut {
-        position: absolute;
+        position: fixed;
+        display: none;
         bottom: 0;
         left: 0;
         z-index: 1;
@@ -169,6 +171,10 @@
         height: 80px;
         width: 100%;
       }
+      .spacer {
+        height: 20px;
+        background: transparent;
+      }
     </style>
     <script src="{{root}}/skin/isotope.pkgd.min.js" defer></script>
     <script src="{{root}}/skin/categoryList.js"></script>
@@ -186,7 +192,7 @@
       </select>
       <form id='kiwixSearchForm' class='kiwixSearchForm'>
         <input type="text" name="q" id="searchFilter" class='kiwixSearch'>
-        <input type="submit" value="Submit"/>
+        <input type="submit" class="searchButton" value="Search"/>
       </form>
     </div>
     <div class="kiwixHomeBody">
@@ -194,6 +200,7 @@
       <div id="fadeOut" class="fadeOut"></div>
     </div>
     <div class="loader"><div class="loader-spinner"></div></div>
+    <div class="spacer"></div>
     <div id="kiwixfooter">Powered by <a href="https://kiwix.org">Kiwix</a></div>
   </body>
 </html>