feat: add es, hu, ko, pt-BR, to language picker. widen dropdown, setu…

…p overflow scrolling
satisfactorymodding · Oct 11, 2024 · 0accea5 · 0accea5
1 parent e135b97
commit 0accea5
Showing 1 changed file with 22 additions and 4 deletions.
diff --git a/src/lib/components/general/TranslationDropdown.svelte b/src/lib/components/general/TranslationDropdown.svelte
@@ -14,6 +14,8 @@
     style?: string;
   };
 
+  const defaultFlagTextStyle = 'text-white';
+
   // cspell:disable
   const languages: Record<string, language> = {
     en: {
@@ -23,16 +25,28 @@
     de: {
       name: 'Deutsch',
       flag: '🇩🇪',
-      style: 'text-black'
+      style: 'text-black' // Bug in something? text color affects the top stripe of the DE flag
+    },
+    es: {
+      name: 'Español',
+      flag: '🇪🇸'
     },
     fr: {
       name: 'Français',
       flag: '🇫🇷'
     },
+    hu: {
+      name: 'Magyar',
+      flag: '🇭🇺'
+    },
     it: {
       name: 'Italiano',
       flag: '🇮🇹'
     },
+    ko: {
+      name: '한국어',
+      flag: '🇰🇷'
+    },
     lv: {
       name: 'Latviešu',
       flag: '🇱🇻'
@@ -45,6 +59,10 @@
       name: 'Nederlands',
       flag: '🇳🇱'
     },
+    'pt-BR': {
+      name: 'Português (Brasil)',
+      flag: '🇧🇷'
+    },
     pl: {
       name: 'Polski',
       flag: '🇵🇱'
@@ -82,17 +100,17 @@
 
 <button class="variant-ghost-primary btn btn-sm grid grid-flow-col" use:popup={languageMenuBox}>
   <span>{languages[$lang].name}</span>
-  <span class={`text-xl ${languages[$lang]?.style ?? 'text-white'}`}>{languages[$lang].flag}</span>
+  <span class={`text-xl ${languages[$lang]?.style ?? defaultFlagTextStyle}`}>{languages[$lang].flag}</span>
 </button>
 
-<div class="card w-48 py-2 shadow-xl" data-popup="languageMenuBox">
+<div class="card w-56 overflow-y-auto scroll-smooth py-2 shadow-xl" data-popup="languageMenuBox">
   <nav class="list-nav">
     <ul>
       {#each Object.entries(languages) as [k, v]}
         <li class:bg-primary-active-token={$lang === k}>
           <button class="w-full" on:click={() => lang.set(k)}>
             <span>{v.name}</span>
-            <span class="text-xl ${v?.style ?? 'text-white'}">{v.flag}</span>
+            <span class="text-xl {v?.style ?? defaultFlagTextStyle}">{v.flag}</span>
           </button>
         </li>
       {/each}