194 fix list page

components/MainMap/NavMenu.vue

@@ -6,7 +6,7 @@ import type { LocaleObject } from 'vue-i18n-routing'
 import { VDivider } from 'vuetify/components/VDivider'
 import { VList, VListItem, VListItemTitle } from 'vuetify/components/VList'
 import { VMenu } from 'vuetify/components/VMenu'
-
+import { useLocale } from 'vuetify'
 import { defineNuxtComponent } from '#app'
 import ExternalLink from '~/components/UI/ExternalLink.vue'
 import IconButton from '~/components/UI/IconButton.vue'
@@ -34,6 +34,14 @@ export default defineNuxtComponent({
     },
   },
 
+  setup() {
+    const { current } = useLocale()
+
+    return {
+      vuetifyLocale: current,
+    }
+  },
+
   computed: {
     ...mapWritableState(siteStore, ['locale']),
 
@@ -46,6 +54,7 @@ export default defineNuxtComponent({
     async setLocale(locale: string) {
       await this.$i18n.setLocale(locale)
       this.locale = locale
+      this.vuetifyLocale = locale
     },
     openLink(title: string, url: string) {
       this.$tracking({

components/PoisList/PoisTable.vue

@@ -24,6 +24,7 @@ const props = defineProps<{
   category: ApiMenuCategory
 }>()
 
+const device = useDevice()
 const { routeToString, addressToString } = useField()
 const { t, locale } = useI18n()
 const siteStore = useSiteStore()
@@ -157,31 +158,6 @@ function getContext(key: string) {
 
 <template>
   <VCard class="mt-8">
-    <VToolbar class="pa-2" flat>
-      <TeritorioIconBadge
-        :color-fill="category.category.color_fill"
-        :picto="category.category.icon"
-        size="xl"
-      />
-      <VToolbarTitle class="d-flex print:tw-pb-4" tag="h1" :text="category.category.name.fr" />
-
-      <VTextField
-        v-model="search"
-        :label="t('poisTable.search')"
-        clearable
-        variant="solo-filled"
-        hide-details="auto"
-      >
-        <template #append-inner>
-          <FontAwesomeIcon class="px-2" icon="search" />
-        </template>
-      </VTextField>
-      <Actions
-        class="ma-0 ml-2 w-auto"
-        :category-id="category.id"
-        :color-line="category.category.color_line"
-      />
-    </VToolbar>
     <VDataTable
       :loading="loadingState"
       :headers="headers"
@@ -191,6 +167,38 @@ function getContext(key: string) {
       :custom-filter="customFilter"
       items-per-page="20"
     >
+      <template #top>
+        <header class="d-flex align-center pa-2" :style="{ flexDirection: device.smallScreen ? 'column' : 'row', gap: '8px', background: '#eeeeee' }">
+          <h1 class="d-flex align-center print:tw-pb-4" :style="{ marginRight: device.smallScreen ? 'unset' : 'auto' }">
+            <TeritorioIconBadge
+              :color-fill="category.category.color_fill"
+              :picto="category.category.icon"
+              size="xl"
+            />
+            {{ category.category.name.fr }}
+          </h1>
+          <VTextField
+            v-model="search"
+            :style="{
+              width: device.smallScreen ? '75%' : '25%',
+              flexGrow: device.smallScreen ? 'unset' : '0',
+            }"
+            :label="t('poisTable.filter')"
+            clearable
+            variant="solo-filled"
+            hide-details="auto"
+          >
+            <template #append-inner>
+              <FontAwesomeIcon class="px-2" icon="search" />
+            </template>
+          </VTextField>
+          <Actions
+            class="ma-0 w-auto"
+            :category-id="category.id"
+            :color-line="category.category.color_line"
+          />
+        </header>
+      </template>
       <template #item="{ item, columns }">
         <tr>
           <td v-for="col in columns" :key="col.key">
@@ -227,10 +235,18 @@ function getContext(key: string) {
   </VCard>
 </template>
 
-<style>
+<style scoped>
 /* stylelint-disable selector-class-pattern */
 .v-data-table .v-table__wrapper > table tbody > tr:nth-child(even) > td,
-.v-data-table .v-table__wrapper > table > thead > tr th {
+:deep(.v-data-table .v-table__wrapper > table > thead > tr th) {
   background: #F3F4F6;
 }
+
+h1 {
+  font-size: 1.25rem;
+  font-weight: 400;
+  gap: 8px;
+  letter-spacing: 0;
+  line-height: 1.75rem;
+}
 </style>

locales/en-GB.ts

@@ -138,7 +138,7 @@ export default defineI18nLocale(() => {
       details: 'Details',
       downloadCsv: 'Download in CSV',
       downloadGeojson: 'Download in GeoJSON',
-      search: 'Search into the list',
+      filter: 'Filter into the list',
       showOnMap: 'Show on Map',
     },
     categorySelector: {

locales/es-ES.ts

@@ -138,7 +138,7 @@ export default defineI18nLocale(() => {
       details: 'Detalles',
       downloadCsv: 'Descargar como CSV',
       downloadGeojson: 'Descargar como GeoJSON',
-      search: 'Buscar en la lista',
+      filter: 'Filtrar en la lista',
       showOnMap: 'Mostrar en el mapa',
     },
     categorySelector: {

locales/fr-FR.ts

@@ -139,7 +139,7 @@ export default defineI18nLocale(() => {
       details: 'Détails',
       downloadCsv: 'Télécharger en CSV',
       downloadGeojson: 'Télécharger en GeoJSON',
-      search: 'Recherchez dans la liste',
+      filter: 'Filtrer dans la liste',
       showOnMap: 'Afficher sur la carte',
     },
     categorySelector: {

plugins/vuetify.ts

@@ -1,11 +1,17 @@
 import { createVuetify } from 'vuetify'
 import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
+import { en, es, fr } from 'vuetify/locale'
 import 'vuetify/styles'
 
 import { defineNuxtPlugin } from '#app/nuxt'
 
 export default defineNuxtPlugin((nuxtApp) => {
   const vuetify = createVuetify({
+    locale: {
+      locale: 'en',
+      fallback: 'en',
+      messages: { en, es, fr },
+    },
     icons: {
       defaultSet: 'mdi',
       aliases,