Change language selection to use a generic globe icon instead of coun…

…try flags
kellpossible · Dec 7, 2023 · 8ed0284 · 8ed0284
1 parent 138eba0
commit 8ed0284
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 26 deletions.
diff --git a/src/templates/forecast.html b/src/templates/forecast.html
@@ -57,12 +57,7 @@
                     <h1 class="text-5xl text-center">{{ fl("forecast-area-" ~ area) }}</h1>
                     <div></div>
                 </div>
-                <div class="pt-2 pb-4 text-center">
-                    <span>
-                        <label for="language-select">Language:</label>
-                        {{ language_select() }}
-                    </span>
-                </div>
+                <div class="pt-2 pb-4 text-center">{{ language_select() }}</div>
                 <div class="sticky bottom-0 h-px -mt-px bg-slate-200 dark:bg-slate-400/20"></div>
                 {{ forecast_intro(
                 overall_hazard=overall_hazard,

diff --git a/src/templates/index.html b/src/templates/index.html
@@ -53,12 +53,7 @@ <h2 class="text-4xl font-bold">{{ fl("no-current-forecast-heading") }}</h2>
     <h1 class="text-5xl font-bold text-center">{{ page_title }}</h1>
     <div class="flex items-center justify-center w-screen">
         <div class="p-2 w-full md:min-w-3xl md:max-w-3xl text-center">
-            <div class="pb-2">
-                <span>
-                    <label for="language-select">Language:</label>
-                    {{ language_select() }}
-                </span>
-            </div>
+            <div class="pb-2">{{ language_select() }}</div>
             <div class="sticky bottom-0 h-px -mt-px bg-slate-200 dark:bg-slate-400/20"></div>
             {% if (forecasts | length) == 0 %}
                 <p class="text-2xl font-bold text-rose-600">{{ fl("no-forecasts-available-message") }}</p>

diff --git a/src/templates/macros/language_select.html b/src/templates/macros/language_select.html
@@ -1,16 +1,18 @@
 {% macro language_select() -%}
-    <select id="language-select"
-            name="lang"
-            autocomplete="off"
-            class="p-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-            onchange="window.location.replace(`/i18n?lang=${this.value}`)">
-        <option value="en-US"
-                {% if LANGUAGE == "en-US" %}selected="selected"{% endif %}>
-            🇬🇧 English
-        </option>
-        <option value="ka-GE"
-                {% if LANGUAGE == "ka-GE" %}selected="selected"{% endif %}>
-            🇬🇪 ქართული
-        </option>
-    </select>
+    <span>
+        <select id="language-select"
+                name="lang"
+                autocomplete="off"
+                class="p-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                onchange="window.location.replace(`/i18n?lang=${this.value}`)">
+            <option value="en-US"
+                    {% if LANGUAGE == "en-US" %}selected="selected"{% endif %}>
+                🌍 English
+            </option>
+            <option value="ka-GE"
+                    {% if LANGUAGE == "ka-GE" %}selected="selected"{% endif %}>
+                🌍 ქართული
+            </option>
+        </select>
+    </span>
 {%- endmacro %}