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 b9c1cb4bc..5a1822341 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 0b3b9e414..485b60c31 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 5a1822341..16b4dd96c 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 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 @@ - - - - - - - - - -
+ + + + + + + + + +