mirror of https://github.com/kiwix/libkiwix.git
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
parent
08d6376eed
commit
f838314435
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -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'>
|
||||
|
|
|
|||
|
|
@ -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=be514520" },
|
||||
{ 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" },
|
||||
{ STATIC_CONTENT, "/ROOT%23%3F/skin/iso6391To3.js?cacheid=ecde2bb3" },
|
||||
{ DYNAMIC_CONTENT, "/ROOT%23%3F/skin/isotope.pkgd.min.js" },
|
||||
|
|
@ -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=be514520"
|
||||
<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">
|
||||
|
|
@ -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=39705b4f" defer></script>
|
||||
<img src="/ROOT%23%3F/skin/feed.png?cacheid=56a672b1"
|
||||
)EXPECTEDRESULT"
|
||||
},
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue