refactor(Breadcrumbs): homogenize display and padding (better) (#1243)

openfoodfacts · Jan 8, 2025 · 9426bc8 · 9426bc8
1 parent 591ddbb
commit 9426bc8
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/src/components/Breadcrumbs.vue b/src/components/Breadcrumbs.vue
@@ -1,7 +1,12 @@
 <template>
-  <v-breadcrumbs v-if="breadcrumbs" class="text-h6 pa-0" density="compact" :items="breadcrumbs">
-    <template #title="{ item }">
-      {{ $t(`Router.${item.title}.Title`) }}
+  <v-breadcrumbs v-if="breadcrumbs" class="text-h6 px-0 pt-0 pb-4" density="compact" :items="breadcrumbs">
+    <template #item="{ item }">
+      <v-breadcrumbs-item
+        class="pa-0"
+        :title="$t(`Router.${item.title}.Title`)"
+        :to="item.to"
+        :disabled="item.disabled"
+      />
     </template>
   </v-breadcrumbs>
 </template>
@@ -10,7 +15,7 @@
 export default {
   computed: {
     breadcrumbs() {
-      return this.$route.meta.breadcrumbs;
+      return this.$route.meta.breadcrumbs
     }
   },
 }

diff --git a/src/constants.js b/src/constants.js
@@ -29,6 +29,7 @@ export default {
   APP_URL: import.meta.env.VITE_OPEN_PRICES_APP_URL,
   APP_API_URL: `${import.meta.env.VITE_OPEN_PRICES_APP_URL}/api/docs`,
   APP_USER_AGENT: 'Open Prices Web App',
+  APP_HOME_ICONS: '🏷🍊💲',
   APP_DUMP_PRICES_URL: `${import.meta.env.VITE_OPEN_PRICES_APP_URL}/data/prices.jsonl.gz`,
   APP_DUMP_PROOFS_URL: `${import.meta.env.VITE_OPEN_PRICES_APP_URL}/data/proofs.jsonl.gz`,
   APP_DUMP_LOCATIONS_URL: `${import.meta.env.VITE_OPEN_PRICES_APP_URL}/data/locations.jsonl.gz`,

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -1,10 +1,8 @@
 <template>
-  <h2 class="text-h6">
-    {{ $t('Common.TaglineAlt1') }} 🏷🍊💲
+  <h2 class="text-h6 pb-4">
+    {{ $t('Common.TaglineAlt1') }} {{ APP_HOME_ICONS }}
   </h2>
 
-  <br>
-
   <v-row>
     <v-col cols="6" sm="4" md="3" lg="2">
       <StatCard :value="todayPriceCount" :subtitle="$t('Common.Today')" />
@@ -46,6 +44,7 @@ export default {
   data() {
     return {
       APP_NAME: constants.APP_NAME,
+      APP_HOME_ICONS: constants.APP_HOME_ICONS,
       // data
       latestPriceList: [],
       todayPriceCount: null,