From 7387ce7f50dc13bbda7d0a205f50b67f24eb9652 Mon Sep 17 00:00:00 2001
From: Valentin Le Moign <valentin_le_moign@figureslibres.io>
Date: Wed, 2 Apr 2025 01:06:39 +0200
Subject: [PATCH] EXPORT CONFIG ! fin du centre de ressource

---
 config/sync/caravane.settings.yml             |  10 ++
 config/sync/system.theme.global.yml           |   2 +-
 web/themes/custom/caravane/assets/js/main.js  |   4 +-
 .../custom/caravane/assets/js/stores/map.js   |  10 +-
 .../caravane/assets/js/vuejs/Modale.vue       |  47 +++++--
 .../js/vuejs/components/CentreDeRessource.vue |  23 ----
 .../js/vuejs/components/RessourceCard.vue     |   3 +-
 .../components/parties/ModaleDocument.vue     |  38 ------
 .../custom/caravane/assets/scss/main.scss     | 115 ++++++++++++++++--
 9 files changed, 155 insertions(+), 97 deletions(-)
 create mode 100644 config/sync/caravane.settings.yml

diff --git a/config/sync/caravane.settings.yml b/config/sync/caravane.settings.yml
new file mode 100644
index 0000000..ee782a8
--- /dev/null
+++ b/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: ''
diff --git a/config/sync/system.theme.global.yml b/config/sync/system.theme.global.yml
index 067532c..542f8dc 100644
--- a/config/sync/system.theme.global.yml
+++ b/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
diff --git a/web/themes/custom/caravane/assets/js/main.js b/web/themes/custom/caravane/assets/js/main.js
index 5d6f912..85d7a97 100644
--- a/web/themes/custom/caravane/assets/js/main.js
+++ b/web/themes/custom/caravane/assets/js/main.js
@@ -12,9 +12,7 @@ import '../scss/main.scss'
 
 (function ($, Drupal, drupalSettings) {
     const CaravaneTheme = function () {
-        function init () {
-            console.log('CI/CD FONCTIONNE !');
-            
+        function init () {            
             // console.log('DrupalSettings', drupalSettings);
             
             const baseUrl = window.location.protocol + "//" + window.location.host;
diff --git a/web/themes/custom/caravane/assets/js/stores/map.js b/web/themes/custom/caravane/assets/js/stores/map.js
index fb6b6be..a53bf8f 100644
--- a/web/themes/custom/caravane/assets/js/stores/map.js
+++ b/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() {
-            setTimeout(() => {
-                this.map.options.minZoom = this.currentZoom;
-                this.map.options.maxZoom = this.currentZoom;
-            }, this.animationDuration * 1000 + 100);
+        lockMap() {          
             this.map.dragging.disable();
             this.map.touchZoom.disable();
             this.map.doubleClickZoom.disable();
diff --git a/web/themes/custom/caravane/assets/js/vuejs/Modale.vue b/web/themes/custom/caravane/assets/js/vuejs/Modale.vue
index 781aa2d..eaabde8 100644
--- a/web/themes/custom/caravane/assets/js/vuejs/Modale.vue
+++ b/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');
-  isModaleEtape = contentType.value === 'etape';
-  wasModaleEtape = isModaleEtape;
-  handleColorChange();
-  handleMapMovement();
+  nextTick(() => {
+    isModaleEtape = contentType.value === 'etape';
+    wasModaleEtape = isModaleEtape;
+    handleColorChange();
+    handleMapMovement();
+  });
 });
 </script>
 
diff --git a/web/themes/custom/caravane/assets/js/vuejs/components/CentreDeRessource.vue b/web/themes/custom/caravane/assets/js/vuejs/components/CentreDeRessource.vue
index 7d02f9a..bf24421 100644
--- a/web/themes/custom/caravane/assets/js/vuejs/components/CentreDeRessource.vue
+++ b/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>
\ No newline at end of file
diff --git a/web/themes/custom/caravane/assets/js/vuejs/components/RessourceCard.vue b/web/themes/custom/caravane/assets/js/vuejs/components/RessourceCard.vue
index 1b20666..a1071cf 100644
--- a/web/themes/custom/caravane/assets/js/vuejs/components/RessourceCard.vue
+++ b/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);
 }
 
diff --git a/web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleDocument.vue b/web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleDocument.vue
index b43f73e..fb52e37 100644
--- a/web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleDocument.vue
+++ b/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>
\ No newline at end of file
diff --git a/web/themes/custom/caravane/assets/scss/main.scss b/web/themes/custom/caravane/assets/scss/main.scss
index a6d7c0a..ea42178 100644
--- a/web/themes/custom/caravane/assets/scss/main.scss
+++ b/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 {
-                      display: inline-block;
-                      padding: 0.5rem 1rem;
-                      padding-left: calc($modale-x-padding / 2);
-                      font-size: $sm-font-size-mobile;
-                      @media screen and (min-width: $desktop-min-width) {
-                        font-size: $sm-font-size-desktop;
+                    > div:has(.related-etape-label) {
+                      z-index: 1;
+                      position: relative;
+                      .related-etape-label {
+                        display: inline-block;
+                        padding: 0.5rem 1rem;
+                        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;