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

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

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