i18n: change selection style

* Do not show english name for selected language to keep selected item shorter. * Remove select with hack with data-width attribute * Also replace drop down arrow with language symbol. * Handle small screen sizes slightly better.
openwrt · Sep 23, 2024 · f935e0e · f935e0e
1 parent 759cece
commit f935e0e
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 72 deletions.
diff --git 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,26 +135,28 @@ 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><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="%23FFFFFF" d="M20 18h-1.44a.6.6 0 0 1-.4-.12.8.8 0 0 1-.23-.31L17 15h-5l-1 2.54a.8.8 0 0 1-.22.3.6.6 0 0 1-.4.14H9l4.55-11.47h1.89zm-3.53-4.31L14.89 9.5a12 12 0 0 1-.39-1.24q-.09.37-.19.69l-.19.56-1.58 4.19zm-6.3-1.58a13.4 13.4 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.2 17.2 0 0 1-5 2.1q.56.82.87 1.38a23.3 23.3 0 0 0 5.22-2.51 15.6 15.6 0 0 0 3.56 1.77zM3.63 5.33h4.91a8.1 8.1 0 0 1-2.45 4.45 9.1 9.1 0 0 1-2.46-4.45"/></svg>');
   background-repeat: no-repeat;
-  background-position: bottom 0.4em right 0.5em;
+  background-position: bottom 50% right 0.5em;
 
   color: #fff;
   font-size: inherit;
   background-color: #1084b2;
   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
@@ -18,61 +18,55 @@
           <img src="logo.svg" width="180" alt="Logo" />
         </a>
         <div style="flex-grow: 1"></div>
-
-        <select id="languages">
-          <option value="ar" data-width="12em">العربية (Arabic)</option>
-          <option value="ast" data-width="14em">Asturianu (Asturian)</option>
-          <option value="bg" data-width="16em">български (Bulgarian)</option>
-          <option value="bn" data-width="11em">বাংলা (Bengali)</option>
-          <option value="ca" data-width="13em">Català (Catalan)</option>
-          <option value="cs" data-width="12em">Čeština (Czech)</option>
-          <option value="da" data-width="12em">Dansk (Danish)</option>
-          <option value="de" data-width="14em">Deutsch (German)</option>
-          <option value="el" data-width="13em">Ελληνικά (Greek)</option>
-          <option value="en" data-width="8em">English</option>
-          <option value="es" data-width="14em">Español (Spanish)</option>
-          <option value="fa" data-width="12em">فارسی (Persian)</option>
-          <option value="fi" data-width="16em">Suomalainen (Finnish)</option>
-          <option value="fil" data-width="13em">Pilipino (Filipino)</option>
-          <option value="fr" data-width="13em">Français (French)</option>
-          <option value="ga" data-width="11em">Gaeilge (Irish)</option>
-          <option value="gl" data-width="13em">Galego (Galician)</option>
-          <option value="hu" data-width="15em">Magyar (Hungarian)</option>
-          <option value="id" data-width="20em">
-            Bahasa Indonesia (Indonesian)
-          </option>
-          <option value="it" data-width="13em">Italiano (Italian)</option>
-          <option value="ja" data-width="12em">日本 (Japanese)</option>
-          <option value="ka" data-width="15em">ქართული (Georgian)</option>
-          <option value="ko" data-width="13em">한국어 (Korean)</option>
-          <option value="lt" data-width="15em">Lietuvių (Lithuanian)</option>
-          <option value="lv" data-width="14em">Latviešu (Latvian)</option>
-          <option value="ml" data-width="15em">മലയാളം (Malayalam)</option>
-          <option value="no" data-width="14em">Norsk (Norwegian)</option>
-          <option value="pl" data-width="11em">Polski (Polish)</option>
-          <option value="pt" data-width="16em">Português (Portuguese)</option>
-          <option value="pt-br" data-width="26em">
-            Português do Brasil (Brazilian Portuguese)
-          </option>
-          <option value="ro" data-width="15em">Română (Romanian)</option>
-          <option value="ru" data-width="14em">Русский (Russian)</option>
-          <option value="sgs" data-width="19em">
-            Žemaitiu kalba (Samogitian)
-          </option>
-          <option value="sr" data-width="13em">Српски (Serbian)</option>
-          <option value="sk" data-width="14em">Slovenčina (Slovak)</option>
-          <option value="sv" data-width="14em">Svenska (Swedish)</option>
-          <option value="te" data-width="14em">తెలుగు (Telugu)</option>
-          <option value="tr" data-width="12em">Türkçe (Turkish)</option>
-          <option value="uk" data-width="17em">Українська (Ukrainian)</option>
-          <option value="vi" data-width="16em">Tiếng Việt (Vietnamese)</option>
-          <option value="zh-cn" data-width="18em">
-            简体中文 (Chinese Simplified)
-          </option>
-          <option value="zh-tw" data-width="18em">
-            繁體中文 (Chinese Traditional)
-          </option>
-        </select>
+        <div>
+          <select id="languages-select">
+            <option value="ar">العربية (Arabic)</option>
+            <option value="ast">Asturianu (Asturian)</option>
+            <option value="bg">български (Bulgarian)</option>
+            <option value="bn">বাংলা (Bengali)</option>
+            <option value="ca">Català (Catalan)</option>
+            <option value="cs">Čeština (Czech)</option>
+            <option value="da">Dansk (Danish)</option>
+            <option value="de">Deutsch (German)</option>
+            <option value="el">Ελληνικά (Greek)</option>
+            <option value="en">English</option>
+            <option value="es">Español (Spanish)</option>
+            <option value="fa">فارسی (Persian)</option>
+            <option value="fi">Suomalainen (Finnish)</option>
+            <option value="fil">Pilipino (Filipino)</option>
+            <option value="fr">Français (French)</option>
+            <option value="ga">Gaeilge (Irish)</option>
+            <option value="gl">Galego (Galician)</option>
+            <option value="hu">Magyar (Hungarian)</option>
+            <option value="id">Bahasa Indonesia (Indonesian)</option>
+            <option value="it">Italiano (Italian)</option>
+            <option value="ja">日本 (Japanese)</option>
+            <option value="ka">ქართული (Georgian)</option>
+            <option value="ko">한국어 (Korean)</option>
+            <option value="lt">Lietuvių (Lithuanian)</option>
+            <option value="lv">Latviešu (Latvian)</option>
+            <option value="ml">മലയാളം (Malayalam)</option>
+            <option value="no">Norsk (Norwegian)</option>
+            <option value="pl">Polski (Polish)</option>
+            <option value="pt">Português (Portuguese)</option>
+            <option value="pt-br">
+              Português do Brasil (Brazilian Portuguese)
+            </option>
+            <option value="ro">Română (Romanian)</option>
+            <option value="ru">Русский (Russian)</option>
+            <option value="sgs">Žemaitiu kalba (Samogitian)</option>
+            <option value="sr">Српски (Serbian)</option>
+            <option value="sk">Slovenčina (Slovak)</option>
+            <option value="sv">Svenska (Swedish)</option>
+            <option value="te">తెలుగు (Telugu)</option>
+            <option value="tr">Türkçe (Turkish)</option>
+            <option value="uk">Українська (Ukrainian)</option>
+            <option value="vi">Tiếng Việt (Vietnamese)</option>
+            <option value="zh-cn">简体中文 (Chinese Simplified)</option>
+            <option value="zh-tw">繁體中文 (Chinese Traditional)</option>
+          </select>
+          <button id="languages-button">Test</button>
+        </div>
       </div>
     </header>
 

diff --git 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