modale responsive

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>