Partly fixed auto-hiding of the toolbar

Auto hiding of the toolbars on narrow screens works only for the first
page loaded in the viewer. Navigating to other pages interferes with
autohiding as follows:

- If the toolbar was hidden, it stays hidden.

- If the toolbar was not hidden, it loses the ability to autohide.
This commit is contained in:
Veloman Yunkan 2022-09-04 17:13:43 +04:00
parent 796e729f52
commit 4e06bb6a08
3 changed files with 9 additions and 16 deletions

View File

@ -1,11 +1,5 @@
#kiwixtoolbar { #kiwixtoolbar {
position: fixed;
padding: .5em; padding: .5em;
left: 0;
right: 0;
top: 0;
z-index: 100;
background-position-y: 0;
transition: 0.3s; transition: 0.3s;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
@ -135,10 +129,6 @@ a.suggest, a.suggest:visited, a.suggest:hover, a.suggest:active {
column-count: 1 !important; column-count: 1 !important;
} }
body {
padding-top: calc(3em - 5px) !important;
}
@media(min-width:420px) { @media(min-width:420px) {
.kiwix_button_cont { .kiwix_button_cont {
display: inline-block !important; display: inline-block !important;

View File

@ -281,7 +281,7 @@ function setupAutoHidingOfTheToolbar() {
let didScroll = false; let didScroll = false;
const kiwixToolBar = document.querySelector('#kiwixtoolbar'); const kiwixToolBar = document.querySelector('#kiwixtoolbar');
window.addEventListener('scroll', () => { contentIframe.contentWindow.addEventListener('scroll', () => {
didScroll = true; didScroll = true;
}); });
@ -293,13 +293,16 @@ function setupAutoHidingOfTheToolbar() {
}, 250); }, 250);
function hasScrolled() { function hasScrolled() {
const st = document.documentElement.scrollTop || document.body.scrollTop; const iframeDoc = contentIframe.contentDocument;
const st = iframeDoc.documentElement.scrollTop || iframeDoc.body.scrollTop;
if (Math.abs(lastScrollTop - st) <= delta) if (Math.abs(lastScrollTop - st) <= delta)
return; return;
if (st > lastScrollTop) { if (st > lastScrollTop) {
kiwixToolBar.style.position = 'fixed';
kiwixToolBar.style.top = '-100%'; kiwixToolBar.style.top = '-100%';
} else { } else {
kiwixToolBar.style.position = 'static';
kiwixToolBar.style.top = '0'; kiwixToolBar.style.top = '0';
} }

View File

@ -25,8 +25,8 @@
</head> </head>
<body style="margin:0" onload="setupViewer()"> <body style="margin:0" onload="setupViewer()">
<span class="kiwix"> <div class="kiwix">
<span id="kiwixtoolbar" class="ui-widget-header"> <div id="kiwixtoolbar" class="ui-widget-header">
<div class="kiwix_centered"> <div class="kiwix_centered">
<div class="kiwix_searchform"> <div class="kiwix_searchform">
<form class="kiwixsearch" method="GET" action="javascript:performSearch()" id="kiwixsearchform"> <form class="kiwixsearch" method="GET" action="javascript:performSearch()" id="kiwixsearchform">
@ -52,8 +52,8 @@
</span> </span>
</div> </div>
</div> </div>
</span> </div>
</span> </div>
<iframe id="content_iframe" <iframe id="content_iframe"
referrerpolicy="same-origin" referrerpolicy="same-origin"