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

Merge pull request #896 from kiwix/stickyNav 

Stick kiwixNav on top
This commit is contained in:
Veloman Yunkan 2023-03-06 15:56:42 +04:00 committed by GitHub
parent 973ac28dcb f838314435
commit 32b4bca745
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 51 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
static/skin/index.css
View File

@ -24,6 +24,10 @@ body {
background-color: #f4f6f8; background-color: #f4f6f8;
width: 100%; width: 100%;
padding: 20px; padding: 20px;
position: sticky;
top: 0;
z-index: 3;
transition: all 0.5s ease;
} }
.kiwixHomeBody__results { .kiwixHomeBody__results {
@ -134,6 +138,7 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
width: 100%;
} }
.tagFilterLabel { .tagFilterLabel {
@ -175,7 +180,7 @@ body {
} }
#uiLanguageSelectorButton { #uiLanguageSelectorButton {
margin: 16px 12px 0 0; margin: 0 12px 0 0;
float: right; float: right;
} }
@ -464,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;
@ -487,8 +491,9 @@ body {
@media screen and (max-width: 590px) { @media screen and (max-width: 590px) {
.kiwixNav { .kiwixNav__SearchForm {
height: 285px; display: flex;
flex-direction: column;
} }
.kiwixHomeBody { .kiwixHomeBody {

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=f0ee124c" }, { 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=f0ee124c" 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=f0ee124c"
<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"
}, },