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-13 13:45:39 +02:00
parent ee37e0041f
commit 4eeaf23d80
6 changed files with 249 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/components/FilteredCards.vue
View File

@@ -46,10 +46,11 @@
<!-- Content -->
<div class="theme_tao--cardlist--card--content">
<DsHeading as="h5" tone="default">
{{ card.title }}
</DsHeading>
<NuxtLink v-if="card.url" :to="card.url" class="square-card__title-link">
<DsHeading as="h5" tone="default">
{{ card.title }}
</DsHeading>
</NuxtLink>
<DsText as="p" tone="default" :clamp="6">
<span v-html="card.descriptionHtml" />
</DsText>
@@ -61,6 +62,7 @@
</SectionContent>
</template>
<script setup>
import { ref, computed, watch, nextTick } from 'vue'
@@ -98,6 +100,7 @@
🔴 Ile de France | Ministère de la culture<br>
🎨 Agence belleville.eu`,
tags: ['famille'],
url: "https://ondif.shop.secutix.com/selection/event/date?productId=10229737867151"
},
{
id: 'insta-2',
@@ -109,6 +112,7 @@
Des expériences au plus près des publics et des territoires, où la musique devient transmission, curiosité et émotion partagée.<br>
Retour en images sur ces instants qui font vivre l’Orchestre.🎶✨`,
tags: ['famille'],
url: ""
},
{
id: 'insta-3',
@@ -119,6 +123,7 @@
Entre concerts symphoniques, spectacles mêlant danse et musique, et concerts commentés, nous avons eu le plaisir d’offrir des expériences inédites et reçu des retours enthousiastes de spectateurs conquis.<br>
Retour en images sur ces temps forts qui font vibrer l’Orchestre ! 🎶`,
tags: ['rencontre'],
url: ""
},
{
id: 'insta-4',
@@ -129,6 +134,7 @@
Entre ateliers d’enregistrement sonore, découverte de la lutherie, répétitions commentées et musique à l’hôpital, les rencontres se sont multipliées, au plus près des publics et des territoires.<br>
Retour en images sur ces expériences qui font vivre l’Orchestre 🎶`,
tags: ['famille'],
url: ""
},
{
id: 'insta-5',
@@ -138,6 +144,7 @@
descriptionHtml: `Entre concerts symphoniques, soirées à l’opéra, et musique de chambre, nous avons eu le plaisir de partager des univers variés et de rencontrer un public toujours plus curieux et enthousiaste.<br>
Retour en images sur ces temps forts qui font vibrer l’Ondif ! 🎶`,
tags: ['rencontre'],
url: ""
},
])

232
app/pages/concerts/mag.vue
View File

@@ -1,13 +1,239 @@
<template>
<div>
<div class="maglist--page">
<!-- ================== -->
<!-- Fond noir -->
<!-- ================== -->
<PageSection tone="dark" content-size="default" class="theme_bandeau--grid">
<SectionContent pad="xs" class="theme_bandeau--grid--left">
<SectionTitle tone="invert" pad="">
ONDIF MAG
</SectionTitle>
<DsHeading as="h3" tone="invert">
</DsHeading>
</SectionContent>
<SectionContent pad="xs" class="theme_bandeau--grid--right">
<DsText tone="invert" size="lg" class="theme_bandeau--grid--right--text" >
Le magazine en ligne de l’Orchestre national d’Île-de-France vous invite à découvrir l’actualité des concerts de l’orchestre, des interprètes, des chefs et cheffes, de la création contemporaine et des projets de l’ONDIF sur le territoire francilien et au-delà. Portraits de musiciens, de compositeurs, d’artistes invités, décryptages d’œuvres, partez à la découverte de l’actualité musicale !
</DsText>
</SectionContent>
</PageSection>
<!-- ================== -->
<!-- Listes des articles -->
<!-- ================== -->
<PageSection padded_size="md" content-size="default" class="musiciens_list_section remonter_articles_list">
<section v-if="pending" aria-busy="true" aria-live="polite">
<DsText as="p" tone="default">Chargement des articles...</DsText>
</section>
<section v-else-if="error">
<DsText as="p" tone="default">Impossible de charger les articles.</DsText>
</section>
<section v-else-if="articlesList.length" class="musiciens_list">
<article v-for="a in articlesList" :key="a.id" class="musicien_card">
<DsMedia
v-if="a.image?.url"
:src="a.image.url"
:alt="a.image.alternativeText || a.titre || ''"
ratio="square"
/>
<div v-else class="musicien_card_media-placeholder" aria-hidden="true" />
<DsHeading as="h4" tone="default" class="musicien_card_nom">
<NuxtLink :to="`/concerts/mag/${a.slug}`">
{{ a.titre }}
</NuxtLink>
</DsHeading>
<DsText
v-if="a.categorie"
as="p"
tone="default"
size="md"
class="musicien_card_postes"
>
{{ a.categorie }}
</DsText>
<DsText
v-if="a.resume"
as="p"
tone="default"
size="md"
class="musicien_card_resume"
>
{{ a.resume }}
</DsText>
<DsText
v-if="a.focusAccueil"
as="p"
tone="default"
size="sm"
class="musicien_card_focus"
>
En page d'accueil
</DsText>
</article>
</section>
<section v-else>
<DsText as="p" tone="default">Aucun article à afficher.</DsText>
</section>
</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'
//--------------------
// DONNÉES POUR LES ARTICLES DU MAG
//--------------------
const { items: articles, pending, error } = useStrapi(
"/api/__strapi__/articles_mag",
{
locale: "fr-FR",
sort: "ordre_article:asc",
pageSize: 200,
populate: {
illustration_vignette: true,
galerie_img: true,
galerie_video: true,
},
}
)
const articlesList = computed(() =>
articles.value.map((article) => ({
id: article.id,
titre: article.titre_article,
slug: article.slug_article,
focusAccueil: Boolean(article.focus_page_accueil),
categorie: article.categorie_article,
resume: article.resume_article,
image: article.illustration_vignette?.url ? article.illustration_vignette : null,
}))
)
</script>
<style lang="scss">
</style>
.maglist--page {
.remonter_articles_list {
transform: translateY(-90px);
}
.theme_bandeau--grid {
> .page-section--inner {
padding-top: 70px;
padding-bottom: 90px;
display: flex;
flex-wrap: wrap;
column-gap: 120px;
row-gap: 0px;
}
&--left {
max-width: 40%;
h1 {
padding-bottom: 0px;
}
}
&--right {
max-width: 60%;
&--text {
max-width: 500px;
}
}
}
.musiciens_list_wp {
margin-top: -120px;
}
.musiciens_list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
}
.musicien_card {
display: flex;
flex-direction: column;
gap: 10px;
}
.musicien_card_media-placeholder {
width: 100%;
aspect-ratio: 1 / 1;
background: rgba(0, 0, 0, 0.04);
}
.musicien_card_nom {
margin-top: 8px;
margin-left: 5px;
&:hover {
color: var(--c-brand_rouge);
}
}
.musicien_card_postes {
background-color: lightgray;
padding: 5px;
margin-left: 5px;
text-transform: lowercase;
&::first-letter {
text-transform: uppercase;
}
}
.musicien_card_resume {
margin-left: 5px;
max-width: 100%;
}
.musicien_card_focus {
margin-left: 5px;
text-transform: uppercase;
color: var(--c-brand_rouge);
}
@media (max-width: 980px) {
.musiciens_list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 400px) {
.musiciens_list {
grid-template-columns: 1fr;
padding-left: 5px;
padding-right: 5px;
}
}
@media (max-width: 600px) {
.musiciens_list {
padding-left: 5px;
padding-right: 5px;
}
}
}
</style>

27
app/pages/index.vue
View File

@@ -8,7 +8,7 @@
<!-- Fond noir -->
<PageSection tone="dark" content-size="default">
<SectionTitle tone="invert" pad="md">
CONCERTS À VENIR …
CONCERTS À VENIR
</SectionTitle>
</PageSection>
@@ -55,9 +55,9 @@
Faire vivre la musique symphonique au coeur du territoire et la rendre accessible à toutes et tous : telle est la mission de nos <span class="gros_chiffres">95</span> musiciennes et musiciens. L'Orchestre donne <span class="gros_chiffres">120</span> concerts par saison dans les <span class="gros_chiffres">8</span> 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">
Carte des événements
</DsButtonArrow>
<!-- <DsButtonArrow to="/" variant="invert"> -->
<!-- Carte des événements -->
<!-- </DsButtonArrow> -->
</SectionContent>
</SectionContent>
</SectionContent>
@@ -94,7 +94,7 @@
</SectionTitle>
<SectionContent pad="xs" class="theme_tao--description">
<DsText tone="invert" size="lg" class="theme_tao--txt" >
Phrase d’accroche / explicative de cette rubrique par tous et pour tous
<!-- Phrase d’accroche / explicative de cette rubrique par tous et pour tous -->
</DsText>
</SectionContent>
</SectionContent>
@@ -253,22 +253,7 @@
description: `Ce lundi 13 avril c'est le jour de sortie de la nouvelle saison 2026/2027 !`,
url:"https://www.orchestre-ile.com/concerts/saison?saison=2026/2027",
},
{
id: '2',
imgSrc: '/contenus/actu1_1.jpg',
imgAlt: 'Femme en mouvement tenant deux cymbales, l’une devant elle et l’autre derrière, sur fond de mur blanc, dans une posture dynamique évoquant la musique et le rythme',
title: "Le nouvelle saison arrive !",
description: `Ce lundi 13 avril c'est le jour de sortie de la nouvelle saison 2026/2027 !`,
url:"https://www.orchestre-ile.com/concerts/saison?saison=2026/2027",
},
{
id: '3',
imgSrc: '/contenus/actu1_1.jpg',
imgAlt: 'Femme en mouvement tenant deux cymbales, l’une devant elle et l’autre derrière, sur fond de mur blanc, dans une posture dynamique évoquant la musique et le rythme',
title: "Le nouvelle saison arrive !",
description: `Ce lundi 13 avril c'est le jour de sortie de la nouvelle saison 2026/2027 !`,
url:"https://www.orchestre-ile.com/concerts/saison?saison=2026/2027",
},
])

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

@@ -108,7 +108,7 @@
<PageSection tone="" content-size="default" padded_size="md" class="contact_spe_wp">
<ContactSpecifique
titre="Pour développer un atelier dans votre crèche"
titre="Pour nous contacter"
nom="Vanessa Gasztowtt"
poste="Responsable de l’action éducative et culturelle
et de la programmation jeune public"

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

@@ -199,7 +199,7 @@
{ 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" }
{ value: '22 000', label: "Bénéficiaires de l'action culturelle" }
]
</script>