From 3cdc6c41c46c74436e9dce7fb4692b4c5d7bce81 Mon Sep 17 00:00:00 2001 From: Nikhil Tanwar <2002nikhiltanwar@gmail.com> Date: Sat, 11 Feb 2023 22:59:13 +0530 Subject: [PATCH 1/3] Stick kiwixNav on top The filters menu will always stay on top now. --- static/skin/index.css | 3 +++ test/server.cpp | 4 ++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/static/skin/index.css b/static/skin/index.css index b9c1cb4b..5a182234 100644 --- a/static/skin/index.css +++ b/static/skin/index.css @@ -24,6 +24,9 @@ body { background-color: #f4f6f8; width: 100%; padding: 20px; + position: sticky; + top: 0; + z-index: 3; } .kiwixHomeBody__results { diff --git a/test/server.cpp b/test/server.cpp index 0b3b9e41..485b60c3 100644 --- a/test/server.cpp +++ b/test/server.cpp @@ -61,7 +61,7 @@ const ResourceCollection resources200Compressible{ { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/i18n.js" }, { STATIC_CONTENT, "/ROOT%23%3F/skin/i18n.js?cacheid=2cf0f8c5" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.css" }, - { STATIC_CONTENT, "/ROOT%23%3F/skin/index.css?cacheid=f0ee124c" }, + { STATIC_CONTENT, "/ROOT%23%3F/skin/index.css?cacheid=260b184e" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.js" }, { STATIC_CONTENT, "/ROOT%23%3F/skin/index.js?cacheid=042058df" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/iso6391To3.js" }, @@ -270,7 +270,7 @@ TEST_F(ServerTest, CacheIdsOfStaticResources) const std::vector testData{ { /* url */ "/ROOT%23%3F/", -R"EXPECTEDRESULT( href="/ROOT%23%3F/skin/index.css?cacheid=f0ee124c" +R"EXPECTEDRESULT( href="/ROOT%23%3F/skin/index.css?cacheid=260b184e" From 08d6376eed75e87bc340adb33d6d2ed4597a19a3 Mon Sep 17 00:00:00 2001 From: Nikhil Tanwar <2002nikhiltanwar@gmail.com> Date: Sun, 26 Feb 2023 19:38:15 +0530 Subject: [PATCH 2/3] Economical space usage in search form No pre defined height for devices with with max-width 590px now. The previous height took a good amount of space on some devices. --- static/skin/index.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/static/skin/index.css b/static/skin/index.css index 5a182234..16b4dd96 100644 --- a/static/skin/index.css +++ b/static/skin/index.css @@ -490,8 +490,9 @@ body { @media screen and (max-width: 590px) { - .kiwixNav { - height: 285px; + .kiwixNav__SearchForm { + display: flex; + flex-direction: column; } .kiwixHomeBody { 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 3/3] 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 @@ - - - - - - - - - -
+ + + + + + + + + +