From 924d03b8d7314e600a09458282ab04b6ba9b291d Mon Sep 17 00:00:00 2001 From: Moritz Warning Date: Tue, 24 Sep 2024 00:07:04 +0200 Subject: [PATCH] i18n: change selection style * Remove english name for selected language to keep selected item shorter. * Remove select width hack with data-width attribute. * Replace drop down arrow with language symbol. * Handle small screen sizes slightly better. Signed-off-by: Moritz Warning --- www/index.css | 26 +++++++------ www/index.html | 104 +++++++++++++++++++++++-------------------------- www/index.js | 10 ++--- 3 files changed, 68 insertions(+), 72 deletions(-) diff --git a/www/index.css b/www/index.css index f42df951..1da581a5 100644 --- a/www/index.css +++ b/www/index.css @@ -96,8 +96,8 @@ h6 { } header > div { - padding-left: 1.5em; - padding-right: 1.5em; + padding-left: 2%; + padding-right: 2%; min-height: 4em; display: flex; @@ -135,10 +135,17 @@ header > div { font-size: inherit; } -#languages { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='fill:%23FFFFFF;' width='2em' height='20' viewBox='0 0 1792 1792'%3E%3Cpath d='M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z'/%3E%3C/svg%3E"); +#languages-select { + opacity: 0; + position: absolute; + width: 10em; + min-height: 3.5em; +} + +#languages-button { + background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>'); background-repeat: no-repeat; - background-position: bottom 0.4em right 0.5em; + background-position: bottom 50% right 0.5em; color: #fff; font-size: inherit; @@ -146,15 +153,10 @@ header > div { border-radius: 0.25em; box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.3); font-family: "Open Sans", sans-serif; - padding: 6px 3em 6px 16px; - width: 8em; - + padding: 0.4em 2em 0.4em 0.4em; outline: none; border: none; - /* hide defaul arrow */ - -moz-appearance: none; - -webkit-appearance: none; - appearance: none; + min-width: 8em; } #download-table1 td { diff --git a/www/index.html b/www/index.html index fa280671..677ef4ac 100644 --- a/www/index.html +++ b/www/index.html @@ -18,61 +18,55 @@ Logo
- - +
+ + +
diff --git a/www/index.js b/www/index.js index 0cdd6770..324a01fb 100644 --- a/www/index.js +++ b/www/index.js @@ -719,7 +719,7 @@ function changeModel(version, overview, title) { } function initTranslation() { - const select = $("#languages"); + const select = $("#languages-select"); // set initial language const long = (navigator.language || navigator.userLanguage).toLowerCase(); @@ -733,10 +733,10 @@ function initTranslation() { } select.onchange = function () { - const selected = select.options[select.selectedIndex]; - // transfer OPTION width to SELECT element - select.style.width = selected.getAttribute("data-width"); - translate(selected.value); + const option = select.options[select.selectedIndex]; + // set select button text and strip English name + $("#languages-button").textContent = option.text.replace(/ \(.*/, ""); + translate(option.value); }; // trigger translation