THE-1364 placement du selecteur de langues mobile

abes-esr · Oct 10, 2024 · 8e51a9e · 8e51a9e
1 parent 3b46bb2
commit 8e51a9e
Showing 1 changed file with 26 additions and 12 deletions.
diff --git a/components/common/HeaderMobile.vue b/components/common/HeaderMobile.vue
@@ -47,15 +47,17 @@
     <!-- Menu burger mobile -->
     <v-fade-transition>
       <div v-show="showMenu" ref="expandedMenu" tabindex="0" class="expanded-search-bar-container white-containers" role="list">
-        <div class="languages-btn-container" role="list" :aria-label="$t('header.localeSelection')">
-          <v-btn flat @click="setLanguage('fr')" aria-label="Changer la langue du site en français"
-                 :class="locale === 'fr' ? 'selected' : ''">FR</v-btn>
-          <v-divider vertical role="presentation"></v-divider>
-          <v-btn flat @click="setLanguage('en')" aria-label="Switch language to English"
-                 :class="locale === 'en' ? 'selected' : ''">EN</v-btn>
-          <v-divider vertical role="presentation"></v-divider>
-          <v-btn flat @click="setLanguage('es')" aria-label="Cambiar el idioma a español"
-                 :class="locale === 'es' ? 'selected' : ''">ES</v-btn>
+        <div class="languages-btn-layout-wrapper">
+          <div class="languages-btn-container" role="list" :aria-label="$t('header.localeSelection')">
+            <v-btn flat @click="setLanguage('fr')" aria-label="Changer la langue du site en français" density="compact" size="small"
+                   :class="locale === 'fr' ? 'selected' : ''">FR</v-btn>
+            <v-divider vertical role="presentation"></v-divider>
+            <v-btn flat @click="setLanguage('en')" aria-label="Switch language to English" density="compact" size="small"
+                   :class="locale === 'en' ? 'selected' : ''">EN</v-btn>
+            <v-divider vertical role="presentation"></v-divider>
+            <v-btn flat @click="setLanguage('es')" aria-label="Cambiar el idioma a español" density="compact" size="small"
+                   :class="locale === 'es' ? 'selected' : ''">ES</v-btn>
+          </div>
         </div>
         <div class="expanded-burger-menu">
           <div class="nav-bar-list-burger">
@@ -358,10 +360,22 @@ onMounted(() => {
 
 .languages-btn-container {
   padding-top: 10px;
+  display: inline-flex;
+  margin-bottom: 10px;
+  width: fit-content;
+  justify-self: center;
+
+  :deep(.v-btn--size-small) {
+    font-size: unset;
+    min-width: unset;
+    width: 2.3em;
+  }
+}
+
+.languages-btn-layout-wrapper {
   width: 100%;
-  display: grid;
-  grid-template-columns: 3fr 2fr;
-  height: 35px;
+  display: inline-grid;
+  grid-template-columns: 1fr 1fr;
 }
 
 .languages-btn {