smallsolar
/
libkiwix
mirror of https://github.com/kiwix/libkiwix.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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.
This commit is contained in:
Nikhil Tanwar 2023-02-26 20:37:32 +05:30
parent 08d6376eed
commit f838314435
4 changed files with 45 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
static/skin/index.css
View File

@ -27,6 +27,7 @@ body {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 3; z-index: 3;
transition: all 0.5s ease;
} }
.kiwixHomeBody__results { .kiwixHomeBody__results {
@ -137,6 +138,7 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
width: 100%;
} }
.tagFilterLabel { .tagFilterLabel {
@ -178,7 +180,7 @@ body {
} }
#uiLanguageSelectorButton { #uiLanguageSelectorButton {
margin: 16px 12px 0 0; margin: 0 12px 0 0;
float: right; float: right;
} }
@ -467,7 +469,6 @@ body {
} }
.feedLogo { .feedLogo {
margin: 16px 12px 0 0;
height: 30px; height: 30px;
float: right; float: right;
border-radius: 5px; border-radius: 5px;

18
static/skin/index.js
View File

@ -18,6 +18,7 @@
params.delete('userlang'); params.delete('userlang');
let timer; let timer;
let languages = {}; let languages = {};
let previousScrollTop = Infinity;
function updateFeedLink() { function updateFeedLink() {
const inputParams = new URLSearchParams(window.location.search); 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) => { window.addEventListener('resize', (event) => {
if (timer) {clearTimeout(timer)} if (timer) {clearTimeout(timer)}
timer = setTimeout(() => { timer = setTimeout(() => {
@ -531,6 +548,7 @@
} }
updateFeedLink(); updateFeedLink();
setCookie(filterCookieName, params.toString(), oneDayDelta); setCookie(filterCookieName, params.toString(), oneDayDelta);
setInterval(updateNavVisibilityState, 250);
}; };
// required by i18n.js:setUserLanguage() // required by i18n.js:setUserLanguage()

2
static/templates/index.html
View File

@ -44,6 +44,7 @@
<script type="text/javascript" src="{{root}}/skin/index.js?KIWIXCACHEID" defer></script> <script type="text/javascript" src="{{root}}/skin/index.js?KIWIXCACHEID" defer></script>
</head> </head>
<body> <body>
<div class='kiwixNav'>
<a href="{{root}}/catalog/v2/entries" id="feedLink"> <a href="{{root}}/catalog/v2/entries" id="feedLink">
<img src="{{root}}/skin/feed.png?KIWIXCACHEID" <img src="{{root}}/skin/feed.png?KIWIXCACHEID"
class="feedLogo" class="feedLogo"
@ -63,7 +64,6 @@
</g> </g>
</svg> </svg>
</a> </a>
<div class='kiwixNav'>
<div class="kiwixNav__filters"> <div class="kiwixNav__filters">
<div class="kiwixNav__select"> <div class="kiwixNav__select">
<select name="lang" id="languageFilter" class='kiwixNav__kiwixFilter filter'> <select name="lang" id="languageFilter" class='kiwixNav__kiwixFilter filter'>

8
test/server.cpp
View File

@ -61,9 +61,9 @@ const ResourceCollection resources200Compressible{
{ DYNAMIC_CONTENT, "/ROOT%23%3F/skin/i18n.js" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/i18n.js" },
{ STATIC_CONTENT, "/ROOT%23%3F/skin/i18n.js?cacheid=2cf0f8c5" }, { STATIC_CONTENT, "/ROOT%23%3F/skin/i18n.js?cacheid=2cf0f8c5" },
{ DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.css" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.css" },
{ STATIC_CONTENT, "/ROOT%23%3F/skin/index.css?cacheid=260b184e" }, { STATIC_CONTENT, "/ROOT%23%3F/skin/index.css?cacheid=be514520" },
{ DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.js" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.js" },
{ STATIC_CONTENT, "/ROOT%23%3F/skin/index.js?cacheid=042058df" }, { STATIC_CONTENT, "/ROOT%23%3F/skin/index.js?cacheid=39705b4f" },
{ DYNAMIC_CONTENT, "/ROOT%23%3F/skin/iso6391To3.js" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/iso6391To3.js" },
{ STATIC_CONTENT, "/ROOT%23%3F/skin/iso6391To3.js?cacheid=ecde2bb3" }, { STATIC_CONTENT, "/ROOT%23%3F/skin/iso6391To3.js?cacheid=ecde2bb3" },
{ DYNAMIC_CONTENT, "/ROOT%23%3F/skin/isotope.pkgd.min.js" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/isotope.pkgd.min.js" },
@ -270,7 +270,7 @@ TEST_F(ServerTest, CacheIdsOfStaticResources)
const std::vector<UrlAndExpectedResult> testData{ const std::vector<UrlAndExpectedResult> testData{
{ {
/* url */ "/ROOT%23%3F/", /* url */ "/ROOT%23%3F/",
R"EXPECTEDRESULT( href="/ROOT%23%3F/skin/index.css?cacheid=260b184e" R"EXPECTEDRESULT( href="/ROOT%23%3F/skin/index.css?cacheid=be514520"
<link rel="apple-touch-icon" sizes="180x180" href="/ROOT%23%3F/skin/favicon/apple-touch-icon.png?cacheid=f86f8df3"> <link rel="apple-touch-icon" sizes="180x180" href="/ROOT%23%3F/skin/favicon/apple-touch-icon.png?cacheid=f86f8df3">
<link rel="icon" type="image/png" sizes="32x32" href="/ROOT%23%3F/skin/favicon/favicon-32x32.png?cacheid=79ded625"> <link rel="icon" type="image/png" sizes="32x32" href="/ROOT%23%3F/skin/favicon/favicon-32x32.png?cacheid=79ded625">
<link rel="icon" type="image/png" sizes="16x16" href="/ROOT%23%3F/skin/favicon/favicon-16x16.png?cacheid=a986fedc"> <link rel="icon" type="image/png" sizes="16x16" href="/ROOT%23%3F/skin/favicon/favicon-16x16.png?cacheid=a986fedc">
@ -284,7 +284,7 @@ R"EXPECTEDRESULT( href="/ROOT%23%3F/skin/index.css?cacheid=260b184e"
<script type="text/javascript" src="/ROOT%23%3F/skin/languages.js?cacheid=b00b12db" defer></script> <script type="text/javascript" src="/ROOT%23%3F/skin/languages.js?cacheid=b00b12db" defer></script>
<script src="/ROOT%23%3F/skin/isotope.pkgd.min.js?cacheid=2e48d392" defer></script> <script src="/ROOT%23%3F/skin/isotope.pkgd.min.js?cacheid=2e48d392" defer></script>
<script src="/ROOT%23%3F/skin/iso6391To3.js?cacheid=ecde2bb3"></script> <script src="/ROOT%23%3F/skin/iso6391To3.js?cacheid=ecde2bb3"></script>
<script type="text/javascript" src="/ROOT%23%3F/skin/index.js?cacheid=042058df" defer></script> <script type="text/javascript" src="/ROOT%23%3F/skin/index.js?cacheid=39705b4f" defer></script>
<img src="/ROOT%23%3F/skin/feed.png?cacheid=56a672b1" <img src="/ROOT%23%3F/skin/feed.png?cacheid=56a672b1"
)EXPECTEDRESULT" )EXPECTEDRESULT"
}, },