From 431429b1edd75def4be8dc45a44d104dca8301d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Munsch?= <jeremy.munsch@ldc.fr>
Date: Fri, 12 Jan 2024 18:06:16 +0100
Subject: [PATCH] Overhaul ranges.show OK

---
 assets/scss/_variables.scss     |  2 +
 assets/scss/layout.scss         | 10 +++-
 components/NavigationMenu.vue   | 19 +++++++-
 components/ToastContainer.vue   | 14 ++++--
 components/layout/AppFooter.vue | 11 +++--
 components/layout/AppHeader.vue | 83 +++++++++++++++++++++++----------
 pages/brands/[slug].vue         | 15 +++---
 pages/index.vue                 |  2 -
 pages/ranges/[slug].vue         | 44 ++++++++++++++---
 9 files changed, 148 insertions(+), 52 deletions(-)

diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
index e29feb5..87b53be 100644
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@@ -17,3 +17,5 @@ $font-default-family-base: system-ui, -apple-system, "Segoe UI", "Roboto",
 $font-default-size-base: 1.4rem; // Assumes the browser default, typically `16px`
 $line-default-height-base: 1.5;
 
+// * TOAST
+$toast-max-width: 950px;
diff --git a/assets/scss/layout.scss b/assets/scss/layout.scss
index e982431..3e1cea8 100644
--- a/assets/scss/layout.scss
+++ b/assets/scss/layout.scss
@@ -1,9 +1,13 @@
 body {
-    @include font-size(2rem);
+    @include font-size(1rem);
 
     min-height: 100vh;
     background-color: unset;
 
+    @include media-breakpoint-up(lg) {
+        @include font-size(2rem);
+    }
+
     @include media-breakpoint-up(xxl) {
         @include font-size(3rem);
     }
@@ -22,7 +26,9 @@ body {
         > footer {
             box-shadow: 0 -0.125rem 0.25rem rgb(0 0 0 / 7.5%) !important;
 
-            @include font-size(2rem);
+            @include media-breakpoint-up(lg) {
+                @include font-size(2rem);
+            }
 
             @include media-breakpoint-up(xxl) {
                 @include font-size(2.5rem);
diff --git a/components/NavigationMenu.vue b/components/NavigationMenu.vue
index 7615955..25092d6 100644
--- a/components/NavigationMenu.vue
+++ b/components/NavigationMenu.vue
@@ -94,11 +94,26 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
 @import "bootstrap/scss/vendor/rfs";
 .arrow > button {
-  @include rfs(1.5em, font-size);
+  @include media-breakpoint-up(md) {
+    @include rfs(1.5rem, font-size);
+  }
+  @include media-breakpoint-up(xxl) {
+    @include rfs(4rem, font-size);
+  }
 }
 .home > button {
-  @include rfs(2em, font-size);
+  @include media-breakpoint-up(md) {
+    @include rfs(2rem, font-size);
+  }
+  @include media-breakpoint-up(xxl) {
+    @include rfs(4rem, font-size);
+  }
 }
 </style>
diff --git a/components/ToastContainer.vue b/components/ToastContainer.vue
index 5ed6510..d30dd0f 100644
--- a/components/ToastContainer.vue
+++ b/components/ToastContainer.vue
@@ -1,9 +1,10 @@
 <template>
-  <div class="position-fixed bottom-0 end-0 p-5 z-1">
+  <div>
     <div
       ref="toastMessage"
       :class="{
-        'toast': true,
+        'position-fixed bottom-0 end-0 me-4 mb-5 p-3': true,
+        'toast fade hide': true,
         'd-flex': !title,
         'text-bg-body': type === ToastType.default,
         'text-bg-success': type === ToastType.success,
@@ -84,10 +85,13 @@ export default defineComponent({
 @import "bootstrap/scss/mixins";
 
 .toast {
-  @include rfs(2rem, font-size);
+  @include font-size(1rem);
 
+  @include media-breakpoint-up(md) {
+    @include font-size(2rem);
+  }
   @include media-breakpoint-up(xxl) {
-        @include font-size(3rem);
-    }
+      @include font-size(3rem);
+  }
 }
 </style>
diff --git a/components/layout/AppFooter.vue b/components/layout/AppFooter.vue
index 263c01b..3d803e4 100644
--- a/components/layout/AppFooter.vue
+++ b/components/layout/AppFooter.vue
@@ -7,21 +7,22 @@
   >
     <div v-if="route.name !== 'index'" class="row">
       <div class="col-12 col-md-4 d-flex justify-content-center align-items-center">
-        <span class="fw-bold">Découvrez nos autres marques</span>
+        <span class="fw-bold d-block px-5">Découvrez nos autres marques</span>
       </div>
       <div class="col col-md-8">
         <Swiper
+          class="z-0"
           :scrollbar="{
             hide: true,
           }"
           :modules="modules"
           :space-between="30"
           :breakpoints="{
-            '640': {
+            '300': {
               slidesPerView: 2,
               spaceBetween: 20,
             },
-            '768': {
+            '560': {
               slidesPerView: 4,
               spaceBetween: 40,
             },
@@ -40,6 +41,7 @@
                 :src="`/data/${brand.picture}`"
                 :alt="`Marque ${brand.name}`"
                 :title="`Le logo de la marque ${brand.name}`"
+                data-bs-toggle="tooltip"
               >
             </NuxtLink>
           </SwiperSlide>
@@ -65,6 +67,7 @@ import { defineComponent } from "vue";
 import { useRoute, type RouteLocationNormalizedLoaded } from "vue-router";
 import type { appInfo } from "~/electron/main";
 import { useAppStore } from "~/stores/useAppStore";
+import bsTooltips from "~/vueModules/bsTooltips";
 
 export default defineComponent({
   name: "AppFooter",
@@ -102,8 +105,8 @@ export default defineComponent({
     },
   },
   mounted() {
+    bsTooltips.methods.initTooltips();
     window.ipcRendererObject.getAppInfo().then((appInfo) => {this.appInfo = appInfo;});
-    // window.ipcRendererObject.getJsonData().then((appData) => { this.brands = [...appData.items]; });
     this.brands = useAppStore().data.brands();
     this.activeBrand = useAppStore().activeBrand;
   },
diff --git a/components/layout/AppHeader.vue b/components/layout/AppHeader.vue
index fa2b302..cc94e43 100644
--- a/components/layout/AppHeader.vue
+++ b/components/layout/AppHeader.vue
@@ -2,7 +2,7 @@
 <template>
   <nav
     id="top-navbar"
-    class="navbar navbar-expand-lg"
+    class="navbar navbar-expand-lg position-relative"
     :style="`background-color: ${activeBrand?.color} !important`"
   >
     <div class="container-fluid">
@@ -10,25 +10,30 @@
       <div
         v-if="activeBrand"
         :class="{
-          'navbar-brand d-flex flex-row flex-grow-1 justify-content-between align-items-center': true,
+          'd-flex flex-row flex-grow-1 justify-content-center align-items-center': true,
           'mx-auto': !activeRange,
         }"
       >
         <NuxtLink
           :to="`/brands/${activeBrand.slug}`"
-          class="d-inline-block"
+          :class="{
+            'd-inline-block py-3 px-2 text-center': true,
+            'flex-grow-1': !activeRange
+          }"
           data-bs-toggle="tooltip"
           :title="`Voir les gammes de la marque ${activeBrand.name}`"
         >
-          <img class="img-fluid" :src="`/data/${activeBrand.picture}`" :alt="`Marque ${activeBrand.name}`" :title="`Le logo de la marque ${activeBrand.name}`">
+          <img class="img-fluid main-logo" :src="`/data/${activeBrand.picture}`" :alt="`Marque ${activeBrand.name}`" :title="`Le logo de la marque ${activeBrand.name}`">
         </NuxtLink>
-        <span v-if="activeRange" class="fs-1 d-block text-center flex-grow-1">{{ activeRange.name }}</span>
+        <div v-if="activeRange" class="flex-grow-1">
+          <span class="title ps-md-5 d-block">{{ activeRange.name }}</span>
+        </div>
       </div>
       <!-- HOME (PAS DE MARQUE) -->
       <div v-else class="navbar-brand mx-auto">
         <NuxtLink
           to="/"
-          class="d-inline-block"
+          class="btn btn-link"
           data-bs-toggle="tooltip"
           :title="settings.title"
         >
@@ -48,23 +53,19 @@
         <span class="navbar-toggler-icon" />
       </button>
 
-      <div class="navbar-collapse collapse flex-grow-0">
-        <ul class="navbar-nav ms-auto">
-          <li
+      <div id="navbar-menu" class="lang-bar navbar-collapse collapse flex-grow-0">
+        <div class="btn-group text-bg-light me-4 z-1">
+          <button
             v-for="(locale,localeIndex) of locales"
             :key="localeIndex"
-            class="nav-item"
+            class="btn btn-link px-2 shadow"
+            :title="locale.label"
+            data-bs-toggle="tooltip"
+            @click.prevent="switchLocale(locale.iso)"
           >
-            <button
-              class="btn btn-link"
-              :title="locale.label"
-              data-bs-toggle="tooltip"
-              @click.prevent="switchLocale(locale.iso)"
-            >
-              <span :class="`fi fi-${locale.iso}`" />
-            </button>
-          </li>
-        </ul>
+            <span :class="`fi fi-${locale.iso}`" />
+          </button>
+        </div>
       </div>
     </div>
   </nav>
@@ -123,9 +124,9 @@ export default defineComponent({
     },
   },
   mounted() {
+    bsTooltips.methods.initTooltips();
     this.settings = useAppStore().data.settings();
     this.activeBrand = useAppStore().activeBrand;
-    bsTooltips.methods.initTooltips();
   },
   methods: {
     switchLocale(locale:string) {
@@ -140,15 +141,49 @@ export default defineComponent({
 </style>
 
 <style lang="scss" scoped>
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
 @import "bootstrap/scss/vendor/rfs";
 #top-navbar {
+  .title {
+    @include rfs(2rem, font-size);
+
+    @include media-breakpoint-up(md) {
+      @include rfs(3rem, font-size);
+    }
+    @include media-breakpoint-up(xxl) {
+      @include rfs(5rem, font-size);
+    }
+  }
+
   .main-logo {
-    @include rfs(30rem, max-height);
+    @include rfs(7rem, max-height);
     height: 20vh;
+    @include media-breakpoint-up(md) {
+      @include rfs(15rem, max-height);
+    }
+    @include media-breakpoint-up(xxl) {
+      @include rfs(30rem, max-height);
+    }
   }
   .fi {
-    @include rfs(8rem, line-height);
-    @include rfs(10rem, width);
+    @include media-breakpoint-up(md) {
+      @include rfs(2em, line-height);
+      @include rfs(4em, width);
+    }
+    @include media-breakpoint-up(xxl) {
+      @include rfs(3em, line-height);
+      @include rfs(5em, width);
+    }
+  }
+
+  .lang-bar {
+    position: absolute;
+    right: 0;
+    bottom: -1rem;
   }
 }
 </style>
diff --git a/pages/brands/[slug].vue b/pages/brands/[slug].vue
index 0e3eabd..f3efdd9 100644
--- a/pages/brands/[slug].vue
+++ b/pages/brands/[slug].vue
@@ -3,18 +3,19 @@
     <div class="container">
       <div v-if="brand.ranges" class="row">
         <div v-for="(range, rangeIndex) of brand.ranges" :key="rangeIndex" class="col-12 col-md-6">
-          <NuxtLink
-            :to="`/ranges/${range.slug}`"
-            class="d-inline-block"
-            data-bs-toggle="tooltip"
+          <button
+            :class="{
+              'd-inline-block btn position-relative': true,
+            }"
             :title="`Voir les produits de la gamme ${range.name}`"
-            @click.prevent="gotoRange(range)"
+            data-bs-toggle="tooltip"
+            @click.stop="gotoRange(range)"
           >
             <div>
               <img class="img-fluid" :src="`/data/${range.picture}`" :alt="`Gamme ${range.name}`">
             </div>
             <span class="fs-2 fw-bold">{{ range.name }}</span>
-          </NuxtLink>
+          </button>
         </div>
       </div>
       <div v-else class="row">
@@ -32,6 +33,7 @@ import { useRoute, type RouteLocationNormalizedLoaded } from "vue-router";
 import type AppState from "~/classes/AppState";
 import Toast, { ToastTypeEnum } from "~/classes/Toast";
 import { useAppStore } from "~/stores/useAppStore";
+import bsTooltips from "~/vueModules/bsTooltips";
 
 export default defineComponent({
   name: "BrandShow",
@@ -47,6 +49,7 @@ export default defineComponent({
     };
   },
   mounted() {
+    bsTooltips.methods.initTooltips();
     this.appState = useAppStore().data;
 
     const brand = useAppStore().activeBrand;
diff --git a/pages/index.vue b/pages/index.vue
index 8bd7fd1..40ca037 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -34,7 +34,6 @@
 </template>
 
 <script lang="ts">
-import log from "electron-log";
 import { defineComponent } from "vue";
 import type AppState from "~/classes/AppState";
 import { useAppStore } from "~/stores/useAppStore";
@@ -50,7 +49,6 @@ export default defineComponent({
     };
   },
   mounted() {
-    log.info("index page");
     bsTooltips.methods.initTooltips();
     this.appState = useAppStore().data;
   },
diff --git a/pages/ranges/[slug].vue b/pages/ranges/[slug].vue
index c3af96a..3975ac3 100644
--- a/pages/ranges/[slug].vue
+++ b/pages/ranges/[slug].vue
@@ -47,7 +47,7 @@
                 <Transition>
                   <div v-if="activeProduct?.id === product.id" class="col pt-5">
                     <div class="text-end" />
-                    <div v-sane-html="product.description" class="p-3 my-5 description" />
+                    <div v-sane-html="product.description" class="p-md-3 my-md-5 description" />
                   </div>
                 </Transition>
               </div>
@@ -55,7 +55,7 @@
                 :class="{
                   'fw-bold title d-block': true,
                   'fs-2': activeProduct?.id !== product.id,
-                  'fs-1 mt-5': activeProduct?.id === product.id,
+                  'fs-1 mt-2 mt-md-5': activeProduct?.id === product.id,
                 }"
               >{{ product.name }}</span>
             </button>
@@ -81,6 +81,7 @@ import type { DirectiveBinding } from "vue";
 import { defineComponent } from "vue";
 import { useRoute, type RouteLocationNormalizedLoaded } from "vue-router";
 import Toast, { ToastTypeEnum } from "~/classes/Toast";
+import bsTooltips from "~/vueModules/bsTooltips";
 
 const saneHtml = {
   mounted: (el: HTMLElement, binding: DirectiveBinding) => {
@@ -107,6 +108,7 @@ export default defineComponent({
     };
   },
   mounted() {
+    bsTooltips.methods.initTooltips();
     const range = useAppStore().activeRange;
     if(!range) {
       Toast.toast("range", ToastTypeEnum.error, "Une erreur est survenue");
@@ -131,15 +133,36 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
 @import "bootstrap/scss/vendor/rfs";
 
 .product {
   transition: all 0.2s ease-out allow-discrete;
-  @include rfs(12rem, padding-top);
-  @include rfs(12rem, padding-bottom);
+  @include rfs(1.5rem, padding-top);
+  @include rfs(1.5rem, padding-bottom);
+
+  @include media-breakpoint-up(md) {
+    @include rfs(6rem, padding-top);
+    @include rfs(6rem, padding-bottom);
+  }
+  @include media-breakpoint-up(xxl) {
+    @include rfs(12rem, padding-top);
+    @include rfs(12rem, padding-bottom);
+  }
 
   > button {
-    @include rfs(6rem, padding-bottom);
+    @include rfs(1.5rem, padding-bottom);
+
+    @include media-breakpoint-up(md) {
+      @include rfs(3rem, padding-bottom);
+    }
+    @include media-breakpoint-up(xxl) {
+      @include rfs(6rem, padding-bottom);
+    }
   }
 }
 .product.col-md-6 {
@@ -152,10 +175,17 @@ export default defineComponent({
   }
 }
 .btn-close {
-  @include rfs(2em, font-size);
+  @include media-breakpoint-up(md) {
+    @include rfs(1.5em, padding-bottom);
+  }
+  @include media-breakpoint-up(xxl) {
+    @include rfs(2em, padding-bottom);
+  }
 }
 .description {
-  @include rfs(1.35em, font-size);
+  @include media-breakpoint-up(xxl) {
+    @include rfs(1.35em, padding-bottom);
+  }
 }
 
 .v-enter-active,