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

240
app/pages/mediation/academie.vue Normal file
View File

@@ -0,0 +1,240 @@
<template>
<div class="academie--page">
<!-- ================== -->
<!-- FILS D'ARIANE -->
<!-- ================== -->
<PageSection tone="" content-size="default" class="breadcrum_wp">
<Breadcrumb/>
</PageSection>
<!-- ================== -->
<!-- EN-TêTE -->
<!-- ================== -->
<section class="fiche_header_simple_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">
{{academie_donnees_servies.header_titre}}
</DsHeading>
</div>
<DsText as="p" align="justify">
{{academie_donnees_servies.header_text}}
</DsText>
</div>
<div class="fiche_header_img">
<DsMedia
v-if="academie_donnees_servies?.header_illustration?.url"
:src="academie_donnees_servies.header_illustration.url"
:alt="academie_donnees_servies.header_illustration.alternativeText || ''"
fit="cover"
ratio="square"
/>
<div v-else class="img_placeholder" aria-hidden="true" />
</div>
</div>
<div class="fiche_header_wp_droite"></div>
</section>
<!-- ================== -->
<!-- AFFICHAGE DES PARTIE EN DÉCALLAGE AVEC LE CONTENU PROVENANT DE STRAPI -->
<!-- ================== -->
<template v-for="(t, index) in tiroirs" :key="index">
<PageSection :content="false" :class="{ 'decalage-section--spaced': index > 0 }">
<Decalage
:tone="t.decalage_couleur"
title-tone="invert"
:position="t.decalage_sens"
button-tone="invert"
:ensavoirplus-target="t.tiroir_ouvert ? undefined : `texte_cache_${index + 3}`"
:ensavoirplus-group="t.tiroir_ouvert ? undefined : 'academie-details'"
>
<template #title>
{{ t.decalage_titre }}
</template>
<DsText as="p" tone="invert" :align="t.decalage_sens">
{{ t.decalage_texte }}
</DsText>
</Decalage>
</PageSection>
<PageSection
:id="`texte_cache_${index + 3}`"
:data-ensavoirplus-group="t.tiroir_ouvert ? undefined : 'academie-details'"
tone=""
content-size="default"
padded_size=""
:class="{ 'decalage_ensavoirplus--hidden': !t.tiroir_ouvert }"
>
<section v-if="t.tiroir_galerie.length" class="img-gallery_wp">
<div class="img-gallery">
<DsMedia
v-for="img in t.tiroir_galerie"
:key="img.id || img.url"
:src="img.url"
:alt="img.alternativeText"
/>
</div>
</section>
<SectionContent class="fiche_description">
<StrapiBlocksConvert :blocks="t.tiroir_description" />
</SectionContent>
<section v-if="t.tiroir_videos.length" class="youtube_wp">
<div class="youtube-list">
<div v-for="v in t.tiroir_videos" :key="v.id" class="youtube-item">
<iframe
:src="v.lien_youtube"
title="Vidéo YouTube"
loading="lazy"
referrerpolicy="strict-origin-when-cross-origin"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
/>
</div>
</div>
</section>
</PageSection>
</template>
<!-- ================== -->
<!-- CONTACT -->
<!-- ================== -->
<PageSection tone="" content-size="default" padded_size="md" class="contact_spe_wp">
<ContactSpecifique
titre="Renseignements Académie d'Orchestre 2026"
nom="Zoë Crampon"
poste="Service action culturelle"
numero="06 82 73 65 01"
mail="zoe.crampon@orchestre-ile.com"
adresse="Orchestre national d’Île-de-France, Service action culturelle, 19, rue des Écoles, 94140 Alfortville"
/>
</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 { computed } from 'vue'
// ======================================
// RÉCUPÉRATION DES DONNÉES DANS STRAPI
// ======================================
const endpoint = "/api/__strapi__/academie"
const populate = {
header_illustration: true,
tiroirs_academie: {
decalage_parametres: true,
tiroir_galerie: true,
tiroir_videos: true,
},
}
const { items: academie, pending, error } = useStrapi(
endpoint,
{
locale: "fr-FR",
populate,
limit: 1,
}
)
// ======================================
// PRÉPARATION DES DONNÉES POUR AFFICHAGE DANS LA PAGE
// ======================================
const academie_donnees_servies = computed(() => academie.value?.[0] || {})
const tiroirs = computed(() =>
(academie.value?.[0]?.tiroirs_academie || []).map((tiroir_item) => ({
decalage_titre: tiroir_item.decalage_parametres?.decalage_titre,
decalage_texte: tiroir_item.decalage_parametres?.decalage_texte,
tiroir_ouvert: Boolean(tiroir_item.decalage_parametres?.tiroir_ouvert),
decalage_sens:
tiroir_item.decalage_parametres?.decalage_sens === "droite" ? "right" : "left",
decalage_couleur:
tiroir_item.decalage_parametres?.decalage_couleur === "rouge"
? "brand"
: tiroir_item.decalage_parametres?.decalage_couleur === "vert clair"
? "brandreverse"
: tiroir_item.decalage_parametres?.decalage_couleur === "jaune"
? "jaune"
: "dark",
tiroir_description: tiroir_item.tiroir_description,
tiroir_galerie: (tiroir_item.tiroir_galerie || []).map((tiroir_item_img) => ({
id: tiroir_item_img.id,
url: tiroir_item_img.url,
alt: tiroir_item_img.alternativeText,
})),
tiroir_videos: (tiroir_item.tiroir_videos || [])
.map((tiroir_item_video) => {
const id = getYoutubeId(tiroir_item_video?.lien_youtube)
if (!id) return null
return {
id: tiroir_item_video.id || id,
lien_youtube: `https://www.youtube-nocookie.com/embed/${id}?rel=0&modestbranding=1&iv_load_policy=3&playsinline=1`,
}
})
.filter(Boolean),
}))
)
function getYoutubeId(url = "") {
try {
const u = new URL(url)
if (u.hostname.includes("youtu.be")) return u.pathname.slice(1)
if (u.pathname.startsWith("/shorts/")) return u.pathname.split("/")[2]
if (u.pathname.startsWith("/embed/")) return u.pathname.split("/")[2]
return u.searchParams.get("v")
} catch {
return null
}
}
</script>
<style lang="scss">
// =======================
// SPÉCIFIQUE À CETTE PAGE
// =======================
.academie--page {
.chiffres_wp {
background-color: var(--c-background-vert);
margin-bottom: 50px;
}
.fiche_description {
display: flex;
justify-content: center;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
> * {
max-width: 640px;
display: flex;
flex-direction: column;
}
}
.contact_spe_wp {
background-color: var(--c-background-jaune-clair);
margin-top: 50px;
margin-bottom: 40px;
}
}
/* ============================ */
/* GALERIES */
/* ============================ */
</style>

13
app/pages/mediation/amateurs.vue
View File

@@ -1,13 +0,0 @@
<template>
<div>
</div>
</template>
<script setup>
</script>
<style lang="scss">
</style>

234
app/pages/mediation/chantons.vue
View File

@@ -1,13 +1,241 @@
<template>
<div>
Chantons avec l'Orchestre : En cours de construction
<div class="chantons--page">
<!-- ================== -->
<!-- FILS D'ARIANE -->
<!-- ================== -->
<PageSection tone="" content-size="default" class="breadcrum_wp">
<Breadcrumb/>
</PageSection>
<!-- ================== -->
<!-- EN-TêTE -->
<!-- ================== -->
<section class="fiche_header_simple_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">
{{chantons_donnees_servies.header_titre}}
</DsHeading>
</div>
<DsText as="p" align="justify">
{{chantons_donnees_servies.header_text}}
</DsText>
</div>
<div class="fiche_header_img">
<DsMedia
v-if="chantons_donnees_servies?.header_illustration?.url"
:src="chantons_donnees_servies.header_illustration.url"
:alt="chantons_donnees_servies.header_illustration.alternativeText || ''"
fit="cover"
ratio="square"
/>
<div v-else class="img_placeholder" aria-hidden="true" />
</div>
</div>
<div class="fiche_header_wp_droite"></div>
</section>
<!-- ================== -->
<!-- AFFICHAGE DES PARTIE EN DÉCALLAGE AVEC LE CONTENU PROVENANT DE STRAPI -->
<!-- ================== -->
<template v-for="(t, index) in tiroirs" :key="index">
<PageSection :content="false" :class="{ 'decalage-section--spaced': index > 0 }">
<Decalage
:tone="t.decalage_couleur"
title-tone="invert"
:position="t.decalage_sens"
button-tone="invert"
:ensavoirplus-target="t.tiroir_ouvert ? undefined : `texte_cache_${index + 3}`"
:ensavoirplus-group="t.tiroir_ouvert ? undefined : 'chantons-details'"
>
<template #title>
{{ t.decalage_titre }}
</template>
<DsText as="p" tone="invert" :align="t.decalage_sens">
{{ t.decalage_texte }}
</DsText>
</Decalage>
</PageSection>
<PageSection
:id="`texte_cache_${index + 3}`"
:data-ensavoirplus-group="t.tiroir_ouvert ? undefined : 'chantons-details'"
tone=""
content-size="default"
padded_size=""
:class="{ 'decalage_ensavoirplus--hidden': !t.tiroir_ouvert }"
>
<section v-if="t.tiroir_galerie.length" class="img-gallery_wp">
<div class="img-gallery">
<DsMedia
v-for="img in t.tiroir_galerie"
:key="img.id || img.url"
:src="img.url"
:alt="img.alternativeText"
/>
</div>
</section>
<SectionContent class="fiche_description">
<StrapiBlocksConvert :blocks="t.tiroir_description" />
</SectionContent>
<section v-if="t.tiroir_videos.length" class="youtube_wp">
<div class="youtube-list">
<div v-for="v in t.tiroir_videos" :key="v.id" class="youtube-item">
<iframe
:src="v.lien_youtube"
title="Vidéo YouTube"
loading="lazy"
referrerpolicy="strict-origin-when-cross-origin"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
/>
</div>
</div>
</section>
</PageSection>
</template>
<!-- ================== -->
<!-- CONTACT -->
<!-- ================== -->
<PageSection tone="" content-size="default" padded_size="md" class="contact_spe_wp">
<ContactSpecifique
titre="Contacter le service des actions culturelles"
nom="Vanessa Gasztowtt"
poste="Responsable de l’action éducative et culturelle
et de la programmation jeune public"
numero="01 41 79 03 43"
mail="vanessa.gasztowtt@orchestre-ile.com"
adresse=""
/>
</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 { computed } from 'vue'
// ======================================
// RÉCUPÉRATION DES DONNÉES DANS STRAPI
// ======================================
const endpoint = "/api/__strapi__/chantons"
const populate = {
header_illustration: true,
tiroirs_chantons: {
decalage_parametres: true,
tiroir_galerie: true,
tiroir_videos: true,
},
}
const { items: chantons, pending, error } = useStrapi(
endpoint,
{
locale: "fr-FR",
populate,
limit: 1,
}
)
// ======================================
// PRÉPARATION DES DONNÉES POUR AFFICHAGE DANS LA PAGE
// ======================================
const chantons_donnees_servies = computed(() => chantons.value?.[0] || {})
const tiroirs = computed(() =>
(chantons.value?.[0]?.tiroirs_chantons || []).map((tiroir_item) => ({
decalage_titre: tiroir_item.decalage_parametres?.decalage_titre,
decalage_texte: tiroir_item.decalage_parametres?.decalage_texte,
tiroir_ouvert: Boolean(tiroir_item.decalage_parametres?.tiroir_ouvert),
decalage_sens:
tiroir_item.decalage_parametres?.decalage_sens === "droite" ? "right" : "left",
decalage_couleur:
tiroir_item.decalage_parametres?.decalage_couleur === "rouge"
? "brand"
: tiroir_item.decalage_parametres?.decalage_couleur === "vert clair"
? "brandreverse"
: tiroir_item.decalage_parametres?.decalage_couleur === "jaune"
? "jaune"
: "dark",
tiroir_description: tiroir_item.tiroir_description,
tiroir_galerie: (tiroir_item.tiroir_galerie || []).map((tiroir_item_img) => ({
id: tiroir_item_img.id,
url: tiroir_item_img.url,
alt: tiroir_item_img.alternativeText,
})),
tiroir_videos: (tiroir_item.tiroir_videos || [])
.map((tiroir_item_video) => {
const id = getYoutubeId(tiroir_item_video?.lien_youtube)
if (!id) return null
return {
id: tiroir_item_video.id || id,
lien_youtube: `https://www.youtube-nocookie.com/embed/${id}?rel=0&modestbranding=1&iv_load_policy=3&playsinline=1`,
}
})
.filter(Boolean),
}))
)
function getYoutubeId(url = "") {
try {
const u = new URL(url)
if (u.hostname.includes("youtu.be")) return u.pathname.slice(1)
if (u.pathname.startsWith("/shorts/")) return u.pathname.split("/")[2]
if (u.pathname.startsWith("/embed/")) return u.pathname.split("/")[2]
return u.searchParams.get("v")
} catch {
return null
}
}
</script>
<style lang="scss">
// =======================
// SPÉCIFIQUE À CETTE PAGE
// =======================
.chantons--page {
.chiffres_wp {
background-color: var(--c-background-vert);
margin-bottom: 50px;
}
.fiche_description {
display: flex;
justify-content: center;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
> * {
max-width: 640px;
display: flex;
flex-direction: column;
}
}
.contact_spe_wp {
background-color: var(--c-background-jaune-clair);
margin-top: 50px;
margin-bottom: 40px;
}
}
</style>
/* ============================ */
/* GALERIES */
/* ============================ */
</style>

13
app/pages/mediation/insertion-pro.vue
View File

@@ -1,13 +0,0 @@
<template>
<div>
Partenariat Grandes Écoles : En cours de construction
</div>
</template>
<script setup>
</script>
<style lang="scss">
</style>

116
app/pages/mediation/scolaires copie.vue → app/pages/mediation/partenariat-grandes-ecoles.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="scolaire--page">
<div class="insertion--page">
<!-- ================== -->
<!-- FILS D'ARIANE -->
<!-- ================== -->
@@ -17,19 +17,19 @@
<div class="fiche_header_titres">
<div>
<DsHeading as="h1" tone="default" textcase="uppercase" class="concert-card__title">
{{scolaire_donnees_servies.header_titre}}
{{insertion_donnees_servies.header_titre}}
</DsHeading>
</div>
<DsText as="p" align="justify">
{{scolaire_donnees_servies.header_text}}
{{insertion_donnees_servies.header_text}}
</DsText>
</div>
<div class="fiche_header_img">
<DsMedia
v-if="scolaire_donnees_servies?.header_illustration?.[0]?.url"
:src="scolaire_donnees_servies.header_illustration[0].url"
:alt="scolaire_donnees_servies.header_illustration[0].alternativeText || ''"
v-if="insertion_donnees_servies?.header_illustration?.url"
:src="insertion_donnees_servies.header_illustration.url"
:alt="insertion_donnees_servies.header_illustration.alternativeText || ''"
fit="cover"
ratio="square"
/>
@@ -42,48 +42,35 @@
</section>
<!-- ================== -->
<!-- CHIFFRES -->
<!-- ================== -->
<PageSection tone="" content-size="default" padded_size="md" class="chiffres_wp">
<Chiffres
:title= "scolaire_donnees_servies?.chiffres_scolaires?.[0]?.Titre"
:items="scolairesChiffres"
/>
</PageSection>
<!-- ================== -->
<!-- AFFICHAGE DES PARTIE EN DÉCALLAGE AVEC LE CONTENU PROVENANT DE STRAPI -->
<!-- ================== -->
<template v-for="(t, index) in tiroirs" :key="index">
<PageSection :content="false">
<PageSection :content="false" :class="{ 'decalage-section--spaced': index > 0 }">
<Decalage
:tone="t.decalage_couleur"
title-tone="invert"
:position="t.decalage_sens"
button-tone="invert"
:ensavoirplus-target="`texte_cache_${index + 3}`"
ensavoirplus-group="scolaires-details"
:ensavoirplus-target="t.tiroir_ouvert ? undefined : `texte_cache_${index + 3}`"
:ensavoirplus-group="t.tiroir_ouvert ? undefined : 'insertion-details'"
>
<template #title>
{{ t.decalage_titre }}
</template>
<DsText as="p" tone="invert" align="justify">
<DsText as="p" tone="invert" :align="t.decalage_sens">
{{ t.decalage_texte }}
</DsText>
</Decalage>
</PageSection>
<PageSection
:id="`texte_cache_${index + 3}`"
data-ensavoirplus-group="scolaires-details"
:data-ensavoirplus-group="t.tiroir_ouvert ? undefined : 'insertion-details'"
tone=""
content-size="default"
padded_size="md"
class="decalage_ensavoirplus--hidden"
padded_size=""
:class="{ 'decalage_ensavoirplus--hidden': !t.tiroir_ouvert }"
>
<SectionContent class="description_wp">
<StrapiBlocksConvert :blocks="t.tiroir_description" />
</SectionContent>
<section v-if="t.tiroir_galerie.length" class="img-gallery_wp">
<div class="img-gallery">
<DsMedia
@@ -94,6 +81,9 @@
/>
</div>
</section>
<SectionContent class="fiche_description">
<StrapiBlocksConvert :blocks="t.tiroir_description" />
</SectionContent>
<section v-if="t.tiroir_videos.length" class="youtube_wp">
<div class="youtube-list">
<div v-for="v in t.tiroir_videos" :key="v.id" class="youtube-item">
@@ -124,6 +114,7 @@
et de la programmation jeune public"
numero="01 41 79 03 43"
mail="vanessa.gasztowtt@orchestre-ile.com"
adresse=""
/>
</PageSection>
@@ -140,18 +131,17 @@ et de la programmation jeune public"
// RÉCUPÉRATION DES DONNÉES DANS STRAPI
// ======================================
const endpoint = "/api/__strapi__/scolaires"
const endpoint = "/api/__strapi__/insertion"
const populate = {
header_illustration: true,
chiffres_scolaires: {chiffres: true},
tiroirs_scolaires: {
tiroirs_grandes_ecoles: {
decalage_parametres: true,
tiroir_galerie: true,
tiroir_videos: true,
},
}
const { items: scolaires, pending, error } = useStrapi(
const { items: insertion, pending, error } = useStrapi(
endpoint,
{
locale: "fr-FR",
@@ -159,45 +149,17 @@ et de la programmation jeune public"
limit: 1,
}
)
console.log("scolaires:", scolaires.value)
watchEffect(() => {
console.log("client ?", import.meta.client)
console.log("server ?", import.meta.server)
console.log("pending:", pending.value)
console.log("error:", error.value)
console.log("scolaires:", scolaires.value)
})
watchEffect(() => {
if (!pending.value && scolaires.value?.length) {
console.log("scolaires dans le watch effect:", scolaires.value)
console.log("scolaires header_titre :", scolaires.value[0].header_titre)
console.log("scolaires illustration url :", scolaires.value[0].header_illustration[0].url)
}
})
console.log("scolaires header_titre :", scolaires.value?.[0]?.header_titre)
// ======================================
// PRÉPARATION DES DONNÉES POUR AFFICHAGE DANS LA PAGE
// ======================================
const scolaire_donnees_servies = computed(() => scolaires.value?.[0] || {})
watchEffect(() => {
console.log("scolaire_donnees_servies JSON:", JSON.stringify(scolaire_donnees_servies.value, null, 2))
})
const scolairesChiffres = computed(() =>
(scolaires.value?.[0]?.chiffres_scolaires?.[0]?.chiffres || []).map((item) => ({
value: item.chiffre,
label: item.label,
}))
)
const insertion_donnees_servies = computed(() => insertion.value?.[0] || {})
const tiroirs = computed(() =>
(scolaires.value?.[0]?.tiroirs_scolaires || []).map((tiroir_item) => ({
(insertion.value?.[0]?.tiroirs_grandes_ecoles || []).map((tiroir_item) => ({
decalage_titre: tiroir_item.decalage_parametres?.decalage_titre,
decalage_texte: tiroir_item.decalage_parametres?.decalage_texte,
tiroir_ouvert: Boolean(tiroir_item.decalage_parametres?.tiroir_ouvert),
decalage_sens:
tiroir_item.decalage_parametres?.decalage_sens === "droite" ? "right" : "left",
decalage_couleur:
@@ -228,12 +190,6 @@ et de la programmation jeune public"
}))
)
watchEffect(() => {
console.log("scolairesChiffres JSON:", JSON.stringify(scolairesChiffres.value, null, 2))
console.log("tiroirs JSON:", JSON.stringify(tiroirs.value, null, 2))
})
function getYoutubeId(url = "") {
try {
const u = new URL(url)
@@ -252,14 +208,32 @@ et de la programmation jeune public"
// =======================
// SPÉCIFIQUE À CETTE PAGE
// =======================
.scolaire--page {
.insertion--page {
.chiffres_wp {
background-color: var(--c-background-jaune);
background-color: var(--c-background-vert);
margin-bottom: 50px;
}
.fiche_description {
display: flex;
justify-content: center;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
> * {
max-width: 640px;
display: flex;
flex-direction: column;
}
}
.contact_spe_wp {
background-color: var(--c-background-jaune-clair);
margin-bottom: 20px;
margin-top: 50px;
margin-bottom: 40px;
}
.strapi-blocks {
h1 {
color: var(--c-bleu);
}
}
}
@@ -267,4 +241,6 @@ et de la programmation jeune public"
/* GALERIES */
/* ============================ */
</style>

234
app/pages/mediation/petite-enfance.vue
View File

@@ -1,13 +1,241 @@
<template>
<div>
<div class="enfance--page">
<!-- ================== -->
<!-- FILS D'ARIANE -->
<!-- ================== -->
<PageSection tone="" content-size="default" class="breadcrum_wp">
<Breadcrumb/>
</PageSection>
<!-- ================== -->
<!-- EN-TêTE -->
<!-- ================== -->
<section class="fiche_header_simple_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">
{{enfance_donnees_servies.header_titre}}
</DsHeading>
</div>
<DsText as="p" align="justify">
{{enfance_donnees_servies.header_text}}
</DsText>
</div>
<div class="fiche_header_img">
<DsMedia
v-if="enfance_donnees_servies?.header_illustration?.url"
:src="enfance_donnees_servies.header_illustration.url"
:alt="enfance_donnees_servies.header_illustration.alternativeText || ''"
fit="cover"
ratio="square"
/>
<div v-else class="img_placeholder" aria-hidden="true" />
</div>
</div>
<div class="fiche_header_wp_droite"></div>
</section>
<!-- ================== -->
<!-- AFFICHAGE DES PARTIE EN DÉCALLAGE AVEC LE CONTENU PROVENANT DE STRAPI -->
<!-- ================== -->
<template v-for="(t, index) in tiroirs" :key="index">
<PageSection :content="false" :class="{ 'decalage-section--spaced': index > 0 }">
<Decalage
:tone="t.decalage_couleur"
title-tone="invert"
:position="t.decalage_sens"
button-tone="invert"
:ensavoirplus-target="t.tiroir_ouvert ? undefined : `texte_cache_${index + 3}`"
:ensavoirplus-group="t.tiroir_ouvert ? undefined : 'enfance-details'"
>
<template #title>
{{ t.decalage_titre }}
</template>
<DsText as="p" tone="invert" :align="t.decalage_sens">
{{ t.decalage_texte }}
</DsText>
</Decalage>
</PageSection>
<PageSection
:id="`texte_cache_${index + 3}`"
:data-ensavoirplus-group="t.tiroir_ouvert ? undefined : 'enfance-details'"
tone=""
content-size="default"
padded_size=""
:class="{ 'decalage_ensavoirplus--hidden': !t.tiroir_ouvert }"
>
<section v-if="t.tiroir_galerie.length" class="img-gallery_wp">
<div class="img-gallery">
<DsMedia
v-for="img in t.tiroir_galerie"
:key="img.id || img.url"
:src="img.url"
:alt="img.alternativeText"
/>
</div>
</section>
<SectionContent class="fiche_description">
<StrapiBlocksConvert :blocks="t.tiroir_description" />
</SectionContent>
<section v-if="t.tiroir_videos.length" class="youtube_wp">
<div class="youtube-list">
<div v-for="v in t.tiroir_videos" :key="v.id" class="youtube-item">
<iframe
:src="v.lien_youtube"
title="Vidéo YouTube"
loading="lazy"
referrerpolicy="strict-origin-when-cross-origin"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
/>
</div>
</div>
</section>
</PageSection>
</template>
<!-- ================== -->
<!-- CONTACT -->
<!-- ================== -->
<PageSection tone="" content-size="default" padded_size="md" class="contact_spe_wp">
<ContactSpecifique
titre="Pour développer un atelier dans votre crèche"
nom="Vanessa Gasztowtt"
poste="Responsable de l’action éducative et culturelle
et de la programmation jeune public"
numero="01 41 79 03 43"
mail="vanessa.gasztowtt@orchestre-ile.com"
adresse=""
/>
</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 { computed } from 'vue'
// ======================================
// RÉCUPÉRATION DES DONNÉES DANS STRAPI
// ======================================
const endpoint = "/api/__strapi__/enfance"
const populate = {
header_illustration: true,
tiroirs_enfance: {
decalage_parametres: true,
tiroir_galerie: true,
tiroir_videos: true,
},
}
const { items: enfance, pending, error } = useStrapi(
endpoint,
{
locale: "fr-FR",
populate,
limit: 1,
}
)
// ======================================
// PRÉPARATION DES DONNÉES POUR AFFICHAGE DANS LA PAGE
// ======================================
const enfance_donnees_servies = computed(() => enfance.value?.[0] || {})
const tiroirs = computed(() =>
(enfance.value?.[0]?.tiroirs_enfance || []).map((tiroir_item) => ({
decalage_titre: tiroir_item.decalage_parametres?.decalage_titre,
decalage_texte: tiroir_item.decalage_parametres?.decalage_texte,
tiroir_ouvert: Boolean(tiroir_item.decalage_parametres?.tiroir_ouvert),
decalage_sens:
tiroir_item.decalage_parametres?.decalage_sens === "droite" ? "right" : "left",
decalage_couleur:
tiroir_item.decalage_parametres?.decalage_couleur === "rouge"
? "brand"
: tiroir_item.decalage_parametres?.decalage_couleur === "vert clair"
? "brandreverse"
: tiroir_item.decalage_parametres?.decalage_couleur === "jaune"
? "jaune"
: "dark",
tiroir_description: tiroir_item.tiroir_description,
tiroir_galerie: (tiroir_item.tiroir_galerie || []).map((tiroir_item_img) => ({
id: tiroir_item_img.id,
url: tiroir_item_img.url,
alt: tiroir_item_img.alternativeText,
})),
tiroir_videos: (tiroir_item.tiroir_videos || [])
.map((tiroir_item_video) => {
const id = getYoutubeId(tiroir_item_video?.lien_youtube)
if (!id) return null
return {
id: tiroir_item_video.id || id,
lien_youtube: `https://www.youtube-nocookie.com/embed/${id}?rel=0&modestbranding=1&iv_load_policy=3&playsinline=1`,
}
})
.filter(Boolean),
}))
)
function getYoutubeId(url = "") {
try {
const u = new URL(url)
if (u.hostname.includes("youtu.be")) return u.pathname.slice(1)
if (u.pathname.startsWith("/shorts/")) return u.pathname.split("/")[2]
if (u.pathname.startsWith("/embed/")) return u.pathname.split("/")[2]
return u.searchParams.get("v")
} catch {
return null
}
}
</script>
<style lang="scss">
// =======================
// SPÉCIFIQUE À CETTE PAGE
// =======================
.enfance--page {
.chiffres_wp {
background-color: var(--c-background-vert);
margin-bottom: 50px;
}
.fiche_description {
display: flex;
justify-content: center;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
> * {
max-width: 640px;
display: flex;
flex-direction: column;
}
}
.contact_spe_wp {
background-color: var(--c-background-jaune-clair);
margin-top: 50px;
margin-bottom: 40px;
}
}
</style>
/* ============================ */
/* GALERIES */
/* ============================ */
</style>

36
app/pages/mediation/scolaires.vue
View File

@@ -124,6 +124,7 @@
et de la programmation jeune public"
numero="01 41 79 03 43"
mail="vanessa.gasztowtt@orchestre-ile.com"
adresse=""
/>
</PageSection>
@@ -159,33 +160,11 @@ et de la programmation jeune public"
limit: 1,
}
)
console.log("scolaires:", scolaires.value)
watchEffect(() => {
console.log("client ?", import.meta.client)
console.log("server ?", import.meta.server)
console.log("pending:", pending.value)
console.log("error:", error.value)
console.log("scolaires:", scolaires.value)
})
watchEffect(() => {
if (!pending.value && scolaires.value?.length) {
console.log("scolaires dans le watch effect:", scolaires.value)
console.log("scolaires header_titre :", scolaires.value[0].header_titre)
console.log("scolaires illustration url :", scolaires.value[0].header_illustration[0].url)
}
})
console.log("scolaires header_titre :", scolaires.value?.[0]?.header_titre)
// ======================================
// PRÉPARATION DES DONNÉES POUR AFFICHAGE DANS LA PAGE
// ======================================
const scolaire_donnees_servies = computed(() => scolaires.value?.[0] || {})
watchEffect(() => {
console.log("scolaire_donnees_servies JSON:", JSON.stringify(scolaire_donnees_servies.value, null, 2))
})
const scolairesChiffres = computed(() =>
(scolaires.value?.[0]?.chiffres_scolaires?.[0]?.chiffres || []).map((item) => ({
@@ -228,11 +207,6 @@ et de la programmation jeune public"
}))
)
watchEffect(() => {
console.log("scolairesChiffres JSON:", JSON.stringify(scolairesChiffres.value, null, 2))
console.log("tiroirs JSON:", JSON.stringify(tiroirs.value, null, 2))
})
function getYoutubeId(url = "") {
try {
@@ -261,7 +235,7 @@ et de la programmation jeune public"
display: flex;
justify-content: center;
padding-top: 10px;
padding-bottom: 70px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
> * {
@@ -272,8 +246,14 @@ et de la programmation jeune public"
}
.contact_spe_wp {
background-color: var(--c-background-jaune-clair);
margin-top: 50px;
margin-bottom: 20px;
}
.strapi-blocks {
h2 {
color: var(--c-bleu);
}
}
}
/* ============================ */

239
app/pages/mediation/social.vue
View File

@@ -1,13 +1,246 @@
<template>
<div>
<div class="hopital--page">
<!-- ================== -->
<!-- FILS D'ARIANE -->
<!-- ================== -->
<PageSection tone="" content-size="default" class="breadcrum_wp">
<Breadcrumb/>
</PageSection>
<!-- ================== -->
<!-- EN-TêTE -->
<!-- ================== -->
<section class="fiche_header_simple_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">
{{hopital_donnees_servies.header_titre}}
</DsHeading>
</div>
<DsText as="p" align="justify">
{{hopital_donnees_servies.header_text}}
</DsText>
</div>
<div class="fiche_header_img">
<DsMedia
v-if="hopital_donnees_servies?.header_illustration?.url"
:src="hopital_donnees_servies.header_illustration.url"
:alt="hopital_donnees_servies.header_illustration.alternativeText || ''"
fit="cover"
ratio="square"
/>
<div v-else class="img_placeholder" aria-hidden="true" />
</div>
</div>
<div class="fiche_header_wp_droite"></div>
</section>
<!-- ================== -->
<!-- AFFICHAGE DES PARTIE EN DÉCALLAGE AVEC LE CONTENU PROVENANT DE STRAPI -->
<!-- ================== -->
<template v-for="(t, index) in tiroirs" :key="index">
<PageSection :content="false" :class="{ 'decalage-section--spaced': index > 0 }">
<Decalage
:tone="t.decalage_couleur"
title-tone="invert"
:position="t.decalage_sens"
button-tone="invert"
:ensavoirplus-target="t.tiroir_ouvert ? undefined : `texte_cache_${index + 3}`"
:ensavoirplus-group="t.tiroir_ouvert ? undefined : 'hopital-details'"
>
<template #title>
{{ t.decalage_titre }}
</template>
<DsText as="p" tone="invert" :align="t.decalage_sens">
{{ t.decalage_texte }}
</DsText>
</Decalage>
</PageSection>
<PageSection
:id="`texte_cache_${index + 3}`"
:data-ensavoirplus-group="t.tiroir_ouvert ? undefined : 'hopital-details'"
tone=""
content-size="default"
padded_size=""
:class="{ 'decalage_ensavoirplus--hidden': !t.tiroir_ouvert }"
>
<section v-if="t.tiroir_galerie.length" class="img-gallery_wp">
<div class="img-gallery">
<DsMedia
v-for="img in t.tiroir_galerie"
:key="img.id || img.url"
:src="img.url"
:alt="img.alternativeText"
/>
</div>
</section>
<SectionContent class="fiche_description">
<StrapiBlocksConvert :blocks="t.tiroir_description" />
</SectionContent>
<section v-if="t.tiroir_videos.length" class="youtube_wp">
<div class="youtube-list">
<div v-for="v in t.tiroir_videos" :key="v.id" class="youtube-item">
<iframe
:src="v.lien_youtube"
title="Vidéo YouTube"
loading="lazy"
referrerpolicy="strict-origin-when-cross-origin"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
/>
</div>
</div>
</section>
</PageSection>
</template>
<!-- ================== -->
<!-- CONTACT -->
<!-- ================== -->
<PageSection tone="" content-size="default" padded_size="md" class="contact_spe_wp">
<ContactSpecifique
titre="Contacter le service des actions culturelles"
nom="Vanessa Gasztowtt"
poste="Responsable de l’action éducative et culturelle
et de la programmation jeune public"
numero="01 41 79 03 43"
mail="vanessa.gasztowtt@orchestre-ile.com"
adresse=""
/>
</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 { computed } from 'vue'
// ======================================
// RÉCUPÉRATION DES DONNÉES DANS STRAPI
// ======================================
const endpoint = "/api/__strapi__/hopital"
const populate = {
header_illustration: true,
tiroirs_hopital: {
decalage_parametres: true,
tiroir_galerie: true,
tiroir_videos: true,
},
}
const { items: hopital, pending, error } = useStrapi(
endpoint,
{
locale: "fr-FR",
populate,
limit: 1,
}
)
// ======================================
// PRÉPARATION DES DONNÉES POUR AFFICHAGE DANS LA PAGE
// ======================================
const hopital_donnees_servies = computed(() => hopital.value?.[0] || {})
const tiroirs = computed(() =>
(hopital.value?.[0]?.tiroirs_hopital || []).map((tiroir_item) => ({
decalage_titre: tiroir_item.decalage_parametres?.decalage_titre,
decalage_texte: tiroir_item.decalage_parametres?.decalage_texte,
tiroir_ouvert: Boolean(tiroir_item.decalage_parametres?.tiroir_ouvert),
decalage_sens:
tiroir_item.decalage_parametres?.decalage_sens === "droite" ? "right" : "left",
decalage_couleur:
tiroir_item.decalage_parametres?.decalage_couleur === "rouge"
? "brand"
: tiroir_item.decalage_parametres?.decalage_couleur === "vert clair"
? "brandreverse"
: tiroir_item.decalage_parametres?.decalage_couleur === "jaune"
? "jaune"
: "dark",
tiroir_description: tiroir_item.tiroir_description,
tiroir_galerie: (tiroir_item.tiroir_galerie || []).map((tiroir_item_img) => ({
id: tiroir_item_img.id,
url: tiroir_item_img.url,
alt: tiroir_item_img.alternativeText,
})),
tiroir_videos: (tiroir_item.tiroir_videos || [])
.map((tiroir_item_video) => {
const id = getYoutubeId(tiroir_item_video?.lien_youtube)
if (!id) return null
return {
id: tiroir_item_video.id || id,
lien_youtube: `https://www.youtube-nocookie.com/embed/${id}?rel=0&modestbranding=1&iv_load_policy=3&playsinline=1`,
}
})
.filter(Boolean),
}))
)
function getYoutubeId(url = "") {
try {
const u = new URL(url)
if (u.hostname.includes("youtu.be")) return u.pathname.slice(1)
if (u.pathname.startsWith("/shorts/")) return u.pathname.split("/")[2]
if (u.pathname.startsWith("/embed/")) return u.pathname.split("/")[2]
return u.searchParams.get("v")
} catch {
return null
}
}
</script>
<style lang="scss">
// =======================
// SPÉCIFIQUE À CETTE PAGE
// =======================
.hopital--page {
.chiffres_wp {
background-color: var(--c-background-vert);
margin-bottom: 50px;
}
.fiche_description {
display: flex;
justify-content: center;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
> * {
max-width: 640px;
display: flex;
flex-direction: column;
}
}
.contact_spe_wp {
background-color: var(--c-background-jaune-clair);
margin-top: 50px;
margin-bottom: 40px;
}
.strapi-blocks {
h1 {
color: var(--c-bleu);
}
}
}
</style>
/* ============================ */
/* GALERIES */
/* ============================ */
</style>