theme modale etape
This commit is contained in:
@@ -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>
|
||||
|
Reference in New Issue
Block a user