theme modale etape

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

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>