bachir/drupal-caravane
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

theme modale etape

Browse Source
This commit is contained in:
Valentin
2024-09-11 19:53:18 +02:00
parent c2d8eb99cf
commit ebb3ceb6d5
6 changed files with 270 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
web/themes/custom/caravane/assets/js/stores/content.js
View File

@ -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;
}

31
web/themes/custom/caravane/assets/js/vuejs/Modale.vue
View File

@ -2,17 +2,31 @@
<Transition>
<div v-if="isEtapeValid">
<header>
<h1>{{etape.adresse.locality}}, {{ etape.adresse.postal_code }}</h1>
<h2>{{etape.title}}</h2>
<div>
<p>Étape n°{{etape.etape_number}}</p>
<p>Du {{etape.dates.value}} au {{ etape.dates.end_value }}</p>
<div class="cover">
<img :src="etape.vignette.url" :alt="etape.vignette.alt">
</div>
<div class="cartouche" :style="{ backgroundColor: etape.couleur }">
<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">
<h3 v-html="partie.title"></h3>
<div v-for="partie in etape.parties" class="partie">
<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>