diff --git a/static/skin/index.js b/static/skin/index.js index df12f716c..88225de19 100644 --- a/static/skin/index.js +++ b/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); diff --git a/static/templates/index.html b/static/templates/index.html index 50dd2b847..213cb2f99 100644 --- a/static/templates/index.html +++ b/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; + } @@ -186,7 +192,7 @@
- +
@@ -194,6 +200,7 @@
+
Powered by Kiwix