modifs backoffice : contenu page 'gouvernance' passe sur la page 'contact' / rework du st

ore 'content'

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

@@ -6,8 +6,8 @@
         <div v-if="!loading && (
           contentType === 'etape'
           || contentType === 'static'
-          || contentType === 'equipe'
-          || contentType === 'partenaires'
+          || contentType === 'gouvernance'
+          || contentType === 'partenaire'
         )">
             <div class="content-wrapper">
                 <ModaleHeader
@@ -44,10 +44,11 @@
                             :partie="partie" />
                     </div>
                     <EquipeContent
-                        v-if="contentType === 'equipe'"
-                        :content="content" />
+                        v-if="contentType === 'gouvernance'"
+                        :content="content"
+                        :couleur="content.couleur || brandColor" />
                     <PartenairesContent
-                        v-if="contentType === 'partenaires'"
+                        v-if="contentType === 'partenaire'"
                         :content="content" />
                 </main>
                 <ModaleFooter

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

@@ -1,12 +1,24 @@
 <template>
   <div id="equipe">
-    <div v-html="content.textIntro"></div>
-    <div v-for="personne in content.personnes" class="personne">
-      <figure>
-        <img :src="personne.portrait_url" :alt="personne.portrait_alt">
-      </figure>
-      <div class="name"><p v-html="personne.prenom + ' ' + personne.nom"></p></div>
-      <div class="description"><p v-html="personne.description"></p></div>
+    <div v-if="content.intro" class="intro">
+      <p v-html="content.intro"></p>
+    </div>
+    <div v-for="equipe in content.gouvernances" class="equipe-item">
+      <div class="partie-title">
+        <h3>
+          <p 
+          :style="{ background: `linear-gradient(transparent 70%, ${couleur} 70%)` }">
+            {{ equipe.title }}
+          </p>
+        </h3>
+      </div>
+      <div v-for="personne in equipe.personnes" class="personne">
+        <figure>
+          <img :src="personne.photo_url" :alt="personne.photo_alt">
+        </figure>
+        <div class="name"><p v-html="personne.prenom + ' ' + personne.nom"></p></div>
+        <div class="description"><p v-html="personne.description" style="white-space: pre-wrap;"></p></div>
+      </div>
     </div>
   </div>
 </template>
@@ -14,5 +26,6 @@
 <script setup>
 const props = defineProps({
   content: Object,
+  couleur: String,
 });
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-    <header :style="content.vignette ? '' : { marginTop: '20vh' }">
+    <header :class="{ 'not-etape': contentType !== 'etape' }">
         <div class="cover">
             <img v-if="content.vignette" :src="content.vignette.url" :alt="content.vignette.alt">
         </div>
@@ -12,7 +12,7 @@
                 <div class="pattern"></div>
             </div>
             <div class="locality">
-                <div class="top-triangle"></div>
+                <div class="top-triangle" v-if="contentType === 'etape'"></div>
                 <div class="locality-title">
                     <h1>{{content.contentTitle}} <em v-if="content.adresse">({{ content.adresse.postal_code.slice(0, 2) }})</em></h1>
                 </div>

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

@@ -1,8 +1,13 @@
 <template>
   <div id="partenaires">
+    <div v-if="content.intro" class="intro">
+      <p v-html="content.intro"></p>
+    </div>
     <div v-for="partenaire in content.partenaires" class="partenaire">
       <figure>
-        <img :src="partenaire.logo_url" :alt="partenaire.logo_alt">
+        <a :href="partenaire.link_url" target="_blank">
+          <img :src="partenaire.logo_url" :alt="partenaire.logo_alt">
+        </a>
       </figure>
       <div class="title"><p v-html="partenaire.title"></p></div>
       <div class="description"><p v-html="partenaire.description"></p></div>