EXPORT CONFIG ! fin du centre de ressource

config/sync/caravane.settings.yml

@@ -0,0 +1,10 @@
+features:
+  node_user_picture: false
+  comment_user_picture: true
+  comment_user_verification: true
+  favicon: 1
+logo:
+  use_default: 1
+favicon:
+  use_default: 0
+  path: ''

config/sync/system.theme.global.yml

@@ -4,7 +4,7 @@ favicon:
   mimetype: image/vnd.microsoft.icon
   path: ''
   url: ''
-  use_default: true
+  use_default: false
 features:
   comment_user_picture: true
   comment_user_verification: true

web/themes/custom/caravane/assets/js/main.js

@@ -12,9 +12,7 @@ import '../scss/main.scss'
 
 (function ($, Drupal, drupalSettings) {
     const CaravaneTheme = function () {
-        function init () {
+        function init () {            
-            console.log('CI/CD FONCTIONNE !');
-            
             // console.log('DrupalSettings', drupalSettings);
             
             const baseUrl = window.location.protocol + "//" + window.location.host;

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

@@ -23,21 +23,15 @@ export const useMapStore = defineStore('mapState', {
               this.maxZoom,
               { animate: this.animationsAreEnabled, duration: this.animationDuration });
             this.currentZoom = this.maxZoom;
-            this.lockMap();
         },
-        resetMap(animate = this.animationsAreEnabled, duration = this.animationDuration) {
+        resetMap(animate = this.animationsAreEnabled, duration = this.animationDuration) {          
             this.map.flyTo(
               this.defaultMapCenter,
               useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile,
               { animate, duration });
             this.currentZoom = useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile;
-            this.unlockMap();
         },
-        lockMap() {
+        lockMap() {          
-            setTimeout(() => {
-                this.map.options.minZoom = this.currentZoom;
-                this.map.options.maxZoom = this.currentZoom;
-            }, this.animationDuration * 1000 + 100);
             this.map.dragging.disable();
             this.map.touchZoom.disable();
             this.map.doubleClickZoom.disable();

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

@@ -62,7 +62,7 @@
                       :content="content"
                       :couleur="brandColor" />
                     <RelatedRessources
-                      v-if="contentType === 'etape' && content.relatedRessources"
+                      v-if="contentType === 'etape' && content.relatedRessources.length"
                       :relatedRessources="content.relatedRessources"
                       :couleur="content.couleur || brandColor" />
                 </main>
@@ -80,7 +80,7 @@
 </template>
 
 <script setup>
-import { watch, onMounted } from 'vue';
+import { watch, onMounted, nextTick } from 'vue';
 
 import { storeToRefs } from 'pinia';
 import { useContentStore } from '../stores/content';
@@ -104,7 +104,6 @@ import ModaleExergue from './components/parties/ModaleExergue.vue';
 import ModaleVideos from './components/parties/ModaleVideos.vue';
 import ModaleGallerie from './components/parties/ModaleGallerie.vue';
 import ModaleDocument from './components/parties/ModaleDocument.vue';
-import { getRelatedRessources } from '../utils/content/contentFetchUtils';
 
 const store = useContentStore();
 const mapState = useMapStore();
@@ -138,8 +137,9 @@ const handleMapMovement = () => {
     () => loading.value,
     () => {
         if (!loading.value) {
-          console.log('loading done');
           isModaleEtape = contentType.value === 'etape';
+          console.log(contentType.value);
+          
 
           // Define helper functions in variables
           const disableModaleTransition = () => {
@@ -158,7 +158,6 @@ const handleMapMovement = () => {
           };
 
           if (animationsAreEnabled.value) {
-
             if (isModaleEtape) {
               if (!wasModaleEtape) {
                 // national -> détail
@@ -181,8 +180,10 @@ const handleMapMovement = () => {
             }
           } else {
             if (isModaleEtape) {
+              // ? -> détail
               zoomToContentPlace();
             } else {
+              // ? -> national
               mapState.resetMap();
             }
             disableModaleTransition();
@@ -196,12 +197,38 @@ const handleMapMovement = () => {
   );
 };
 
+watch(() => contentType.value, () => {
+  if (contentType.value === '') {
+    handleMapLock(false);
+  } else {
+    handleMapLock(true);  
+  }
+});
+
+const handleMapLock = (shoudLock) => {
+  const checkAndExecute = () => {
+    const leafletLayer = document.querySelector('.leaflet-layer');
+    
+    if (leafletLayer) {
+      if (shoudLock) {
+        mapState.lockMap();
+      } else {
+        mapState.unlockMap();
+      }
+    } else {
+      setTimeout(checkAndExecute, 100);
+    }
+  }
+  checkAndExecute();
+}
+
 onMounted(() => {
-  console.log('modale mounted');
+  nextTick(() => {
-  isModaleEtape = contentType.value === 'etape';
+    isModaleEtape = contentType.value === 'etape';
-  wasModaleEtape = isModaleEtape;
+    wasModaleEtape = isModaleEtape;
-  handleColorChange();
+    handleColorChange();
-  handleMapMovement();
+    handleMapMovement();
+  });
 });
 </script>
 

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

@@ -129,27 +129,4 @@ watch(selectedType, async () => {
   opacity: 1;
   transform: translateY(0px);
 }
-
-.filters {
-    margin: 3rem 0;
-    margin-top: 5rem;
-    > .search-bar{
-        margin-right: 2rem;
-        border: solid 1px var(--couleur);
-        padding: 0.5rem 1rem;
-        border-radius: 1rem;
-        font-family: 'Marianne', sans-serif;
-    }
-    > select {
-        appearance: none;
-        border: solid 1px var(--couleur);
-        padding: 0.5rem 1rem;
-        font-family: 'Marianne', sans-serif;
-        border-radius: 1rem;
-        background-color: white;
-        background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='rgba(128, 200, 191)' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat;
-        background-position: calc(100% - 1rem) center !important;
-        padding-right: 2.5rem !important;
-    }
-}
 </style>

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

@@ -14,7 +14,7 @@
 </template>
 
 <script setup>
-import { onMounted, defineExpose } from 'vue';
+import { onMounted } from 'vue';
 import router from '../../router/router';
 import { handleClickableElements } from '../../utils/handle-navigation.js';
 
@@ -35,7 +35,6 @@ onMounted(() => {
 
 const setClickableElements = () => {
     relatedItemCards = document.querySelector(`#ressource-${props.index}`);
-    console.log(relatedItemCards);
     handleClickableElements([relatedItemCards], store, router, baseUrl, siteName, mapStore);
 }
 

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

@@ -47,42 +47,4 @@ const props = defineProps({
         left: 0;
     }
 }
-.document-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: auto auto;
-    column-gap: 2rem;
-    > figure {
-        grid-column: 1 / 2;
-        grid-row: 1 / 3;
-        margin: 0;
-        background-color: var(--couleur);
-        img {
-            padding: 2rem;
-            box-sizing: border-box;
-            width: 100%;
-            height: auto;
-            object-fit: cover;
-            transform: scale(1);
-            transition: transform 0.2s ease-in-out;
-            &:hover {
-                transform: scale(1.02);
-            }
-        }
-    }
-    > .infos {
-        > p {
-            margin: 0;
-            margin-bottom: 0.8rem;
-            &:first-of-type {
-                font-weight: bold;
-            }
-        }
-
-    }
-    > .download {
-        align-self: end;
-        justify-self: end;
-    }
-}
 </style>

web/themes/custom/caravane/assets/scss/main.scss

@@ -768,7 +768,9 @@ body{
                   position: relative;
                   background-color: white;
                   font-size: $labeur-font-size-mobile;
-                  //padding-bottom: $modale-bottom-padding;
+                  &:has(#centre-de-ressource, #ressource-item-header) {
+                    left: 5vw;
+                  }
                   @media screen and (min-width: $desktop-min-width) {
                     font-size: $labeur-font-size-desktop;
                     width: $modale-width-desktop;
@@ -929,7 +931,12 @@ body{
                     padding-bottom: 5vh;
                     box-sizing: border-box;
                     &:has(#ressource-item-header) {
-                      padding-right: 50%;
+                      // padding-right: 50%;
+                      margin-bottom: 3rem;
+                      @media screen and (min-width: $desktop-min-width) {
+                        margin-bottom: 6rem;
+                        padding: 0 calc($modale-x-padding * 4);
+                      }
                     }
                     > .partie,
                     > #equipe {
@@ -1102,10 +1109,14 @@ body{
                           margin-bottom: 2rem;
                         }
                         > .images-grid {
+                          margin-top: 3rem;
                           display: grid;
                           grid-template-columns: 1fr 1fr;
                           column-gap: 5rem;
                           row-gap: 2rem;
+                          @media screen and (min-width: $desktop-min-width) {
+                            grid-template-columns: repeat(3, 1fr);
+                          }
                         }
                         figure {
                           margin: 0;
@@ -1144,6 +1155,47 @@ body{
                             }
                           }
                         }
+                        > .document-grid {
+                          display: grid;
+                          grid-template-columns: 1fr 1fr;
+                          grid-template-rows: auto auto;
+                          column-gap: 2rem;
+                          > figure {
+                              grid-column: 1 / 2;
+                              grid-row: 1 / 3;
+                              margin: 0;
+                              background-color: var(--couleur);
+                              img {
+                                  padding: 0.6rem;
+                                  box-sizing: border-box;
+                                  width: 100%;
+                                  height: auto;
+                                  object-fit: cover;
+                                  transform: scale(1);
+                                  transition: transform 0.2s ease-in-out;
+                                  &:hover {
+                                      transform: scale(1.02);
+                                  }
+                                  @media screen and (min-width: $desktop-min-width) {
+                                    padding: 2rem;
+                                  }
+                              }
+                          }
+                          > .infos {
+                              > p {
+                                  margin: 0;
+                                  margin-bottom: 0.8rem;
+                                  &:first-of-type {
+                                      font-weight: bold;
+                                  }
+                              }
+                      
+                          }
+                          > .download {
+                              align-self: end;
+                              justify-self: end;
+                          }
+                        }
                       }
                     }
                     .caption {
@@ -1228,12 +1280,36 @@ body{
                       }
                     }
                     #centre-de-ressource {
+                        .filters {
+                          margin: 3rem 0;
+                          margin-top: 5rem;
+                          > .search-bar{
+                            margin-right: 2rem;
+                            border: solid 1px var(--couleur);
+                            padding: 0.5rem 1rem;
+                            border-radius: 1rem;
+                            font-size: $sm-font-size-mobile;
+                            font-family: 'Marianne', sans-serif;
+                          }
+                          > select {
+                            appearance: none;
+                            border: solid 1px var(--couleur);
+                            padding: 0.5rem 1rem;
+                            font-size: $sm-font-size-mobile;
+                            font-family: 'Marianne', sans-serif;
+                            border-radius: 1rem;
+                            background-color: white;
+                            background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='rgba(128, 200, 191)' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat;
+                            background-position: calc(100% - 1rem) center !important;
+                            padding-right: 2.5rem !important;
+                          }
+                      }
                       > .intro {
                         font-size: $sm-font-size-mobile;
-                        width: 66%;
                         margin-bottom: 4rem;
                         @media screen and (min-width: $desktop-min-width) {
                           font-size: $sm-font-size-desktop;
+                          width: 66%;
                         }
                       }
                       > .type-section {
@@ -1376,13 +1452,19 @@ body{
                       background-size: 300px;
                       background-size: repeat;
                     }
-                    .related-etape-label {
+                    > div:has(.related-etape-label) {
-                      display: inline-block;
+                      z-index: 1;
-                      padding: 0.5rem 1rem;
+                      position: relative;
-                      padding-left: calc($modale-x-padding / 2);
+                      .related-etape-label {
-                      font-size: $sm-font-size-mobile;
+                        display: inline-block;
-                      @media screen and (min-width: $desktop-min-width) {
+                        padding: 0.5rem 1rem;
-                        font-size: $sm-font-size-desktop;
+                        padding-left: calc($modale-x-padding / 2);
+                        font-size: $sm-font-size-mobile;
+                        margin-bottom: 1.5rem;
+                        @media screen and (min-width: $desktop-min-width) {
+                          margin-bottom: 0;
+                          font-size: $sm-font-size-desktop;
+                        }
                       }
                     }
                     .related-etape-links {
@@ -1489,17 +1571,26 @@ body{
               .ressource-list > div:not(.ressource-item),
               .ressource-list.sm-ressource-list {
                 display: grid;
-                grid-template-columns: repeat(4, 1fr);
+                grid-template-columns: 1fr;
                 align-items: start;
                 gap: 2rem;
                 margin-bottom: 2.5rem;
+                @media screen and (min-width: $tablet-min-width) {
+                  grid-template-columns: repeat(2, 1fr);
+                }
+                @media screen and (min-width: $desktop-min-width) {
+                  grid-template-columns: repeat(4, 1fr);
+                }
                 &.sm-ressource-list {
                   margin-top: 2rem;
                   grid-template-columns: repeat(2, 1fr);
                 }
                 > .ressource-item > div {
                   display: flex;
-                  gap: 1.5rem;
+                  gap: 0.8rem;
+                  @media screen and (min-width: $desktop-min-width) {
+                    gap: 1.2rem;
+                  }
                   cursor: pointer;
                   transform: scale(1);
                   transition: transform 0.2s ease-in-out;