From 1d074cda40eea0c04e83c204f5d40e7026974c20 Mon Sep 17 00:00:00 2001 From: Veloman Yunkan Date: Sun, 19 Feb 2023 19:22:37 +0400 Subject: [PATCH] Changed the UI language selector in ZIM viewer The UI language selector in the viewer is now the same as on the welcome page. This comes with some (mostly CSS) code duplication. --- static/skin/taskbar.css | 78 ++++++++++++++++++++++++++++++++++++++--- static/skin/viewer.js | 1 + static/viewer.html | 12 +++++-- test/server.cpp | 8 ++--- 4 files changed, 88 insertions(+), 11 deletions(-) diff --git a/static/skin/taskbar.css b/static/skin/taskbar.css index 084b7150b..b67e9b9ee 100644 --- a/static/skin/taskbar.css +++ b/static/skin/taskbar.css @@ -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; diff --git a/static/skin/viewer.js b/static/skin/viewer.js index 3349a2d8b..2c3c80a14 100644 --- a/static/skin/viewer.js +++ b/static/skin/viewer.js @@ -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; diff --git a/static/viewer.html b/static/viewer.html index 2fcbfb9e6..571bc5780 100644 --- a/static/viewer.html +++ b/static/viewer.html @@ -29,9 +29,17 @@