fix: display translations as dropdown based on total langocde length

blokkli · Jan 14, 2025 · 21d9059 · 21d9059
1 parent 8b5fda3
commit 21d9059
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 6 deletions.
diff --git a/css/partials/toolbar.css b/css/partials/toolbar.css
@@ -125,21 +125,21 @@
     @apply uppercase h-full font-semibold;
 
     &.bk-is-active {
-      @apply bg-white text-mono-900;
+      @apply !bg-white text-mono-900;
     }
   }
   .bk-translations-dropdown {
-    @apply absolute top-full right-0 lg:right-auto lg:left-0 w-200 bg-white z-toolbar-dropdown shadow-lg;
+    @apply absolute top-full right-0 lg:right-auto lg:left-0 max-w-[300px] bg-white z-toolbar-dropdown shadow-lg;
 
     label {
-      @apply relative px-15 py-10 block cursor-pointer lg:hover:bg-mono-100;
+      @apply relative px-15 py-10 block cursor-pointer lg:hover:bg-mono-100 whitespace-nowrap text-sm;
       &.bk-is-muted {
         @apply text-mono-400;
       }
       > div {
-        @apply flex items-center gap-10;
+        @apply flex items-center gap-10 md:gap-20 justify-between;
         span {
-          @apply font-semibold;
+          @apply font-semibold order-last;
         }
       }
     }

diff --git a/playground/app/blokkli.editAdapter.ts b/playground/app/blokkli.editAdapter.ts
@@ -187,10 +187,18 @@ export default defineBlokkliEditAdapter((ctx) => {
               id: 'en',
               name: 'English',
             },
+            // {
+            //   id: 'en-US',
+            //   name: 'English (United States)',
+            // },
             {
               id: 'de',
               name: 'German',
             },
+            // {
+            //   id: 'de-CH',
+            //   name: 'German (Switzerland)',
+            // },
             {
               id: 'fr',
               name: 'French',

diff --git a/src/runtime/components/Edit/Features/Translations/index.vue b/src/runtime/components/Edit/Features/Translations/index.vue
@@ -116,7 +116,20 @@ const { translation, editMode } = state
 
 const isOpen = ref(false)
 
-const isDropdown = computed(() => ui.isMobile.value || items.value.length > 5)
+const isDropdown = computed(() => {
+  // Always a dropdown on mobile.
+  if (ui.isMobile.value) {
+    return true
+  }
+
+  // It is a dropdown if all langcodes combined is greater than 15.
+  // That way up to 7 languages with 2-char langcodes are displayed as radio buttons.
+  // This handles cases where langcodes are e.g. 'en-US', 'en-GB', 'de-CH', etc.
+  // In this case it switches to a dropdown. This is better than relying on the number
+  // languages.
+  const allCodes = items.value.map((v) => v.code).join('')
+  return allCodes.length > 15
+})
 const activeLangcode = computed(() => context.value.language)
 const activeLanguage = computed<Language>(() => {
   return (