From 408f089b4a0e491cdc2371960582a6fe1efb1de8 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 | 4 ++--
static/skin/index.js | 19 +++++++++++++++++++
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..97b767132 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 {
@@ -178,7 +179,7 @@ body {
}
#uiLanguageSelectorButton {
- margin: 16px 12px 0 0;
+ margin: 0 12px 0 0;
float: right;
}
@@ -467,7 +468,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..506131703 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,23 @@
}
}
+ 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%';
+ document.querySelector('.kiwixHomeBody').style.width = '100%';
+ } else {
+ kiwixNav.style.position = 'sticky';
+ kiwixNav.style.top = '0';
+ }
+ previousScrollTop = st;
+ }
+
window.addEventListener('resize', (event) => {
if (timer) {clearTimeout(timer)}
timer = setTimeout(() => {
@@ -531,6 +549,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 @@
-
- 
-
-
-
-
+
+
+
+
+
+