gitea_admin/wondif_vue
1
0
Fork 0
generated from gitea_admin/default
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ajout de bouton réserver et ajout du formulaire lycée

Browse Source
This commit is contained in:
Julie
2026-05-25 17:15:17 +02:00
parent 107093f7bb
commit c2a11f1b61
12 changed files with 929 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/components/Breadcrumb.vue
View File

@@ -32,6 +32,8 @@
mediation: "Médiation",
mecenat: "Mécénat",
professionnels: "Professionnels",
inscriptions: "Inscriptions",
projet_lycee: "Inscription projet lycée",
actus: "Actualités"
}
@@ -75,7 +77,7 @@
? props.currentLabel
: (labelMap[part] || humanize(decodeURIComponent(part)))
const noLink = part === 'orchestre' || part === 'concerts' || part === 'mediation' || part === 'professionnels' || part === 'mecenat'
const noLink = part === 'orchestre' || part === 'concerts' || part === 'mediation' || part === 'professionnels' || part === 'mecenat' || part === 'inscriptions'
crumbs.push({ to: resolveTo(part, index, parts, acc), label, noLink })
if (part === 'concerts') {

36
app/components/concert/ConcertCard.vue
View File

@@ -3,15 +3,19 @@
<div class="concert-card__grid">
<!-- Image -->
<div class="concert-card__media">
<DsMedia v-if="imageUrl" :src="imageUrl" :alt="imageAlt" ratio="square" />
<NuxtLink v-if="href" :to="href" class="concert-card__link">
<DsMedia v-if="imageUrl" :src="imageUrl" :alt="imageAlt" ratio="square" />
</NuxtLink>
<div v-else class="musicien_card_media-placeholder" aria-hidden="true" />
</div>
<!-- Content -->
<div class="concert-card__content">
<DsHeading as="h4" tone="default" class="concert-card__title">
{{ title }}
</DsHeading>
<NuxtLink v-if="href" :to="href" class="concert-card__link">
<DsHeading as="h4" tone="default" class="concert-card__title">
{{ title }}
</DsHeading>
</NuxtLink>
<!-- Meta : date + lieu -->
<div class="concert-card__meta">
@@ -33,6 +37,9 @@
<DsButtonArrow :to="`${href}`" variant="secondary">
Découvrir
</DsButtonArrow>
<DsButton :href="`${lien_billetterie_representation}`" variant="third" size="xs" class="concert-card__actions--reserver" target="_blank" rel="noopener noreferrer">
Réserver
</DsButton>
</div>
</div>
</div>
@@ -45,6 +52,7 @@
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
import DsText from '@root/design-system/primitives/DsText.vue'
import DsButtonArrow from '@root/design-system/primitives/DsButtonArrow.vue'
import DsButton from '@root/design-system/primitives/DsButton.vue'
defineProps({
@@ -53,6 +61,7 @@
lieu: { type: String, default: '' },
dateISO: { type: String, required: true }, // ex: "2026-01-15T20:00:00+01:00"
dateLabel: { type: String, required: true }, // ex: "Jeu. 15 jan. 2026 — 20h"
lien_billetterie_representation: { type: String, default: '' },
description: { type: String, default: '' },
imageUrl: { type: String, default: '' },
imageAlt: { type: String, default: '' },
@@ -83,21 +92,34 @@
.concert-card__content {
display: grid;
gap: var(--sp-6);
gap: var(--sp-4);
max-width: 518px;
padding-left: 5px;
padding-right: 5px;
}
.concert-card__link:hover,
.concert-card__link:focus-visible {
color: var(--c-brand_rouge) !important;
.ds-heading--default {
color: var(--c-brand_rouge) !important;
}
}
.concert-card__meta {
margin-top: calc(var(--sp-4) * -1);
}
.concert-card__description {
margin-top: 10px;
margin-bottom: 20px;
margin-top: 3px;
margin-bottom: 4px;
}
.concert-card__actions {
margin-top: auto;
display: flex;
justify-content: space-between;
align-items: center;
&--reserver {
margin-right: 5px;
}
}
</style>

31
app/components/section/Decalage.vue
View File

@@ -15,11 +15,13 @@
<slot name="title" />
</DsHeading>
<slot />
<div v-if="$slots.button" class="decalage_button">
<slot name="button" />
</div>
<div v-if="ensavoirplusTarget" class="decalage_button">
<DsButton :textColor="buttonTone" :borderColor="buttonTone" @click="toggleTarget(ensavoirplusTarget, ensavoirplusGroup)">En savoir +</DsButton>
<div class="decalage_button_wp">
<div v-if="resolvedLienCta" class="decalage_button">
<DsButton :to="resolvedLienCta" variant="white" textColor="default" borderColor="none">Candidater à nos projets</DsButton>
</div>
<div v-if="ensavoirplusTarget" class="decalage_button">
<DsButton :textColor="buttonTone" :borderColor="buttonTone" @click="toggleTarget(ensavoirplusTarget, ensavoirplusGroup)">En savoir +</DsButton>
</div>
</div>
</div>
</div>
@@ -27,17 +29,23 @@
</template>
<script setup>
import { computed } from 'vue'
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
import DsText from '@root/design-system/primitives/DsText.vue'
import DsButton from '@root/design-system/primitives/DsButton.vue'
defineProps({
const props = defineProps({
tone: { type: String, default: 'default' },
titleTone: { type: String, default: 'default' },
buttonTone: { type: String, default: 'default' },
position: { type: String, default: 'left' },
cta: { type: String, default: '' },
lienCta: { type: String, default: '' },
ensavoirplusTarget: { type: String, default: '' },
ensavoirplusGroup: { type: String, default: '' }
ensavoirplusGroup: { type: String, default: '' },
})
const resolvedLienCta = computed(() => props.lienCta || props.cta)
function toggleTarget(ensavoirplusTarget, ensavoirplusGroup) {
const target = document.getElementById(ensavoirplusTarget)
if (!target) return
@@ -134,10 +142,17 @@
.decalage_button {
text-align: right;
}
.decalage_button_wp {
justify-content: flex-end;
}
}
.decalage_button {
.decalage_button_wp {
margin-top: 32px;
display: flex;
gap: 20px;
flex-wrap: wrap;
}
}