Skip to content

Commit

Permalink
Auto hiding of kiwixNav on scroll for mobile devices
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
juuz0 committed Mar 2, 2023
1 parent 08d6376 commit 408f089
Show file tree
Hide file tree
Showing 4 changed files with 45 additions and 26 deletions.
4 changes: 2 additions & 2 deletions static/skin/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ body {
position: sticky;
top: 0;
z-index: 3;
transition: all 0.5s ease;
}

.kiwixHomeBody__results {
Expand Down Expand Up @@ -178,7 +179,7 @@ body {
}

#uiLanguageSelectorButton {
margin: 16px 12px 0 0;
margin: 0 12px 0 0;
float: right;
}

Expand Down Expand Up @@ -467,7 +468,6 @@ body {
}

.feedLogo {
margin: 16px 12px 0 0;
height: 30px;
float: right;
border-radius: 5px;
Expand Down
19 changes: 19 additions & 0 deletions static/skin/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
params.delete('userlang');
let timer;
let languages = {};
let previousScrollTop = Infinity;

function updateFeedLink() {
const inputParams = new URLSearchParams(window.location.search);
Expand Down Expand Up @@ -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(() => {
Expand Down Expand Up @@ -531,6 +549,7 @@
}
updateFeedLink();
setCookie(filterCookieName, params.toString(), oneDayDelta);
setInterval(updateNavVisibilityState, 250);
};

// required by i18n.js:setUserLanguage()
Expand Down
38 changes: 19 additions & 19 deletions static/templates/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -44,26 +44,26 @@
<script type="text/javascript" src="{{root}}/skin/index.js?KIWIXCACHEID" defer></script>
</head>
<body>
<a href="{{root}}/catalog/v2/entries" id="feedLink">
<img src="{{root}}/skin/feed.png?KIWIXCACHEID"
class="feedLogo"
id="feedLogo"
alt="Library OPDS Feed"
aria-label="Library OPDS Feed"
title="Library OPDS Feed">
</a>
<a onclick="window.modalUILanguageSelector.show()">
<svg xmlns="http://www.w3.org/2000/svg"
id="uiLanguageSelectorButton"
width="30"
height="30"
viewBox="0 0 20 20">
<g fill="#36c">
<path d="M20 18h-1.44a.61.61 0 0 1-.4-.12.81.81 0 0 1-.23-.31L17 15h-5l-1 2.54a.77.77 0 0 1-.22.3.59.59 0 0 1-.4.14H9l4.55-11.47h1.89zm-3.53-4.31L14.89 9.5a11.62 11.62 0 0 1-.39-1.24q-.09.37-.19.69l-.19.56-1.58 4.19zm-6.3-1.58a13.43 13.43 0 0 1-2.91-1.41 11.46 11.46 0 0 0 2.81-5.37H12V4H7.31a4 4 0 0 0-.2-.56C6.87 2.79 6.6 2 6.6 2l-1.47.5s.4.89.6 1.5H0v1.33h2.15A11.23 11.23 0 0 0 5 10.7a17.19 17.19 0 0 1-5 2.1q.56.82.87 1.38a23.28 23.28 0 0 0 5.22-2.51 15.64 15.64 0 0 0 3.56 1.77zM3.63 5.33h4.91a8.11 8.11 0 0 1-2.45 4.45 9.11 9.11 0 0 1-2.46-4.45z"/>
</g>
</svg>
</a>
<div class='kiwixNav'>
<a href="{{root}}/catalog/v2/entries" id="feedLink">
<img src="{{root}}/skin/feed.png?KIWIXCACHEID"
class="feedLogo"
id="feedLogo"
alt="Library OPDS Feed"
aria-label="Library OPDS Feed"
title="Library OPDS Feed">
</a>
<a onclick="window.modalUILanguageSelector.show()">
<svg xmlns="http://www.w3.org/2000/svg"
id="uiLanguageSelectorButton"
width="30"
height="30"
viewBox="0 0 20 20">
<g fill="#36c">
<path d="M20 18h-1.44a.61.61 0 0 1-.4-.12.81.81 0 0 1-.23-.31L17 15h-5l-1 2.54a.77.77 0 0 1-.22.3.59.59 0 0 1-.4.14H9l4.55-11.47h1.89zm-3.53-4.31L14.89 9.5a11.62 11.62 0 0 1-.39-1.24q-.09.37-.19.69l-.19.56-1.58 4.19zm-6.3-1.58a13.43 13.43 0 0 1-2.91-1.41 11.46 11.46 0 0 0 2.81-5.37H12V4H7.31a4 4 0 0 0-.2-.56C6.87 2.79 6.6 2 6.6 2l-1.47.5s.4.89.6 1.5H0v1.33h2.15A11.23 11.23 0 0 0 5 10.7a17.19 17.19 0 0 1-5 2.1q.56.82.87 1.38a23.28 23.28 0 0 0 5.22-2.51 15.64 15.64 0 0 0 3.56 1.77zM3.63 5.33h4.91a8.11 8.11 0 0 1-2.45 4.45 9.11 9.11 0 0 1-2.46-4.45z"/>
</g>
</svg>
</a>
<div class="kiwixNav__filters">
<div class="kiwixNav__select">
<select name="lang" id="languageFilter" class='kiwixNav__kiwixFilter filter'>
Expand Down
10 changes: 5 additions & 5 deletions test/server.cpp
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,9 @@ 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=260b184e" },
{ STATIC_CONTENT, "/ROOT%23%3F/skin/index.css?cacheid=47689300" },
{ 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=4a3fda85" },
{ DYNAMIC_CONTENT, "/ROOT%23%3F/skin/iso6391To3.js" },
{ STATIC_CONTENT, "/ROOT%23%3F/skin/iso6391To3.js?cacheid=ecde2bb3" },
{ DYNAMIC_CONTENT, "/ROOT%23%3F/skin/isotope.pkgd.min.js" },
Expand Down Expand Up @@ -270,7 +270,7 @@ TEST_F(ServerTest, CacheIdsOfStaticResources)
const std::vector<UrlAndExpectedResult> testData{
{
/* 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=47689300"
<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="16x16" href="/ROOT%23%3F/skin/favicon/favicon-16x16.png?cacheid=a986fedc">
Expand All @@ -284,8 +284,8 @@ 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 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 type="text/javascript" src="/ROOT%23%3F/skin/index.js?cacheid=042058df" defer></script>
<img src="/ROOT%23%3F/skin/feed.png?cacheid=56a672b1"
<script type="text/javascript" src="/ROOT%23%3F/skin/index.js?cacheid=4a3fda85" defer></script>
<img src="/ROOT%23%3F/skin/feed.png?cacheid=56a672b1"
)EXPECTEDRESULT"
},
{
Expand Down

0 comments on commit 408f089

Please sign in to comment.