generated from gitea_admin/default
475 lines
13 KiB
Vue
475 lines
13 KiB
Vue
<template>
|
|
<div>
|
|
<!-- ================== -->
|
|
<!-- FILS D'ARIANE -->
|
|
<!-- ================== -->
|
|
<PageSection tone="" content-size="default" class="breadcrum_wp">
|
|
<Breadcrumb/>
|
|
</PageSection>
|
|
|
|
<!-- ================== -->
|
|
<!-- EN-TêTE -->
|
|
<!-- ================== -->
|
|
<section class="fiche_header_wp">
|
|
<div class="fiche_header_wp_gauche"></div>
|
|
|
|
<div class="fiche_header_inner">
|
|
<div class="fiche_header_titres">
|
|
<div>
|
|
<DsHeading as="h1" tone="default" textcase="uppercase" class="concert-card__title">
|
|
{{ missions?.header_titre }}
|
|
</DsHeading>
|
|
</div>
|
|
|
|
<DsText as="p" align="justify">
|
|
{{ missions?.header_text }}
|
|
</DsText>
|
|
</div>
|
|
<div class="fiche_header_img">
|
|
<DsMedia
|
|
v-if="missions?.image_illustration_header?.url"
|
|
:src="missions.image_illustration_header.url"
|
|
:alt="missions.image_illustration_header.alternativeText || ''"
|
|
fit="contain"
|
|
ratio="square"
|
|
/>
|
|
|
|
<div v-else class="img_placeholder" aria-hidden="true" />
|
|
</div>
|
|
|
|
</div>
|
|
<div class="fiche_header_wp_droite"></div>
|
|
|
|
</section>
|
|
|
|
<!-- ================== -->
|
|
<!-- PARTIE 1 -->
|
|
<!-- ================== -->
|
|
<PageSection tone="" content-size="default" padded_size="md" class="fiche_description">
|
|
<SectionContent v-if="missions?.partie_1" class="description_wp">
|
|
<StrapiBlocksConvert :blocks="missions.partie_1" />
|
|
</SectionContent>
|
|
</PageSection>
|
|
|
|
<!-- ================== -->
|
|
<!-- decalage_gauche 1 -->
|
|
<!-- ================== -->
|
|
<PageSection :content="false">
|
|
<Decalage tone="dark" title-tone="invert" position="left" button-tone="invert">
|
|
<template #title>
|
|
{{ missions?.decalage_gauche_1?.decalage_titre }}
|
|
</template>
|
|
<DsText as="p" tone="invert" align="justify">
|
|
{{ missions?.decalage_gauche_1?.decalage_texte }}
|
|
</DsText>
|
|
</Decalage>
|
|
</PageSection>
|
|
|
|
<!-- ================== -->
|
|
<!-- PARTIE 2 -->
|
|
<!-- ================== -->
|
|
<PageSection tone="" content-size="default" padded_size="md" class="fiche_description">
|
|
<SectionContent v-if="missions?.partie_2" class="description_wp">
|
|
<StrapiBlocksConvert :blocks="missions.partie_2" />
|
|
</SectionContent>
|
|
</PageSection>
|
|
|
|
<!-- ================== -->
|
|
<!-- decalage_droite_2 -->
|
|
<!-- ================== -->
|
|
<PageSection :content="false">
|
|
<Decalage tone="brandreverse" title-tone="invert" position="right" button-tone="invert">
|
|
<template #title>
|
|
{{ missions?.decalage_droite_2?.decalage_titre }}
|
|
</template>
|
|
<DsText as="p" align="justify">
|
|
{{ missions?.decalage_droite_2?.decalage_texte }}
|
|
</DsText>
|
|
</Decalage>
|
|
</PageSection>
|
|
|
|
<!-- ================== -->
|
|
<!-- PARTIE 3 -->
|
|
<!-- ================== -->
|
|
<PageSection tone="" content-size="default" padded_size="md" class="fiche_description">
|
|
<SectionContent v-if="missions?.partie_3" class="description_wp">
|
|
<StrapiBlocksConvert :blocks="missions.partie_3" />
|
|
</SectionContent>
|
|
</PageSection>
|
|
|
|
|
|
|
|
<!-- ================== -->
|
|
<!-- decalage_droite_clic_4 -->
|
|
<!-- ================== -->
|
|
<PageSection :content="false">
|
|
<Decalage tone="brand" title-tone="invert" position="right" button-tone="invert" ensavoirplus-target="texte_cache">
|
|
<template #title>
|
|
{{ missions?.decalage_droite_clic_4?.decalage_titre }}
|
|
</template>
|
|
<DsText as="p" tone="invert" align="justify">
|
|
{{ missions?.decalage_droite_clic_4?.decalage_texte }}
|
|
</DsText>
|
|
</Decalage>
|
|
</PageSection>
|
|
|
|
<PageSection>
|
|
<div id="texte_cache" class="decalage_ensavoirplus--hidden">Texte caché</div>
|
|
</PageSection>
|
|
|
|
<!-- ================== -->
|
|
<!-- L'ORCHESTRE POUR LES PROS -->
|
|
<!-- ================== -->
|
|
<PageSection padded_size="lg">
|
|
<SectionContent>
|
|
<SectionTitle tone="" pad="xs">
|
|
L'ORCHESTRE POUR LES PROS
|
|
</SectionTitle>
|
|
</SectionContent>
|
|
|
|
<SectionContent>
|
|
<BannierePros />
|
|
</SectionContent>
|
|
</PageSection>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
|
|
import DsText from '@root/design-system/primitives/DsText.vue'
|
|
import DsMedia from '@root/design-system/primitives/DsMedia.vue'
|
|
import DsButton from '@root/design-system/primitives/DsButton.vue'
|
|
|
|
//--------------------
|
|
// RÉCUPÉRATION DES DONNÉES STRAPI
|
|
//--------------------
|
|
const { items: mission, pending, error, refresh } = useStrapi(
|
|
"/api/__strapi__/missions",
|
|
{ locale: "fr-FR",
|
|
populate: {
|
|
decalage_gauche_1: true,
|
|
decalage_droite_2: true,
|
|
decalage_gauche_3: true,
|
|
decalage_droite_clic_4: true,
|
|
image_illustration_header: true,
|
|
},
|
|
}
|
|
)
|
|
const missions = computed(() => mission.value?.[0] || null)
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
|
|
.breadcrum_wp {
|
|
padding-top: 30px;
|
|
}
|
|
|
|
.fiche_header_wp {
|
|
display: grid;
|
|
justify-content: center;
|
|
padding-bottom: 100px;
|
|
|
|
|
|
@media (min-width: 0px) and (max-width: 600px) {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto 510px;
|
|
padding-top: 40px;
|
|
}
|
|
@media (min-width: 600px) {
|
|
grid-template-columns: minmax(10px, 10px) 580px 0px;
|
|
grid-template-rows: 40px 380px;
|
|
}
|
|
@media (min-width: 700px) {
|
|
grid-template-columns: minmax(10px, 10px) 660px 0px;
|
|
grid-template-rows: 40px 380px;
|
|
}
|
|
@media (min-width: 800px) {
|
|
grid-template-columns: minmax(10px, 10px) auto minmax(10px, 10px);
|
|
grid-template-rows: 40px 340px;
|
|
}
|
|
@media (min-width: 900px) {
|
|
grid-template-columns: minmax(10px, 10px) 860px minmax(10px, 10px);
|
|
grid-template-rows: 40px 400px;
|
|
}
|
|
@media (min-width: 1000px) {
|
|
grid-template-columns: minmax(20px, auto) 950px minmax(10px, auto);
|
|
grid-template-rows: 40px 400px;
|
|
}
|
|
@media (min-width: 1100px) {
|
|
grid-template-columns: minmax(20px, auto) 1020px minmax(20px, auto);
|
|
grid-template-rows: 40px 400px;
|
|
}
|
|
@media (min-width: 1200px) {
|
|
grid-template-columns: minmax(20px, auto) 1100px minmax(20px, auto);
|
|
grid-template-rows: 40px 400px;
|
|
}
|
|
@media (min-width: 1300px) {
|
|
grid-template-columns: minmax(20px, auto) 1200px minmax(20px, auto);
|
|
grid-template-rows: 40px 400px;
|
|
}
|
|
@media (min-width: 1400px) {
|
|
grid-template-columns: minmax(20px, auto) 1300px minmax(20px, auto);
|
|
grid-template-rows: 40px 400px;
|
|
}
|
|
@media (min-width: 1500px) {
|
|
grid-template-columns: minmax(20px, auto) 1400px minmax(20px, auto);
|
|
grid-template-rows: 40px 400px;
|
|
}
|
|
}
|
|
.fiche_header_wp_gauche {
|
|
|
|
@media (min-width: 0px) and (max-width: 600px) {
|
|
display: none;
|
|
}
|
|
@media (min-width: 600px) {
|
|
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;
|
|
}
|
|
}
|
|
.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/3;
|
|
}
|
|
@media (min-width: 600px) {
|
|
grid-column: 2;
|
|
grid-row: 1/3;
|
|
}
|
|
display: grid;
|
|
|
|
@media (min-width: 0px) and (max-width: 600px) {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto 510px;
|
|
}
|
|
@media (min-width: 600px) {
|
|
width: 575px;
|
|
grid-template-columns: 4fr 0.5fr 3.5fr;
|
|
grid-template-rows: 40px 380px;
|
|
}
|
|
@media (min-width: 700px) {
|
|
width: 675px;
|
|
grid-template-columns: 4fr 0.5fr 3.5fr;
|
|
grid-template-rows: 40px 380px;
|
|
}
|
|
@media (min-width: 800px) {
|
|
width: 780px;
|
|
grid-template-columns: 4fr 0.5fr 3.5fr;
|
|
grid-template-rows: 40px 340px;
|
|
}
|
|
@media (min-width: 900px) {
|
|
width: 860px;
|
|
grid-template-columns: 4fr 0.5fr 3.5fr;
|
|
grid-template-rows: 40px 400px;
|
|
}
|
|
@media (min-width: 1000px) {
|
|
width: 950px;
|
|
grid-template-columns: 4fr 0.5fr 3.5fr;
|
|
grid-template-rows: 40px 400px;
|
|
}
|
|
@media (min-width: 1100px) {
|
|
width: 1020px;
|
|
grid-template-columns: 4fr 0.5fr 3.5fr;
|
|
grid-template-rows: 40px 400px;
|
|
}
|
|
@media (min-width: 1200px) {
|
|
width: 1100px;
|
|
grid-template-columns: 4fr 0.5fr 3.5fr;
|
|
grid-template-rows: 40px 400px;
|
|
}
|
|
@media (min-width: 1300px) {
|
|
width: 1200px;
|
|
grid-template-columns: 4fr 0.5fr 3.5fr;
|
|
grid-template-rows: 40px 400px;
|
|
}
|
|
@media (min-width: 1400px) {
|
|
width: 1300px;
|
|
grid-template-columns: 4fr 0.5fr 3.5fr;
|
|
grid-template-rows: 40px 400px;
|
|
}
|
|
@media (min-width: 1500px) {
|
|
width: 1400px;
|
|
grid-template-columns: 4fr 0.5fr 3.5fr;
|
|
grid-template-rows: 40px 400px;
|
|
}
|
|
@media (min-width: 1600px) {
|
|
width: 1400px;
|
|
grid-template-columns: 4fr 0.5fr 3.5fr;
|
|
grid-template-rows: 40px 400px;
|
|
}
|
|
@media (min-width: 1700px) {
|
|
width: 1400px;
|
|
grid-template-columns: 4fr 0.5fr 3.5fr;
|
|
grid-template-rows: 40px 400px;
|
|
}
|
|
@media (min-width: 1800px) {
|
|
width: 1400px;
|
|
grid-template-columns: 4fr 0.5fr 3.5fr;
|
|
grid-template-rows: 40px 400px;
|
|
}
|
|
}
|
|
|
|
.fiche_header_titres {
|
|
|
|
@media (min-width: 0px) and (max-width: 600px) {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
padding-bottom: 20px;
|
|
padding-left: 10px;
|
|
}
|
|
@media (min-width: 600px) {
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
}
|
|
display: grid;
|
|
align-content: start;
|
|
gap: 0.75rem;
|
|
max-width: 475px;
|
|
|
|
h1 {
|
|
font-size: 55px;
|
|
@media (min-width: 0px) and (max-width: 600px) {
|
|
font-size: 25px;
|
|
}
|
|
@media (min-width: 600px) {
|
|
font-size: 25px;
|
|
}
|
|
@media (min-width: 700px) {
|
|
font-size: 30px;
|
|
}
|
|
@media (min-width: 800px) {
|
|
font-size: 30px;
|
|
}
|
|
@media (min-width: 900px) {
|
|
font-size: 40px;
|
|
}
|
|
@media (min-width: 1000px) {
|
|
font-size: 40px;
|
|
}
|
|
@media (min-width: 1100px) {
|
|
font-size: 40px;
|
|
}
|
|
@media (min-width: 1200px) {
|
|
font-size: 50px;
|
|
}
|
|
@media (min-width: 1300px) {
|
|
font-size: 55px;
|
|
}
|
|
@media (min-width: 1400px) {
|
|
font-size: 55px;
|
|
}
|
|
@media (min-width: 1500px) {
|
|
font-size: 55px;
|
|
}
|
|
@media (min-width: 1600px) {
|
|
font-size: 55px;
|
|
}
|
|
@media (min-width: 1700px) {
|
|
font-size: 55px;
|
|
}
|
|
@media (min-width: 1800px) {
|
|
font-size: 55px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.fiche_header_img {
|
|
|
|
@media (min-width: 0px) and (max-width: 600px) {
|
|
grid-column: 1 / 4;
|
|
grid-row: 2 / 3;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
@media (min-width: 600px) {
|
|
grid-column: 3 / 5;
|
|
grid-row: 1 / 3;
|
|
}
|
|
overflow: hidden;
|
|
.ds-media {
|
|
@media (min-width: 600px) {
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.fiche_header_infos {
|
|
|
|
@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;
|
|
}
|
|
display: grid;
|
|
align-content: center;
|
|
justify-content: end;
|
|
|
|
@media (min-width: 0px) and (max-width: 700px) {
|
|
gap: 7px;
|
|
}
|
|
@media (min-width: 700px) {
|
|
gap: 20px;
|
|
}
|
|
|
|
text-align: right;
|
|
.fiche_header_infos_genre {
|
|
font-weight: 900;
|
|
|
|
}
|
|
}
|
|
.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_description > * {
|
|
max-width: 570px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.fiche_description {
|
|
.page-section--inner {
|
|
|
|
@media (max-width: 599px) {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|