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

front end

Browse Source
This commit is contained in:
Julie
2026-03-18 12:00:19 +01:00
parent b0352c963c
commit bc6ad43ea5
31 changed files with 832 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

499
app/pages/orchestre/missions.vue
View File

@@ -1,51 +1,474 @@
<template>
<div>
<PageSection>
<DsHeading as="h2" tone="invert" textcase="uppercase" class="programme_titre">
PROGRAMME
</DsHeading>
<DsText as="p">
Créé en 1974, l’Orchestre national d’Île-de-France se compose de 95 musiciens engagés et passionnés. Notre formation symphonique propose de nombreux concerts, spectacles et ateliers musicaux sur l’ensemble du territoire francilien. Notre devise : porter la musique classique partout et pour tous ! Programmation, actions éducatives, initiatives culturelles, toute l’activité de l’Orchestre exprime ses valeurs et les missions qui l’animent.
</DsText>
</Pagesection>
<PageSection :content=false>
<Decalage tone="dark" title-tone="invert" position="left" button-tone="invert" ensavoirplus-target="texte_cache">
<template #title>
La Région Île-de-France, le territoire de l’Orchestre
</template>
<DsText as="p" tone="invert" >
L’Orchestre national d’Île-de-France se déploie sur les 8 départements de la région parisienne, pour amener la musique classique auprès de publics variés. Il se produit dans les salles de spectacle et les théâtres d’Île-de-France comme dans les lieux dépourvus d’offre culturelle. C’est ainsi que ses musiciens investissent régulièrement certains endroits atypiques tels que les hôpitaux, les usines ou les centres pénitentiaires.
</DsText>s
</Decalage>
</Pagesection>
<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>
<PageSection :content=false>
<Decalage tone="brandreverse" " title-tone="invert" position="right">
<template #title>
Studio d’enregistrement et location d’instruments
</template>
<DsText as="p">
L’Orchestre national d’Île-de-France accompagne les professionnels et les amateurs dans leurs activités musicales.
Aux portes de Paris, nous mettons à leur disposition un studio d’enregistrement high-tech et plusieurs espaces de répétition. Nous leur proposons également plus de 3000 instruments à la location à travers un parc instrumental ouvert sur le monde et ses traditions musicales les plus inattendues !
</DsText>
</Decalage>
</Pagesection>
</div>
<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>
<style lang="scss">
</style>
.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>