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 16b4dd96..6f228ea0 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 52328eb5..41e475cf 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 6bbe6d12..15aff898 100644
--- a/static/templates/index.html
+++ b/static/templates/index.html
@@ -44,26 +44,26 @@
-
- 
-
-
-
-
+
+
+
+
+
+