smallsolar/libkiwix
1
0
Fork 0
mirror of https://github.com/kiwix/libkiwix.git synced 2025-06-26 10:11:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

corrected spinner and fadeout effect

Browse Source
This commit is contained in:
Manan Jethwani
2021-06-03 19:56:28 +05:30
committed by Emmanuel Engelhart
parent f39c558d2a
commit d6c62b3cd3
2 changed files with 19 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
static/skin/index.js
View File

@ -57,11 +57,11 @@
function toggleFooter(show=false) { function toggleFooter(show=false) {
const footer = document.getElementById('kiwixfooter'); const footer = document.getElementById('kiwixfooter');
const fadeOutDiv = document.getElementsByClassName('fadeOut')[0]; const fadeOutDiv = document.getElementById('fadeOut');
if (footer.style.display === 'none' && show) { if (show) {
footer.style.display = 'block'; footer.style.display = 'block';
fadeOutDiv.style.display = 'none'; fadeOutDiv.style.display = 'none';
} else if (footer.style.display !== 'none' && !show) { } else {
footer.style.display = 'none'; footer.style.display = 'none';
fadeOutDiv.style.display = 'block'; fadeOutDiv.style.display = 'block';
} }
@ -105,7 +105,7 @@
const spanTag = document.createElement('span'); const spanTag = document.createElement('span');
spanTag.setAttribute('class', 'noResults'); spanTag.setAttribute('class', 'noResults');
spanTag.innerHTML = `No result. Would you like to <a href="/?lang=">reset filter?</a>`; 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) => { spanTag.getElementsByTagName('a')[0].onclick = (event) => {
event.preventDefault(); event.preventDefault();
window.history.pushState({}, null, `${window.location.href.split('?')[0]}?lang=`); window.history.pushState({}, null, `${window.location.href.split('?')[0]}?lang=`);
@ -116,7 +116,7 @@
return true; return true;
} else if (noResultInjected) { } else if (noResultInjected) {
noResultInjected = false; noResultInjected = false;
kiwixBodyDiv.getElementsByClassName('noResults')[0].remove(); document.getElementsByClassName('noResults')[0].remove();
} }
return false; return false;
} }
@ -161,11 +161,7 @@
bookMap.clear(); bookMap.clear();
params = new URLSearchParams(window.location.search); params = new URLSearchParams(window.location.search);
if (filterType) { if (filterType) {
if (!filterValue) { params.set(filterType, filterValue);
params.delete(filterType);
} else {
params.set(filterType, filterValue);
}
window.history.pushState({}, null, `${window.location.href.split('?')[0]}?${params.toString()}`); window.history.pushState({}, null, `${window.location.href.split('?')[0]}?${params.toString()}`);
} }
await loadAndDisplayBooks(true); await loadAndDisplayBooks(true);

33
static/templates/index.html
View File

@ -42,6 +42,7 @@
text-align: center; text-align: center;
} }
.kiwixHomeBody { .kiwixHomeBody {
position: relative;
text-align: center; text-align: center;
min-height: 100%; min-height: 100%;
margin: 30px 0; margin: 30px 0;
@ -132,16 +133,16 @@
} }
.loader-spinner { .loader-spinner {
position: absolute; position: absolute;
top: 50%; top: -50%;
left: 50%; left: 50%;
border: 2px solid #f3f3f3; border: 5px solid #f3f3f3;
border-radius: 50%; border-radius: 50%;
border-top: 2px solid #3498db; border-top: 5px solid #3498db;
width: 50px; width: 40px;
height: 50px; height: 40px;
margin: auto; margin: auto;
-webkit-animation: spin 0.5s linear infinite; /* Safari */ -webkit-animation: spin 1s linear infinite; /* Safari */
animation: spin 2s linear infinite; animation: spin 1s linear infinite;
margin-top: 35px; margin-top: 35px;
margin-bottom: -35px; margin-bottom: -35px;
} }
@ -155,25 +156,17 @@
100% { transform: rotate(360deg); } 100% { transform: rotate(360deg); }
} }
.loader { .loader {
display: none; position: relative;
background: rgba(0, 0, 0, 0.5); height: 70px;
overflow: hidden;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
width: 100%; width: 100%;
height: 100%;
z-index: 100;
} }
.fadeOut { .fadeOut {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 1; z-index: 1;
background: linear-gradient(180deg, #e8e8e8 50%, rgb(138, 137, 137) 100%); background: linear-gradient(180deg, rgba(232, 232, 232, 0) 0%, rgb(232, 232, 232) 100%);
height: 30px; height: 80px;
width: 100%; width: 100%;
} }
</style> </style>
@ -198,9 +191,9 @@
</div> </div>
<div class="kiwixHomeBody"> <div class="kiwixHomeBody">
<div class="book__list"></div> <div class="book__list"></div>
<div id="fadeOut" class="fadeOut"></div>
</div> </div>
<div class="loader"><div class="loader-spinner"></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 id="kiwixfooter">Powered by <a href="https://kiwix.org">Kiwix</a></div>
<div class="fadeOut"></div>
</body> </body>
</html> </html>