modale responsive

web/themes/custom/caravane/assets/js/stores/layout.js

@@ -14,5 +14,23 @@ export const useLayoutStore = defineStore('layout', {
             })
             this.isEtapeListRetracted = this.isDesktop ? false : true;
         },
+        collapseEtapeListe(listeEtape) {
+            listeEtape.classList.add('retracted');
+            setTimeout(() => {
+                listeEtape.closest('.layout__region').classList.add('retracted');
+                listeEtape.nextElementSibling.classList.add('retracted');
+                listeEtape.classList.add('disapeared');
+            }, 300);
+            this.isEtapeListRetracted = true;
+        },
+        expandEtapeListe(listeEtape) {
+            listeEtape.closest('.layout__region').classList.remove('retracted');
+            listeEtape.nextElementSibling.classList.remove('retracted');
+            listeEtape.classList.remove('disapeared');
+            setTimeout(() => {
+                listeEtape.classList.remove('retracted');
+            }, 300);
+            this.isEtapeListRetracted = false;
+        },
     },
 })

web/themes/custom/caravane/assets/js/stores/mapState.js

@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia';
+import { useLayoutStore } from './layout';
 
 export const useMapStore = defineStore('mapState', {
     state: () => ({
@@ -12,6 +13,7 @@ export const useMapStore = defineStore('mapState', {
     }),
     actions: {
         zoomToPlace(lat, long) {
+            if (useLayoutStore().isDesktop) long = long - 0.03;
             this.map.flyTo([lat, long], this.maxZoom, { duration: this.duration });
             this.currentZoom = this.maxZoom;            
         },

web/themes/custom/caravane/assets/js/utils/handle-navigation.js

@@ -1,4 +1,5 @@
 import { setActiveNavItem } from "./set-active-nav-item";
+import { useLayoutStore } from '../stores/layout';
 
 export async function initFirstLoadRouting(store, router, baseUrl, siteName) {
     const decoupled_origin = JSON.parse(window.localStorage.getItem('decoupled_origin'));
@@ -31,6 +32,9 @@ export function handleClickableElements(clickableElements, store, router, baseUr
                     document.title = store.pageTitle;                
                 }
                 setActiveNavItem(store.contentType, href);
+
+                const listeEtape = document.querySelector('#etapes-liste');
+                if (!useLayoutStore().isDesktop) useLayoutStore().collapseEtapeListe(listeEtape);
             }
         }
     }

web/themes/custom/caravane/assets/js/utils/layout-setup.js

@@ -9,44 +9,27 @@ export function handleReactiveness() {
 
     const listeEtape = document.querySelector('#etapes-liste');
 
-    if (!layoutStore.isDesktop) collapseEtapeListe(listeEtape, layoutStore);
+    if (!layoutStore.isDesktop) layoutStore.collapseEtapeListe(listeEtape, layoutStore);
 
     window.addEventListener('resize', () => {
       if (layoutStore.isDesktop && layoutStore.isEtapeListRetracted) {
-        expandEtapeListe(listeEtape, layoutStore);
+        layoutStore.expandEtapeListe(listeEtape, layoutStore);
       } else if (!layoutStore.isDesktop && !layoutStore.isEtapeListRetracted) {
-        collapseEtapeListe(listeEtape, layoutStore);
+        layoutStore.collapseEtapeListe(listeEtape, layoutStore);
       }
     });
 
     listeToggleButton.addEventListener('click', () => {  
       if (!layoutStore.isDesktop) {
         if (!layoutStore.isEtapeListRetracted) {
-          collapseEtapeListe(listeEtape, layoutStore);
+          layoutStore.collapseEtapeListe(listeEtape, layoutStore);
         } else {
-          expandEtapeListe(listeEtape, layoutStore);
+          layoutStore.expandEtapeListe(listeEtape, layoutStore);
         }
       }  
     });
   })();
-
-  function collapseEtapeListe(listeEtape, layoutStore) {
-    listeEtape.classList.add('retracted');
-    setTimeout(() => {
-      listeEtape.closest('.layout__region').classList.add('retracted');
-      listeEtape.nextElementSibling.classList.add('retracted');
-    }, 300);
-    layoutStore.isEtapeListRetracted = true;
-  }
-
-  function expandEtapeListe(listeEtape, layoutStore) {
-    listeEtape.closest('.layout__region').classList.remove('retracted');
-    listeEtape.nextElementSibling.classList.remove('retracted');
-    setTimeout(() => {
-      listeEtape.classList.remove('retracted');
-    }, 300);
-    layoutStore.isEtapeListRetracted = false;
-  }
+ 
 }
 
 export function setMenuToggle() {

web/themes/custom/caravane/assets/js/vuejs/Modale.vue

@@ -52,6 +52,7 @@ import { computed, watch, onMounted } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useContentStore } from '../stores/content';
 import { useMapStore } from '../stores/mapState';
+import { useLayoutStore } from '../stores/layout';
 
 import ModaleHeader from './components/ModaleHeader.vue';
 import ModaleFooter from './components/ModaleFooter.vue';
@@ -66,6 +67,12 @@ import ModaleVideos from './components/parties/ModaleVideos.vue';
 
 const store = useContentStore();
 const mapState = useMapStore();
+const layoutStore = useLayoutStore();
+
+// pour importer le breakpoint
+// const { minDesktopWidth } = storeToRefs(layoutStore);
+// console.log(minDesktopWidth);
+
 
 const {
     contentType,

web/themes/custom/caravane/assets/js/vuejs/components/ModaleHeader.vue

@@ -7,13 +7,15 @@
             <p>Étape n°{{content.etape_number}}</p>
             <p>Du {{content.dates.start.d}} {{content.dates.start.m}} au {{ content.dates.end.d }} {{ content.dates.end.m }} {{ content.dates.end.y }}</p>
         </div>
-        <div class="brand-pattern" :style="{ backgroundColor: couleur }">
-            <div class="pattern"></div>
-        </div>
-        <div class="locality">
-            <div class="top-triangle"></div>
-            <div class="locality-title">
-                <h1>{{content.contentTitle}} <em v-if="content.adresse">({{ content.adresse.postal_code.slice(0, 2) }})</em></h1>
+        <div class="locality-wrapper">
+            <div class="brand-pattern" :style="{ backgroundColor: couleur }">
+                <div class="pattern"></div>
+            </div>
+            <div class="locality">
+                <div class="top-triangle"></div>
+                <div class="locality-title">
+                    <h1>{{content.contentTitle}} <em v-if="content.adresse">({{ content.adresse.postal_code.slice(0, 2) }})</em></h1>
+                </div>
             </div>
         </div>
     </header>

web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleEntretien.vue

@@ -29,57 +29,15 @@ const props = defineProps({
 });
 </script>
 
-<style lang="scss" scoped>
-.personne {
-    display: flex;
-    align-items: center;
-    margin: 2rem 0;
-    &:first-of-type {
-        margin-top: 1rem;
-    }
-    > figure {
-        width: 6rem;
-        height: 6rem;
-        margin: 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        overflow: hidden;
-        border-radius: 3rem;
-        > img {
-            object-fit: cover;
-            width: 100%;
-            height: 100%;
-        }
-    }
-    > .description {
-        width: calc(100% - 6rem);
-        > p {
-            margin: 0;
-            padding-left: 2rem;
-        }
-    }
-}
+<style lang="scss" scoped>                  
 .questions-reponses {
-    margin-top: 3rem;
     > div {
         > .question {
-            font-weight: bold;
-            position: relative;
-            padding-left: 1.8rem;
-            margin-top: 2rem;
-            margin-bottom: 1rem;
             &::before {
-                position: absolute;
-                content: "";
-                display: block;
-                height: 100%;
-                width: 0.8rem;
-                left: 0;
                 background-color: var(--couleur);
-                margin-right: 1rem;
             }
         }
     }
-}
+  }
+
 </style>