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-07 22:02:43 +02:00
parent 3f3f939267
commit e320feb2d7
17 changed files with 268 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/scss/base/_colors.scss
View File

@@ -12,6 +12,8 @@ $vert: green;
$bleu_fonce: #0056b3;
$bleu_clair: #007bff;
.c--noir {
color: $noir;
}

3
app/assets/scss/base/_spaces.scss
View File

@@ -20,6 +20,9 @@
height: 33px;
}
.margin_top_3 {
margin-top: 3px;
}
.margin_left_-20 {
margin-left: -20px;
}

1
app/assets/scss/component/_header_nav.scss
View File

@@ -341,6 +341,7 @@
padding-top: 3px;
padding-bottom: 1px;
padding-right: 6px;
margin-top: -6px;
}
}

51
app/components/Chiffres.vue
View File

@@ -1,36 +1,16 @@
<template>
<section class="chiffres_cont">
<DsHeading as="h1" tone="default" textcase="uppercase">
DES CHIFRES PARTOUT EN ÎLE-DE-FRANCE EN 2025
{{ title }}
</DsHeading>
<div class="chiffres_list">
<div class="chiffres_item">
<div class="chiffres_nombre">14</div>
<div class="chiffres_descriptioin">Concerts dans le Val-de-Marne</div>
</div>
<div class="chiffres_item">
<div class="chiffres_nombre">6 831</div>
<div class="chiffres_descriptioin">Spectateurs dans les Yvelines</div>
</div>
<div class="chiffres_item">
<div class="chiffres_nombre">9</div>
<div class="chiffres_descriptioin">Villes en Seine-et-Marne</div>
</div>
<div class="chiffres_item">
<div class="chiffres_nombre">10</div>
<div class="chiffres_descriptioin">Concerts en Hauts-de-Seine</div>
</div>
<div class="chiffres_item">
<div class="chiffres_nombre">2 456</div>
<div class="chiffres_descriptioin">Spectateurs en Seine-Saint-Denis</div>
</div>
<div class="chiffres_item">
<div class="chiffres_nombre">7 419</div>
<div class="chiffres_descriptioin">Spectateurs dans l'Essonne</div>
</div>
<div class="chiffres_item">
<div class="chiffres_nombre">6</div>
<div class="chiffres_descriptioin">Concerts en Vald'Oise</div>
<div
v-for="(item, index) in items"
:key="`${item.value}-${index}`"
class="chiffres_item"
>
<div class="chiffres_nombre">{{ item.value }}</div>
<div class="chiffres_descriptioin">{{ item.label }}</div>
</div>
</div>
</section>
@@ -38,6 +18,17 @@
<script setup>
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
defineProps({
title: {
type: String,
required: true
},
items: {
type: Array,
required: true
}
})
</script>
<style lang="scss">
@@ -67,7 +58,7 @@
margin-top: 60px;
.chiffres_item {
max-width: 180px;
max-width: 200px;
display: flex;
flex-direction: column;
align-items: center;
@@ -101,4 +92,4 @@
}
</style>
</style>

3
app/components/concert/ConcertCardList.vue
View File

@@ -94,6 +94,7 @@
.concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
flex: 2 1 340px;
min-width: 500px;
}
}
@@ -104,6 +105,7 @@
.concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
flex: 2 1 380px;
min-width: 500px;
}
}
@@ -124,6 +126,7 @@
.concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
flex: 2 1 440px;
min-width: 500px;
}
}

2
app/components/header/HeaderNav.vue
View File

@@ -73,7 +73,7 @@
<li class="header_nav_item nav_focus_black" :class="{ 'is-active': isMecenat }">
Nous soutenir
<ul class="header_nav_sub_menu decalage_gauche">
<ul class="header_nav_sub_menu decalage_gauche c--noir margin_top_3">
<li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/soutenir">Nous soutenir</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/entreprises">Entreprises</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/projets">Les projets</NuxtLink></li>

1
app/components/section/PageSection.vue
View File

@@ -54,7 +54,6 @@
&--dark { background: var(--c-backgroud-black); }
&--brandreverse { background: var(--c-backgroud-brandreverse); }
&--jaune { background: var(--c-background-jaune); }
&--bleu { background: var(--c-background-bleu); }
&--rouge45 { background: var(--c-brand_rouge45); }
&--rouge-weak { background: var(--c-brand_rouge-weak); }

20
app/components/strapiconvert/StrapiBlocksConvert.vue
View File

@@ -121,7 +121,7 @@
color: var(--c-brand_rouge);
}
h3 {
padding-bottom: 5px;
padding-bottom: 10px;
font-weight: var(--fw-semibold);
font-size: 26px;
}
@@ -141,6 +141,14 @@
font-size: 22px;
}
em {
font-style: var(--fi-hight);
}
strong {
font-weight: var(--fw-semibold);
}
a {
text-decoration: underline;
color: var(--c-brand_rouge-weak);
@@ -151,6 +159,7 @@
ol {
list-style: none;
margin: 0 0 5px;
padding-top: 5px;
padding-left: 0;
}
@@ -158,7 +167,7 @@
position: relative;
margin: 0;
padding-left: 23px;
margin-bottom: 5px;
margin-bottom: 10px;
}
@@ -214,10 +223,11 @@
// Espace uniquement avant un titre s'il suit un bloc de contenu
&--p + &__h,
&--ul + &__h,
&--ol + &__h,
&--quote + &__h {
ul + &__h,
ol + &__h,
blockquote + &__h {
margin-top: 13px;
}
}
</style>

7
app/composables/useStrapi.js
View File

@@ -61,13 +61,6 @@ function appendPopulate(query, populate, prefix = "populate") {
return
}
if (value && typeof value === "object") {
const entries = Object.entries(value)
const allTrue = entries.length > 0 && entries.every(([, v]) => v === true)
if (allTrue) {
const list = entries.map(([k]) => k).join(",")
query.set(`${prefix}[${key}][populate]`, list)
return
}
appendPopulate(query, value, `${prefix}[${key}][populate]`)
}
})

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

@@ -348,7 +348,6 @@
.fiche_header_wp {
display: grid;
@media (min-width: 0px) and (max-width: 600px) {
grid-template-columns: 1fr;
grid-template-rows: auto 510px 20px 200px;
@@ -773,7 +772,7 @@
.description_wp {
display: flex;
justify-content: center;
padding-bottom: 70px;
padding-bottom: 40px;
padding-left: 10px;
padding-right: 10px;
> * {
@@ -792,10 +791,10 @@
.img-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 520px));
grid-template-columns: repeat(auto-fit, minmax(220px, 502px));
gap: 1rem;
justify-content: center;
margin-top: 1.5rem;
margin-top: 10px;
width: 100%;
}

2
app/pages/index.vue
View File

@@ -52,7 +52,7 @@
</SectionTitle>
<SectionContent pad="xs" class="theme_ppt--description">
<DsText tone="invert" size="lg" class="theme_ppt--txt" >
Les 95 musiciennes et musiciens proposent chaque saison plus de 120 concerts dans des salles et théâtres, des lieux culturels et des espaces atypiques de la région francilienne. Porté par une forte mission territoriale, l’orchestre s’engage à rendre la musique symphonique accessible à toutes et tous, en la faisant vivre au plus près des habitants grâce notamment à des actions culturelles, pédagogiques et participatives au cœur du territoire.
Faire vivre la musique symphonique au coeur du territoire et la rendre accessible à toutes et tous : telle est la mission de nos 95 musiciennes et musiciens. L'Orchestre donne 120 concerts par saison dans les 8 départements d'Île-de-France, dans des salles tradionnelles aux lieux les plus divers.
</DsText>
<!-- UN CTA / LIEN SUR L'IMAGE -->
<DsButtonArrow to="/" variant="invert">

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

@@ -17,19 +17,19 @@
<div class="fiche_header_titres">
<div>
<DsHeading as="h1" tone="default" textcase="uppercase" class="concert-card__title">
ACTIONS CULTURELLES POUR LES SCOLAIRES
{{scolaire_donnees_servies.header_titre}}
</DsHeading>
</div>
<DsText as="p" align="justify">
Ici un texte pour décrire ou faire un chapeau pour cette page scolaires. Ici un texte pour décrire ou faire un chapeau pour cette page scolaires. Ici un texte pour décrire ou faire un chapeau pour cette page scolaires.
{{scolaire_donnees_servies.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 || ''"
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 || ''"
fit="cover"
ratio="square"
/>
@@ -46,80 +46,71 @@
<!-- CHIFFRES -->
<!-- ================== -->
<PageSection tone="" content-size="default" padded_size="md" class="chiffres_wp">
<Chiffres />
<Chiffres
:title= "scolaire_donnees_servies?.chiffres_scolaires?.[0]?.Titre"
:items="scolairesChiffres"
/>
</PageSection>
<!-- ================== -->
<!-- decalage_gauche 1 -->
<!-- AFFICHAGE DES PARTIE EN DÉCALLAGE AVEC LE CONTENU PROVENANT DE STRAPI -->
<!-- ================== -->
<PageSection :content="false">
<Decalage tone="dark" title-tone="invert" position="left" button-tone="invert" ensavoirplus-target="texte_cache" ensavoirplus-group="scolaires-details">
<template v-for="(t, index) in tiroirs" :key="index">
<PageSection :content="false">
<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"
>
<template #title>
Lycées - Tous à l'Orchestre !
{{ t.decalage_titre }}
</template>
<DsText as="p" tone="invert" align="justify">
Découvrir l’univers de l’orchestre, entrer dans la peau d’un professionnel du spectacle, organisez avec vos élèves un concert au sein de votre établissement, sont autant d'apprentissage que l'Orchestre amènent auprès des jeunes lycéens en devenir.
{{ t.decalage_texte }}
</DsText>
</Decalage>
</PageSection>
</PageSection>
<PageSection
:id="`texte_cache_${index + 3}`"
data-ensavoirplus-group="scolaires-details"
tone=""
content-size="default"
padded_size="md"
class="decalage_ensavoirplus--hidden"
>
<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
v-for="img in t.tiroir_galerie"
:key="img.id || img.url"
:src="img.url"
:alt="img.alternativeText"
/>
</div>
</section>
<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>
<PageSection id="texte_cache" data-ensavoirplus-group="scolaires-details" tone="" content-size="default" padded_size="md" class="fiche_description decalage_ensavoirplus--hidden">
<SectionContent class="description_wp">
<div class="strapi-blocks">
<!-- Paragraph -->
<!-- Heading -->
<h1 class="strapi-blocks__h">La programmation de l’Orchestre : richesse et diversité</h1>
<!-- Paragraph -->
<p class="strapi-blocks--p">L’Orchestre explore 4 siècles de musique.</p>
<!-- Paragraph -->
<p class="strapi-blocks--p">Musique baroque ou contemporaine, classique ou romantique, nos musiciens, nos solistes et plusieurs chefs de renommée internationale interprètent une grande diversité de chefs-d’œuvre musicaux.</p>
<!-- Paragraph -->
<p class="strapi-blocks--p">Avide d’échanges et de partages, notre formation se produit aussi dans de hauts lieux de la musique et des festivals internationaux comme le festival Enescu à Bucarest, le festival Haydn à Vienne ou le festival Berlioz en Isère.</p>
<!-- Paragraph --><!-- Heading -->
<h1 class="strapi-blocks__h">Musique classique, culture et éducation</h1>
<!-- Paragraph -->
<p class="strapi-blocks--p">Au-delà des concerts de sa programmation, l’Orchestre national d’Île-de-France mène également de nombreuses actions éducatives et culturelles pour faire découvrir la musique classique au plus grand nombre.</p>
<!-- Paragraph -->
<p class="strapi-blocks--p">Rencontre avec les artistes, ateliers de pratique musicale et artistique, concerts éducatifs, spectacles musicaux, concerts participatifs, chacune de nos initiatives place le public au cœur de notre projet artistique !</p>
</div>
</SectionContent>
</PageSection>
<!-- ================== -->
<!-- decalage_droite_2 -->
<!-- ================== -->
<PageSection :content="false">
<Decalage tone="brandreverse" title-tone="invert" position="right" button-tone="invert" ensavoirplus-target="texte_cache_2" ensavoirplus-group="scolaires-details">
<template #title>
Collège
</template>
<DsText as="p" align="justify">
Développer une écoute active, acquérir le vocabulaire spécifique, mettre en perspective la musique qu’ils écoutent et la musique symphonique sont des objectifs des sessions organisées pour les collégiens.
</DsText>
</Decalage>
</PageSection>
<PageSection id="texte_cache_2" data-ensavoirplus-group="scolaires-details" tone="" content-size="default" padded_size="md" class="fiche_description decalage_ensavoirplus--hidden">
<SectionContent class="description_wp">
<div class="strapi-blocks">
<!-- Paragraph -->
<!-- Heading -->
<h1 class="strapi-blocks__h">La programmation de l’Orchestre : richesse et diversité</h1>
<!-- Paragraph -->
<p class="strapi-blocks--p">L’Orchestre explore 4 siècles de musique.</p>
<!-- Paragraph -->
<p class="strapi-blocks--p">Musique baroque ou contemporaine, classique ou romantique, nos musiciens, nos solistes et plusieurs chefs de renommée internationale interprètent une grande diversité de chefs-d’œuvre musicaux.</p>
<!-- Paragraph -->
<p class="strapi-blocks--p">Avide d’échanges et de partages, notre formation se produit aussi dans de hauts lieux de la musique et des festivals internationaux comme le festival Enescu à Bucarest, le festival Haydn à Vienne ou le festival Berlioz en Isère.</p>
<!-- Paragraph --><!-- Heading -->
<h1 class="strapi-blocks__h">Musique classique, culture et éducation</h1>
<!-- Paragraph -->
<p class="strapi-blocks--p">Au-delà des concerts de sa programmation, l’Orchestre national d’Île-de-France mène également de nombreuses actions éducatives et culturelles pour faire découvrir la musique classique au plus grand nombre.</p>
<!-- Paragraph -->
<p class="strapi-blocks--p">Rencontre avec les artistes, ateliers de pratique musicale et artistique, concerts éducatifs, spectacles musicaux, concerts participatifs, chacune de nos initiatives place le public au cœur de notre projet artistique !</p>
</div>
</SectionContent>
</PageSection>
</div>
</template>
@@ -127,6 +118,118 @@
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__/scolaires"
const populate = {
header_illustration: true,
chiffres_scolaires: {chiffres: true},
tiroirs_scolaires: {
decalage_parametres: true,
tiroir_galerie: true,
tiroir_videos: true,
},
}
const { items: scolaires, pending, error } = useStrapi(
endpoint,
{
locale: "fr-FR",
populate,
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 tiroirs = computed(() =>
(scolaires.value?.[0]?.tiroirs_scolaires || []).map((tiroir_item) => ({
decalage_titre: tiroir_item.decalage_parametres?.decalage_titre,
decalage_texte: tiroir_item.decalage_parametres?.decalage_texte,
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),
}))
)
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)
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">
@@ -140,5 +243,8 @@
}
}
/* ============================ */
/* GALERIES */
/* ============================ */
</style>

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

@@ -55,7 +55,10 @@
<!-- CHIFFRES -->
<!-- ================== -->
<PageSection tone="" content-size="default" padded_size="md" class="chiffres_wp">
<Chiffres />
<Chiffres
title="L'ORCHESTRE PARTOUT EN ÎLE-DE-FRANCE"
:items="missionsChiffres"
/>
</PageSection>
@@ -166,6 +169,13 @@
}
)
const missions = computed(() => mission.value?.[0] || null)
const missionsChiffres = [
{ value: '8', label: 'Départements' },
{ value: '+ de 60', label: 'Villes' },
{ value: '+ de 120', label: 'concerts' },
{ value: '100 000', label: 'Spectateurs et spectatrices' },
{ value: '22 000', label: "Bénéficiares de l'action culturelle" }
]
</script>
@@ -478,7 +488,7 @@
// =======================
.missions--page {
.chiffres_wp {
background-color: #31ae13c2;
background-color: var(--c-background-vert);
margin-bottom: 50px;
}
}