theme modale etape

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

@@ -8,13 +8,25 @@ export const useContentStore = defineStore('content', {
         title: '',
         adresse: {},
         etape_number: '',
-        dates: {},
+        dates: {
+          start: {
+            d: '',
+            m: '',
+            y: '',
+          },
+          end: {
+            d: '',
+            m: '',
+            y: '',
+          },
+        },
         geofield: {},
         galeries: [],
         parties: [],
         saison: {},
         thematiques: [],
         vignette: {},
+        couleur: '',
       },
       page: {
         title: '', 
@@ -41,7 +53,20 @@ export const useContentStore = defineStore('content', {
               this.etape.title = etape.attributes.title;
               this.etape.adresse = etape.attributes.field_adresse;
               this.etape.etape_number = etape.attributes.field_arret_numero;
-              this.etape.dates = etape.attributes.field_dates;
+              //this.etape.dates = etape.attributes.field_dates;
+              this.etape.dates = {
+                start: {
+                  d: etape.attributes.field_dates.value.split('-')[2],
+                  m: new Intl.DateTimeFormat('fr-FR', { month: 'long' }).format(new Date(etape.attributes.field_dates.value)),
+                  y: etape.attributes.field_dates.value.split('-')[0],
+                 },
+                end: {
+                  d: etape.attributes.field_dates.end_value.split('-')[2],
+                  m: new Intl.DateTimeFormat('fr-FR', { month: 'long' }).format(new Date(etape.attributes.field_dates.end_value)),
+                  y: etape.attributes.field_dates.end_value.split('-')[0],
+
+                 },
+              }
               this.etape.geofield = etape.attributes.field_geofield;
               this.etape.galeries = await this.fetchEtapeContent('field_galleries', etape.relationships);
               const partiesFetch = await this.fetchEtapeContent('field_parties', etape.relationships);
@@ -55,6 +80,7 @@ export const useContentStore = defineStore('content', {
               this.etape.thematiques = await this.fetchEtapeContent('field_thematiques', etape.relationships);
               const vignetteFetch = await this.fetchEtapeContent('field_vignette', etape.relationships);
               this.etape.vignette = { url: vignetteFetch.attributes.uri.url, alt: etape.attributes.field_vignette_alt };
+              this.etape.couleur = etape.attributes.field_couleur;
               this.setActiveItemInMenu();
               break;
             }

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

@@ -2,17 +2,31 @@
   <Transition>
     <div v-if="isEtapeValid">
       <header>
-        <h1>{{etape.adresse.locality}}, {{ etape.adresse.postal_code }}</h1>
+        <div class="cover">
-        <h2>{{etape.title}}</h2>
+          <img :src="etape.vignette.url" :alt="etape.vignette.alt">
-        <div>
+        </div>
-          <p>Étape n°{{etape.etape_number}}</p>
+        <div class="cartouche" :style="{ backgroundColor: etape.couleur }">
-          <p>Du {{etape.dates.value}} au {{ etape.dates.end_value }}</p>
+          <p>Étape n°{{etape.etape_number}}</p>
+          <p>Du {{etape.dates.start.d}} {{etape.dates.start.m}} au {{ etape.dates.end.d }} {{ etape.dates.end.m }} {{ etape.dates.end.y }}</p>
+        </div>
+        <div class="brand-pattern" :style="{ backgroundColor: etape.couleur }">
+          <div class="pattern"></div>
+        </div>
+        <div class="locality">
+          <div class="top-triangle"></div>
+          <div class="locality-title">
+            <h1>{{etape.title}} <em>({{ etape.adresse.postal_code }})</em></h1>
+          </div>
         </div>
-        <img :src="etape.vignette.url" :alt="etape.vignette.alt">
       </header>
       <main>
-        <div v-for="partie in etape.parties">
+        <div v-for="partie in etape.parties" class="partie">
-          <h3 v-html="partie.title"></h3>
+          <div class="partie-title">
+            <h3>
+              <div class="underline" :style="{ backgroundColor: etape.couleur }"></div>
+              <p v-html="partie.title"></p>
+            </h3>
+          </div>
           <p v-html="partie.text"></p>
         </div>
       </main>
@@ -20,6 +34,7 @@
   <!--     
       <div v-if="loading">Loading...</div>
       <div v-if="error">{{ error }}</div>
+      {{etape.adresse.locality}}
    -->
   
       <div><pre>{{href}}</pre></div>

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

@@ -7,6 +7,7 @@ $body-margin-bottom: 4vh;
 $sm-font-size: 0.8rem;
 $m-font-size: 1.4rem;
 $l-font-size: 1.8rem;
+$xl-font-size: 2.4rem;
 
 $main-color: #1a1918;
 $main-color-light: #635b58;
@@ -490,6 +491,16 @@ body{
               }
             } 
           }
+          > .user-login-form {
+            height: 90vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            > div {
+              margin: 20px 0;
+            }
+          }
         }
       }
       > #content-modale > div {
@@ -502,11 +513,118 @@ body{
         img {
           width: 100%;
           height: auto;
+          object-fit: cover;
         }
         > div {
           width: 100%;
           overflow: hidden;
         }
+        > header {
+          margin-bottom: 3rem;
+          > .cover {
+            max-height: 60vh;
+            display: flex;
+            justify-content: center;
+            overflow: hidden;
+            position: relative;
+            z-index: 0;
+          }
+          > .cartouche {
+            position: absolute;
+            top: 2rem;
+            padding: 1rem 1.5rem;
+            background-color: $brand-color;
+            z-index: 1;
+            > p {
+              margin-block-start: 0;
+              margin-block-end: 0;
+            }
+            > p:last-of-type {
+              font-weight: bold;
+            }
+          }
+          > .brand-pattern {
+            display: block;
+            width: 100%;
+            height: 120px;
+            > .pattern {
+              display: block;
+              width: 100%;
+              height: 100%;
+              background-image: url(/themes/custom/caravane/assets/imgs/motif-caravane-invert-tile.png);
+              background-size: 300px;
+              background-size: repeat;
+            }
+          }
+          > .locality {
+            position: relative;
+            z-index: 1;
+            width: 50%;
+            margin-left: 25%;
+            margin-top: -245px;
+            > .top-triangle {
+              display: block;
+              width: 100%;
+              height: 100px;
+              display: flex;
+              clip-path: polygon(-1% 100%, 50% 0, 101% 100%);
+              background-color: white;
+              margin-bottom: -1px;
+            }
+            > .locality-title {
+              min-height: 115px;
+              display: block;
+              background-color: white;
+              padding: 1rem 2rem;
+              display: flex;
+              align-items: center;
+              > h1 {
+                width: 100%;
+                font-size: $xl-font-size;
+                margin-block-start: 0;
+                margin-block-end: 0;
+                font-family: 'Joost', sans-serif;
+                text-align: center;
+                > em {
+                  font-style: normal;
+                  font-weight: lighter;
+                }
+              }
+            }
+          }
+        }
+        > main {
+          width: 100%;
+          padding: 0 5vw;
+          box-sizing: border-box;
+          > .partie {
+            display: inline-block;
+            > .partie-title {
+              > h3 {
+                position: relative;
+                display: inline-block;
+                > p {
+                  display: inline-block;
+                  font-size: $l-font-size;
+                  font-family: 'Joost', sans-serif;
+                  margin: 0;
+                  z-index: 1;
+                  position: relative;
+                  padding: 0 0.5rem;
+                }
+                > .underline {
+                  z-index: 0;
+                  left: 0;
+                  top: 1.4rem;
+                  position: absolute;
+                  width: 100%;
+                  display: inline-block;
+                  height: 1rem;
+                }
+              }
+            }
+          }
+        }
       }
     }
   } 

web/themes/custom/caravane/caravane.theme

@@ -1,5 +1,5 @@
 <?php
-
+use GuzzleHttp\Psr7\Uri;
 /**
  * @file
  * Functions to support theming in the caravane theme.
@@ -27,6 +27,14 @@ function caravane_preprocess_html(&$variables) {
  */
 function caravane_preprocess_page(&$variables) {
 
+  if (\Drupal::service('path.current')->getPath() == '/node/2') {
+    // Fetch content from the homepage.
+    // $homepage_url = \Drupal::service('path.current')->getPath();
+    $base_url = \Drupal::request()->getSchemeAndHttpHost();
+    $uri = new Uri($base_url);
+    $homepage_content = \Drupal::httpClient()->get($uri);
+    $variables['homepage_content'] = $homepage_content->getBody();
+  }
 }
 
 /**

web/themes/custom/caravane/templates/page--node--2.html.twig

@@ -0,0 +1,92 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a single page.
+ *
+ * The doctype, html, head and body tags are not in this template. Instead they
+ * can be found in the html.html.twig template in this directory.
+ *
+ * Available variables:
+ *
+ * General utility variables:
+ * - base_path: The base URL path of the Drupal installation. Will usually be
+ *   "/" unless you have installed Drupal in a sub-directory.
+ * - is_front: A flag indicating if the current page is the front page.
+ * - logged_in: A flag indicating if the user is registered and signed in.
+ * - is_admin: A flag indicating if the user has permission to access
+ *   administration pages.
+ *
+ * Site identity:
+ * - front_page: The URL of the front page. Use this instead of base_path when
+ *   linking to the front page. This includes the language domain or prefix.
+ *
+ * Page content (in order of occurrence in the default page.html.twig):
+ * - messages: Status and error messages. Should be displayed prominently.
+ * - node: Fully loaded node, if there is an automatically-loaded node
+ *   associated with the page and the node ID is the second argument in the
+ *   page's path (e.g. node/12345 and node/12345/revisions, but not
+ *   comment/reply/12345).
+ *
+ * Regions:
+ * - page.header: Items for the header region.
+ * - page.primary_menu: Items for the primary menu region.
+ * - page.secondary_menu: Items for the secondary menu region.
+ * - page.highlighted: Items for the highlighted content region.
+ * - page.help: Dynamic help text, mostly for admin pages.
+ * - page.content: The main content of the current page.
+ * - page.sidebar_first: Items for the first sidebar.
+ * - page.sidebar_second: Items for the second sidebar.
+ * - page.footer: Items for the footer region.
+ * - page.breadcrumb: Items for the breadcrumb region.
+ *
+ * @see template_preprocess_page()
+ * @see html.html.twig
+ *
+ * @ingroup themeable
+ */
+#}
+<div class="layout-container">
+
+  <header role="banner">
+    {{ page.header }}
+  </header>
+
+  {{ page.primary_menu }}
+  {{ page.secondary_menu }}
+
+  {{ page.breadcrumb }}
+
+  {{ page.highlighted }}
+
+  {{ page.help }}
+
+  <main role="main">
+    <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
+
+    <div class="layout-content">
+     {{ page.content }}
+    </div>{# /.layout-content #}
+
+    {% if page.sidebar_first %}
+      <aside class="layout-sidebar-first" role="complementary">
+        {{ page.sidebar_first }}
+      </aside>
+    {% endif %}
+
+    {% if page.sidebar_second %}
+      <aside class="layout-sidebar-second" role="complementary">
+        {{ page.sidebar_second }}
+      </aside>
+    {% endif %}
+
+    <div id="content-modale"></div>
+  </main>
+
+  {% if page.footer %}
+    <footer role="contentinfo">
+      {{ page.footer }}
+    </footer>
+  {% endif %}
+  {{ homepage_content }}
+
+</div>{# /.layout-container #}