smallsolar/libkiwix
1
0
Fork 0
mirror of https://github.com/kiwix/libkiwix.git synced 2025-06-26 10:11:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Changed the UI language selector in ZIM viewer

Browse Source 
The UI language selector in the viewer is now the same as on the welcome
page. This comes with some (mostly CSS) code duplication.
This commit is contained in:
Veloman Yunkan
2023-02-19 19:22:37 +04:00
parent 5850e0d489
commit 1d074cda40
4 changed files with 88 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
static/skin/taskbar.css
View File

@ -44,10 +44,6 @@
margin: 0 auto;
}
.kiwix #ui_language {
float: right;
}
#kiwix_button_show_toggle {
display: none;
}
@ -84,7 +80,6 @@ label[for="kiwix_button_show_toggle"],
float: right;
}
.kiwix #ui_language,
.kiwix #kiwixtoolbar button,
.kiwix #kiwixtoolbar input[type="submit"] {
box-sizing: border-box !important;
@ -134,6 +129,79 @@ a.suggest, a.suggest:visited, a.suggest:hover, a.suggest:active {
column-count: 1 !important;
}
.modal-wrapper {
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
background-color: rgba(0, 0, 0, 30%);
}
.modal {
color: #444343;
height: 280px;
width: 250px;
margin: 15px;
background-color: #f7f7f7;
border: 1px solid #ececec;
border-radius: 3px;
}
.modal-heading {
background-color: #f0f0f0;
height: 20%;
width: 100%;
border-bottom: 1px solid #ececec;
display: grid;
grid-template-columns: 3fr 1fr;
}
.modal-title {
display: flex;
font-size: 15px;
align-items: center;
padding-left: 20px;
font-family: poppins;
}
.modal-close-button {
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
padding: 20px;
}
#uiLanguageSelector {
display: none;
}
#uiLanguageSelector .modal {
height: 140px;
}
#uiLanguageSelector .modal-heading {
height: 40%;
}
#uiLanguageSelector .modal-content #ui_language {
width: 100%;
}
#uiLanguageSelectorButton {
margin: 0px 12px 6px 12px;
float: right;
}
@media(min-width:420px) {
.kiwix_button_cont {
display: inline-block !important;

1
static/skin/viewer.js
View File

@ -436,6 +436,7 @@ function handle_history_state_change(event) {
}
function changeUILanguage() {
window.modalUILanguageSelector.close();
const s = document.getElementById("ui_language");
const lang = s.options[s.selectedIndex].value;
viewerState.uiLanguage = lang;

12
static/viewer.html
View File

@ -29,9 +29,17 @@
<body style="margin:0" onload="setupViewer()">
<div class="kiwix" style="display:none" id="kiwixtoolbarwrapper">
<div id="kiwixtoolbar" class="ui-widget-header">
<select id="ui_language" class="kiwix">
</select>
<div class="kiwix_centered">
<a id="uiLanguageSelectorButton" onclick="window.modalUILanguageSelector.show()">
<svg xmlns="http://www.w3.org/2000/svg"
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="kiwix_searchform">
<form class="kiwixsearch" method="GET" action="javascript:performSearch()" id="kiwixsearchform">
<label for="kiwixsearchbox">&#x1f50d;</label>