diff --git a/www/index.css b/www/index.css
index f42df951..2e84c2ac 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 2.3em 0.4em 0.8em;
outline: none;
border: none;
- /* hide defaul arrow */
- -moz-appearance: none;
- -webkit-appearance: none;
- appearance: none;
+ min-width: 6em;
}
#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 @@
-
-
+
+
+
+
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