smallsolar
/
libkiwix
mirror of https://github.com/kiwix/libkiwix.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

corrected spinner and fadeout effect

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
Show Stats 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) {
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);

33
static/templates/index.html
View File

@ -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>