From f83831443506ece02465d35778c0fa391f86b70e Mon Sep 17 00:00:00 2001
From: Nikhil Tanwar <2002nikhiltanwar@gmail.com>
Date: Sun, 26 Feb 2023 20:37:32 +0530
Subject: [PATCH] Auto hiding of kiwixNav on scroll for mobile devices
Since kiwixNav is sticky for larger screens now, the tiles area on mobile devices is incredibly low.
This change hides kiwixNav if the screen is scrolled.
---
static/skin/index.css | 5 +++--
static/skin/index.js | 18 ++++++++++++++++++
static/templates/index.html | 38 ++++++++++++++++++-------------------
test/server.cpp | 10 +++++-----
4 files changed, 45 insertions(+), 26 deletions(-)
diff --git a/static/skin/index.css b/static/skin/index.css
index 16b4dd96c..6f228ea0c 100644
--- a/static/skin/index.css
+++ b/static/skin/index.css
@@ -27,6 +27,7 @@ body {
position: sticky;
top: 0;
z-index: 3;
+ transition: all 0.5s ease;
}
.kiwixHomeBody__results {
@@ -137,6 +138,7 @@ body {
display: flex;
flex-direction: column;
align-items: center;
+ width: 100%;
}
.tagFilterLabel {
@@ -178,7 +180,7 @@ body {
}
#uiLanguageSelectorButton {
- margin: 16px 12px 0 0;
+ margin: 0 12px 0 0;
float: right;
}
@@ -467,7 +469,6 @@ body {
}
.feedLogo {
- margin: 16px 12px 0 0;
height: 30px;
float: right;
border-radius: 5px;
diff --git a/static/skin/index.js b/static/skin/index.js
index 52328eb54..41e475cfd 100644
--- a/static/skin/index.js
+++ b/static/skin/index.js
@@ -18,6 +18,7 @@
params.delete('userlang');
let timer;
let languages = {};
+ let previousScrollTop = Infinity;
function updateFeedLink() {
const inputParams = new URLSearchParams(window.location.search);
@@ -453,6 +454,22 @@
}
}
+ function updateNavVisibilityState() {
+ const st = window.scrollY;
+ const enableAutoHiding = document.body.clientWidth < 590;
+ if ((Math.abs(previousScrollTop - st) <= 5) || !enableAutoHiding)
+ return;
+ const kiwixNav = document.querySelector('.kiwixNav');
+ if (st > previousScrollTop) {
+ kiwixNav.style.position = 'fixed';
+ kiwixNav.style.top = '-100%';
+ } else {
+ kiwixNav.style.position = 'sticky';
+ kiwixNav.style.top = '0';
+ }
+ previousScrollTop = st;
+ }
+
window.addEventListener('resize', (event) => {
if (timer) {clearTimeout(timer)}
timer = setTimeout(() => {
@@ -531,6 +548,7 @@
}
updateFeedLink();
setCookie(filterCookieName, params.toString(), oneDayDelta);
+ setInterval(updateNavVisibilityState, 250);
};
// required by i18n.js:setUserLanguage()
diff --git a/static/templates/index.html b/static/templates/index.html
index 6bbe6d126..15aff898d 100644
--- a/static/templates/index.html
+++ b/static/templates/index.html
@@ -44,26 +44,26 @@
-
- 
-
-
-
-
+
+
+
+
+
+