kiwix/kiwix-js-pwa
1
0
Fork 0
mirror of https://github.com/kiwix/kiwix-js-pwa.git synced 2025-08-03 19:38:36 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fixes for new slideaway system (specifically for IE11)

Browse Source
This commit is contained in:
Jaifroid 2023-11-02 16:38:27 +00:00
parent e8566f1f58
commit df5dc574a4
2 changed files with 17 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
www/css/app.css
View File

@ -81,6 +81,7 @@ body {
div:not(.panel-success, .alert-message) {
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
@ -114,7 +115,7 @@ div:not(.panel-success, .alert-message) {
overflow-wrap: break-word;
}
#top, #articleContent, #footer {
#top, #articleContent, #footer, article {
transition: transform 0.5s ease;
}
@ -209,8 +210,8 @@ div:not(.panel-success, .alert-message) {
left: 0;
right: 0;
border: 5px solid lightgrey;
animation: spin 1s linear infinite;
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
border-top: 5px solid steelblue;
border-radius: 50%;
width: 50px;
@ -219,8 +220,8 @@ div:not(.panel-success, .alert-message) {
.glyphicon.spinning {
color: white;
animation: spin 1s linear infinite;
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
.status {

24
www/js/lib/uiUtil.js
View File

@ -41,17 +41,19 @@ const footer = document.getElementById('footer');
*/
function hideSlidingUIElements () {
const articleContainer = document.getElementById('articleContent');
const headerStyles = getComputedStyle(header);
const headerHeight = parseFloat(headerStyles.height) + parseFloat(headerStyles.marginBottom) - 2;
const articleElement = document.querySelector('article');
const footerStyles = getComputedStyle(footer);
const footerHeight = parseFloat(footerStyles.height) + parseFloat(footerStyles.marginTop) - 2;
header.style.transform = 'translateY(-' + headerHeight + 'px)';
articleContainer.style.transform = 'translateY(-' + headerHeight + 'px)';
const iframeHeight = parseFloat(articleContainer.style.height.replace('px', ''));
articleContainer.style.height = iframeHeight + headerHeight + 'px';
const headerStyles = getComputedStyle(header);
const headerHeight = parseFloat(headerStyles.height) + parseFloat(headerStyles.marginBottom) - 2;
if (params.hideToolbars === true) { // Only hide footer if requested
footer.style.transform = 'translateY(' + footerHeight + 'px)';
}
articleContainer.style.height = window.innerHeight + headerHeight * 2 + 'px';
header.style.transform = 'translateY(-' + headerHeight + 'px)';
articleElement.style.transform = 'translateY(-' + headerHeight + 'px)';
// Needed by IE11
if ('MSBlobBuilder' in window) articleContainer.style.transform = 'translateY(-' + headerHeight + 'px)';
}
/**
@ -59,15 +61,15 @@ function hideSlidingUIElements () {
*/
function showSlidingUIElements () {
const articleContainer = document.getElementById('articleContent');
const articleElement = document.querySelector('article');
const headerStyles = getComputedStyle(document.getElementById('top'));
const headerHeight = parseFloat(headerStyles.height) + parseFloat(headerStyles.marginBottom);
header.style.transform = 'translateY(0)';
// Needed for Windows Mobile to prevent header disappearing beneath iframe
articleElement.style.transform = 'translateY(-1px)';
articleContainer.style.transform = 'translateY(-1px)';
footer.style.transform = 'translateY(0)';
setTimeout(function () {
const headerStyles = getComputedStyle(document.getElementById('top'));
const headerHeight = parseFloat(headerStyles.height) + parseFloat(headerStyles.marginBottom);
articleContainer.style.height = window.innerHeight - headerHeight + 'px';
}, 200);
articleContainer.style.height = window.innerHeight + headerHeight * 2 + 'px';
}
let scrollThrottle = false;