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

dev

Browse Source
This commit is contained in:
Julie
2026-04-12 23:25:07 +02:00
parent d8f9bb59fa
commit ef126bc177
69 changed files with 4168 additions and 1806 deletions
Download Patch File Download Diff File Expand all files Collapse all files

392
app/pages/concerts/concert-[id].vue
View File

@@ -10,9 +10,8 @@
</PageSection>
<section class="fiche_header_wp">
<section class="fiche_concert_wp">
<div class="fiche_header_wp_gauche"></div>
<div class="fiche_header_wp_gauche_carre"></div>
<div class="fiche_header_inner">
<div class="fiche_header_titres">
<div>
@@ -36,97 +35,53 @@
/>
<div v-else class="img_placeholder" aria-hidden="true" />
</div>
<div class="fiche_header_bandeau"></div>
<div class="fiche_header_infos">
<div>
<DsHeading as="h2" tone="invert" textcase="uppercase" class="fiche_header_infos_genre" v-if="genreLabel">
{{ genreLabel }}
</DsHeading>
</div>
<div v-if="concert.duree_concert">
<DsText as="p" tone="invert" weight="bold" spacing="space-0" class="">
DURÉE {{ concert.duree_concert }}
</DsText>
<DsText as="p" tone="invert" class="" v-if="concert.duree_entracte">
Entracte {{ concert.duree_entracte }}
</DsText>
</div>
<div v-if="concert.production_concert">
<DsText as="p" tone="invert" class="">
{{ concert.production_concert }}
</DsText>
</div>
</div>
</div>
<div class="fiche_header_wp_droite"></div>
</section>
<PageSection tone="" content-size="default">
<section class="fiche_details_wp">
<section class="distribution_wp">
<div v-if="directionsOndif.length">
<div v-for="d in directionsOndif" :key="d.id" class="distribution_item">
<DsText as="p" tone="default" size="lg" v-if="d.postes_artiste_ondif?.length" class="distribution_item_poste direction">
{{ d.postes_artiste_ondif.map((p) => p.nom_poste).join(', ') }}
</DsText>
<DsText as="p" tone="default" size="lg" weight="bold" class="">
{{ d.nom_artiste_ondif }}
</DsText>
</div>
</div>
<div v-if="directionsInvite.length">
<div v-for="d in directionsInvite" :key="d.id" class="distribution_item">
<DsText as="p" tone="default" size="lg" v-if="d.postes_artiste_invite?.length" class="distribution_item_poste direction">
{{ d.postes_artiste_invite.map((p) => p.nom_poste).join(', ') }}
</DsText>
<DsText as="p" tone="default" size="lg" weight="bold" class="">
{{ d.nom_artiste_invite }}
</DsText>
</div>
</div>
<div v-if="artistesOndif.length">
<div v-for="d in artistesOndif" :key="d.id" class="distribution_item">
<DsText as="p" tone="default" size="lg" v-if="d.postes_artiste_ondif?.length" class="distribution_item_poste">
{{ d.postes_artiste_ondif.map((p) => p.nom_poste).join(', ') }}
</DsText>
<DsText as="p" tone="default" size="lg" class="">
{{ d.nom_artiste_ondif }}
</DsText>
</div>
</div>
<div v-if="artistesInvite.length">
<div v-for="d in artistesInvite" :key="d.id" class="distribution_item">
<DsText as="p" tone="default" size="lg" v-if="d.postes_artiste_invite?.length" class="distribution_item_poste">
{{ d.postes_artiste_invite.map((p) => p.nom_poste).join(', ') }}
</DsText>
<DsText as="p" tone="default" size="lg" class="">
{{ d.nom_artiste_invite }}
</DsText>
</div>
</div>
</section>
<section class="programme_wp">
<div>
<DsHeading as="h2" tone="invert" textcase="uppercase" class="programme_titre">
PROGRAMME
</DsHeading>
</div>
<div class="programme_list">
<div v-for="(p, i) in programmes" :key="p.id || i" class="programme_item" >
<DsText as="p" tone="default" size="lg" spacing="space-0" weight="semibold" class="programme_compositeur">
{{ p.compositeur_programme }}
<div class="fiche_header_distrib_wp">
<div class="programme_list">
<template v-if="directionsOndif.length">
<div v-for="d in directionsOndif" :key="d.id" class="programme_item" >
<DsText as="p" tone="default" size="lg" spacing="space-0" class="programme_compositeur">
{{ d.postes_artiste_ondif.map((p) => p.nom_poste).join(', ') }}
</DsText>
<DsText as="p" tone="default" size="lg" spacing="space-0" class="programme_oeuvre">
{{ p.oeuvre_programme }}
</DsText>
<DsText as="p" tone="default" size="lg" class="" v-if="p.piece_programme">
{{ p.piece_programme }}
<DsText as="p" tone="default" size="lg" spacing="space-0" weight="semibold" class="programme_oeuvre">
{{ d.nom_artiste_ondif }}
</DsText>
</div>
</div>
</section>
<div v-if="representations.length" class="representation_wp">
</template>
<template v-if="directionsInvite.length">
<div v-for="d in directionsInvite" :key="d.id" class="programme_item" >
<DsText as="p" tone="default" size="lg" spacing="space-0" v-if="d.postes_artiste_invite?.length" class="programme_compositeur direction">
{{ d.postes_artiste_invite.map((p) => p.nom_poste).join(', ') }}
</DsText>
<DsText as="p" tone="default" size="lg" spacing="space-0" weight="semibold" class="programme_oeuvre">
{{ d.nom_artiste_invite }}
</DsText>
</div>
</template>
<template v-if="artistesOndif.length">
<div v-for="d in artistesOndif" :key="d.id" class="programme_item" >
<DsText as="p" tone="default" size="lg" spacing="space-0" v-if="d.postes_artiste_ondif?.length" class="programme_compositeur">
{{ d.postes_artiste_ondif.map((p) => p.nom_poste).join(', ') }}
</DsText>
<DsText as="p" tone="default" size="lg" spacing="space-0" weight="semibold" class="programme_oeuvre">
{{ d.nom_artiste_ondif }}
</DsText>
</div>
</template>
<template v-if="artistesInvite.length">
<div v-for="d in artistesInvite" :key="d.id" class="programme_item" >
<DsText as="p" tone="default" size="lg" spacing="space-0" v-if="d.postes_artiste_invite?.length" class="programme_compositeur">
{{ d.postes_artiste_invite.map((p) => p.nom_poste).join(', ') }}
</DsText>
<DsText as="p" tone="default" size="lg" spacing="space-0" weight="semibold" class="programme_oeuvre">
{{ d.nom_artiste_invite }}
</DsText>
</div>
</template>
</div>
</div>
<div v-if="representations.length" class="fiche_header_representation_wp">
<div v-for="(r, i) in representations" :key="r.id || i" class="representation_item">
<div>
@@ -166,7 +121,45 @@
</div>
</div>
</div>
</section>
<div class="fiche_header_infos">
<div>
<DsHeading as="h2" tone="invert" textcase="uppercase" class="fiche_header_infos_genre" v-if="genreLabel">
{{ genreLabel }}
</DsHeading>
</div>
<div class="programme_list">
<div v-for="(p, i) in programmes" :key="p.id || i" class="programme_item" >
<DsText as="p" tone="default" size="lg" spacing="space-0" weight="semibold" class="programme_compositeur">
{{ p.compositeur_programme }}
</DsText>
<DsText as="p" tone="default" size="lg" spacing="space-0" class="programme_oeuvre">
{{ p.oeuvre_programme }}
</DsText>
<DsText as="p" tone="default" size="lg" class="" v-if="p.piece_programme">
{{ p.piece_programme }}
</DsText>
</div>
</div>
<div v-if="concert.duree_concert">
<DsText as="p" tone="invert" weight="bold" spacing="space-0" class="">
DURÉE {{ concert.duree_concert }}
</DsText>
<DsText as="p" tone="invert" class="" v-if="concert.duree_entracte">
Entracte {{ concert.duree_entracte }}
</DsText>
</div>
<div v-if="concert.production_concert">
<DsText as="p" tone="invert" class="">
{{ concert.production_concert }}
</DsText>
</div>
</div>
</div>
</section>
<PageSection tone="" content-size="default">
<section v-if="concert.description_concert" class="description_wp">
<StrapiBlocksConvert :blocks="concert?.description_concert" />
@@ -345,55 +338,56 @@
padding-top: 30px;
}
.fiche_header_wp {
.fiche_concert_wp {
display: grid;
@media (min-width: 0px) and (max-width: 600px) {
grid-template-columns: 1fr;
grid-template-rows: auto 510px 20px 200px;
grid-template-rows: auto auto;
padding-top: 40px;
}
@media (min-width: 600px) {
grid-template-columns: minmax(10px, 10px) 580px 0px;
grid-template-rows: 40px 280px 20px 230px;
grid-template-rows: 40px auto;
}
@media (min-width: 700px) {
grid-template-columns: minmax(10px, 10px) 660px 0px;
grid-template-rows: 70px 250px 90px 300px;
grid-template-rows: 70px auto;
}
@media (min-width: 800px) {
grid-template-columns: minmax(10px, 10px) 780px minmax(10px, 10px);
grid-template-rows: 60px 280px 70px 300px;
grid-template-rows: 60px auto;
}
@media (min-width: 900px) {
grid-template-columns: minmax(10px, 10px) 860px minmax(10px, 10px);
grid-template-rows: 90px 340px 100px 250px;
grid-template-rows: 90px auto;
}
@media (min-width: 1000px) {
grid-template-columns: minmax(20px, auto) 950px minmax(10px, auto);
grid-template-rows: 90px 340px 120px 270px;
grid-template-rows: 90px auto;
}
@media (min-width: 1100px) {
grid-template-columns: minmax(20px, auto) 1020px minmax(20px, auto);
grid-template-rows: 90px 340px 140px 290px;
grid-template-rows: 90px auto;
}
@media (min-width: 1200px) {
grid-template-columns: minmax(20px, auto) 1100px minmax(20px, auto);
grid-template-rows: 90px 340px 160px 330px;
grid-template-rows: 90px auto;
}
@media (min-width: 1300px) {
grid-template-columns: minmax(20px, auto) 1200px minmax(20px, auto);
grid-template-rows: 90px 340px 160px 330px;
grid-template-rows: 90px auto;
}
@media (min-width: 1400px) {
grid-template-columns: minmax(20px, auto) 1300px minmax(20px, auto);
grid-template-rows: 90px 340px 160px 380px;
grid-template-rows: 90px auto;
}
@media (min-width: 1500px) {
grid-template-columns: minmax(20px, auto) 1400px minmax(20px, auto);
grid-template-rows: 90px 340px 160px 380px;
grid-template-rows: 90px auto;
}
}
.fiche_header_wp_gauche {
@media (min-width: 0px) and (max-width: 600px) {
@@ -403,37 +397,16 @@
grid-column: 1;
}
}
.fiche_header_wp_gauche_carre {
@media (min-width: 0px) and (max-width: 600px) {
display: none;
}
@media (min-width: 600px) {
grid-column: 1;
grid-row: 4;
}
background-color: var(--c-backgroud-black);
}
.fiche_header_wp_droite {
@media (min-width: 0px) and (max-width: 600px) {
display: none;
}
@media (min-width: 600px) {
grid-column: 3;
}
}
.fiche_header_inner {
@media (min-width: 0px) and (max-width: 600px) {
grid-column: 1;
grid-row: 1/5;
grid-row: 1/3;
}
@media (min-width: 600px) {
grid-column: 2;
grid-row: 1/5;
grid-row: 1/3;
}
display: grid;
@@ -488,28 +461,15 @@
}
@media (min-width: 1500px) {
width: 1400px;
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
grid-template-rows: 90px 340px 160px 380px;
}
@media (min-width: 1600px) {
width: 1400px;
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
grid-template-rows: 90px 340px 160px 380px;
}
@media (min-width: 1700px) {
width: 1400px;
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
grid-template-rows: 90px 340px 160px 380px;
}
@media (min-width: 1800px) {
width: 1400px;
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
grid-template-rows: 90px 340px 160px 380px;
grid-template-columns: 4fr 4fr 0.5fr;
grid-template-rows: 90px auto min-content auto auto;
}
}
.fiche_header_titres {
//background-color: rgba(255, 166, 0, 0.674);
@media (min-width: 0px) and (max-width: 600px) {
grid-column: 1;
grid-row: 1;
@@ -523,6 +483,8 @@
display: grid;
align-content: start;
gap: 0.75rem;
padding-right: 10px;
padding-bottom: 10px;
h1 {
font-size: 55px;
@media (min-width: 0px) and (max-width: 600px) {
@@ -574,10 +536,10 @@
@media (min-width: 0px) and (max-width: 600px) {
grid-column: 1 / 4;
grid-row: 2 / 4;
grid-row: 1 / 4;
}
@media (min-width: 600px) {
grid-column: 3 / 5;
grid-column: 2;
grid-row: 1 / 5;
}
overflow: hidden;
@@ -587,20 +549,25 @@
}
.fiche_header_infos {
background-color: var(--c-text);
@media (min-width: 0px) and (max-width: 600px) {
grid-column: 1 / 2;
grid-row: 4;
margin-top: -30px;
}
@media (min-width: 600px) {
grid-column: 1;
grid-row: 4;
grid-column: 2;
grid-row: 5;
}
display: grid;
align-content: center;
justify-content: end;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
padding-left: 10px;
width: 96%;
margin-top: -18px;
@media (min-width: 0px) and (max-width: 700px) {
gap: 7px;
}
@@ -611,22 +578,117 @@
text-align: right;
.fiche_header_infos_genre {
font-weight: 900;
}
.programme_list {
display: flex;
flex-wrap: wrap;
column-gap: 20px;
row-gap: 20px;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
}
.programme_item {
flex: 1 0 auto;
max-width: 100%;
background-color: var(--c-surface);
padding-top: 14px;
padding-right: 20px;
padding-left: 18px;
padding-bottom: 10px;
}
}
.fiche_header_bandeau {
@media (min-width: 0px) and (max-width: 600px) {
grid-column: 1 / 3;
grid-row: 4;
margin-top: -30px;
}
@media (min-width: 600px) {
grid-column: 1 / 4;
grid-row: 4;
}
background-color: var(--c-backgroud-black);
.fiche_header_distrib_wp {
background-color: var(--c-backgroud-brandreverse);
grid-column: 1;
grid-row: 3/5;
.programme_list {
display: flex;
flex-wrap: wrap;
column-gap: 20px;
row-gap: 20px;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
}
.programme_item {
flex: 1 0 200px;
background-color: var(--c-surface);
padding-top: 14px;
padding-right: 20px;
padding-left: 18px;
padding-bottom: 10px;
}
}
.fiche_header_representation_wp {
//background-color: aqua;
grid-column: 1;
grid-row: 5;
display: flex;
flex-wrap: wrap;
align-self: start;
column-gap: 20px;
row-gap: 20px;
padding-top: 20px;
padding-right: 20px;
padding-left: 20px;
@media (min-width: 0px) and (max-width: 600px) {
padding-left: 20px;
padding-right: 5px;
}
.representation_item {
@media (min-width: 0px) and (max-width: 500px) {
width: 100%;
}
@media (min-width: 500px) {
max-width: 215px;
}
@media (min-width: 600px) {
max-width: 262px;
}
@media (min-width: 700px) {
max-width: 300px;
}
flex: 1 1 230px;
display: grid;
border: 2px var(--c-brand_rouge) solid;
padding-top: 20px;
> * {
padding-left: 20px;
padding-right: 20px;
}
.representation_item_lieu {
font-size: 20px !important;
}
.representation_item_comment_wp {
padding-top: 5px;
}
.representation_item_comment {
background-color: lightgray;
padding: 5px;
}
}
.representation_cta {
color: var(--c-surface);
background-color: var(--c-brand_rouge);
margin-top: 15px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
a {
font-family: var(--font-roboto);
font-weight: 600;
font-size: 18px;
}
}
}
}
/* ============================ */
/* DISTRIBUTION / PROGRAMME */
@@ -872,9 +934,11 @@
/* DESCRIPTION */
/* ============================ */
.concert--page {
margin-bottom: 80px;
.description_wp {
display: flex;
justify-content: center;
margin-top: 80px;
padding-bottom: 40px;
padding-left: 10px;
padding-right: 10px;