Added UI language selector on the welcome page

Also:

- Moved the language selector to the right hand side on the ZIM viewer
  page (to be consistent with the welcome page)
This commit is contained in:
Veloman Yunkan 2023-02-09 16:23:27 +01:00
parent 351bc87231
commit 514d6e6514
5 changed files with 27 additions and 9 deletions

View File

@ -157,6 +157,11 @@ body {
font-weight: bolder;
}
#ui_language {
float: right;
top: 0;
}
.book__list {
position: relative;
margin: 0 auto;
@ -472,11 +477,11 @@ body {
.kiwixHomeBody {
min-height: calc(100vh - 287px);
}
.kiwixSearch {
margin-top: 11px;
}
.kiwixButton {
margin: 15px 0;
width: 229px;

View File

@ -31,6 +31,14 @@
document.querySelector('#feedLink').href = feedLink;
}
function changeUILanguage() {
const s = document.getElementById("ui_language");
const lang = s.options[s.selectedIndex].value;
const q = new URLSearchParams(window.location.search);
q.set("userlang", lang);
location.search = q.toString();
}
function queryUrlBuilder() {
let url = `${root}/catalog/search?`;
url += Object.keys(incrementalLoadingParams).map(key => `${key}=${incrementalLoadingParams[key]}`).join("&");
@ -466,6 +474,7 @@
}
async function onload() {
initUILanguageSelector(getUserLanguage(), changeUILanguage);
iso = new Isotope( '.book__list', {
itemSelector: '.book',
getSortData:{

View File

@ -45,7 +45,7 @@
}
.kiwix #ui_language {
float: left;
float: right;
}
#kiwix_button_show_toggle {

View File

@ -38,6 +38,7 @@
}
</style>
<script type="module" src="{{root}}/skin/i18n.js?KIWIXCACHEID" defer></script>
<script type="text/javascript" src="{{root}}/skin/languages.js?KIWIXCACHEID" defer></script>
<script src="{{root}}/skin/isotope.pkgd.min.js?KIWIXCACHEID" defer></script>
<script src="{{root}}/skin/iso6391To3.js?KIWIXCACHEID"></script>
<script type="text/javascript" src="{{root}}/skin/index.js?KIWIXCACHEID" defer></script>
@ -47,6 +48,8 @@
<img src="{{root}}/skin/feed.png?KIWIXCACHEID" class="feedLogo" alt="Library OPDS Feed" aria-label="Library OPDS Feed" title="Library OPDS Feed">
</a>
<div class='kiwixNav'>
<select id="ui_language">
</select>
<div class="kiwixNav__filters">
<div class="kiwixNav__select">
<select name="lang" id="languageFilter" class='kiwixNav__kiwixFilter filter'>

View File

@ -61,9 +61,9 @@ const ResourceCollection resources200Compressible{
{ DYNAMIC_CONTENT, "/ROOT%23%3F/skin/i18n.js" },
{ STATIC_CONTENT, "/ROOT%23%3F/skin/i18n.js?cacheid=c475fe0b" },
{ DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.css" },
{ STATIC_CONTENT, "/ROOT%23%3F/skin/index.css?cacheid=316dbc21" },
{ STATIC_CONTENT, "/ROOT%23%3F/skin/index.css?cacheid=ac5767d8" },
{ DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.js" },
{ STATIC_CONTENT, "/ROOT%23%3F/skin/index.js?cacheid=1f5f1cce" },
{ STATIC_CONTENT, "/ROOT%23%3F/skin/index.js?cacheid=c333bdba" },
{ 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" },
@ -71,7 +71,7 @@ const ResourceCollection resources200Compressible{
{ DYNAMIC_CONTENT, "/ROOT%23%3F/skin/mustache.min.js" },
{ STATIC_CONTENT, "/ROOT%23%3F/skin/mustache.min.js?cacheid=bd23c4fb" },
{ DYNAMIC_CONTENT, "/ROOT%23%3F/skin/taskbar.css" },
{ STATIC_CONTENT, "/ROOT%23%3F/skin/taskbar.css?cacheid=eb3bec90" },
{ STATIC_CONTENT, "/ROOT%23%3F/skin/taskbar.css?cacheid=af241ff1" },
{ DYNAMIC_CONTENT, "/ROOT%23%3F/skin/viewer.js" },
{ STATIC_CONTENT, "/ROOT%23%3F/skin/viewer.js?cacheid=d0c7f567" },
{ DYNAMIC_CONTENT, "/ROOT%23%3F/skin/fonts/Poppins.ttf" },
@ -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=316dbc21"
R"EXPECTEDRESULT( href="/ROOT%23%3F/skin/index.css?cacheid=ac5767d8"
<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">
@ -281,9 +281,10 @@ R"EXPECTEDRESULT( href="/ROOT%23%3F/skin/index.css?cacheid=316dbc21"
src: url("/ROOT%23%3F/skin/fonts/Poppins.ttf?cacheid=af705837") format("truetype");
src: url("/ROOT%23%3F/skin/fonts/Roboto.ttf?cacheid=84d10248") format("truetype");
<script type="module" src="/ROOT%23%3F/skin/i18n.js?cacheid=c475fe0b" defer></script>
<script type="text/javascript" src="/ROOT%23%3F/skin/languages.js?cacheid=fe100348" 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=1f5f1cce" defer></script>
<script type="text/javascript" src="/ROOT%23%3F/skin/index.js?cacheid=c333bdba" defer></script>
<img src="/ROOT%23%3F/skin/feed.png?cacheid=56a672b1" class="feedLogo" alt="Library OPDS Feed" aria-label="Library OPDS Feed" title="Library OPDS Feed">
)EXPECTEDRESULT"
},
@ -302,7 +303,7 @@ R"EXPECTEDRESULT( <img src="${root}/skin/download
},
{
/* url */ "/ROOT%23%3F/viewer",
R"EXPECTEDRESULT( <link type="text/css" href="./skin/taskbar.css?cacheid=eb3bec90" rel="Stylesheet" />
R"EXPECTEDRESULT( <link type="text/css" href="./skin/taskbar.css?cacheid=af241ff1" rel="Stylesheet" />
<link type="text/css" href="./skin/css/autoComplete.css?cacheid=08951e06" rel="Stylesheet" />
<script type="module" src="./skin/i18n.js?cacheid=c475fe0b" defer></script>
<script type="text/javascript" src="./skin/languages.js?cacheid=fe100348" defer></script>