generated from gitea_admin/default
471 lines
14 KiB
Vue
471 lines
14 KiB
Vue
<template>
|
||
|
||
<!-- ================== -->
|
||
<!-- Fond noir -->
|
||
<!-- ================== -->
|
||
<PageSection tone="dark" content-size="default">
|
||
<SectionTitle tone="invert" pad="md">
|
||
CONCERTS À VENIR …
|
||
</SectionTitle>
|
||
</PageSection>
|
||
|
||
<!-- ================== -->
|
||
<!-- Listes des prochains conncerts -->
|
||
<!-- ================== -->
|
||
<PageSection padded_size="md" content-size="default" class="remonter_concert_list">
|
||
<ConcertCardList>
|
||
<ConcertCard
|
||
id="1"
|
||
title="TITRE DU CONCERT EN MAJUSCULE"
|
||
venue="Nom du lieu, éventuellement de la salle"
|
||
dateISO="2026-01-15T20:30:00+01:00"
|
||
dateLabel="Jeudi 15 janvier 2026 — 20h30"
|
||
description="Description du concert assez courte qui reprend l'essentiel, les artistes... On pourra écrire un nombre de lettres limitées."
|
||
imageUrl="https://picsum.photos/id/56/500/700"
|
||
imageAlt="Orchestre sur scène"
|
||
ctaHref="/concert[id]"
|
||
detailsHref="/concerts/concert_template"
|
||
/>
|
||
<ConcertCard
|
||
id="1"
|
||
title="TITRE DU CONCERT EN MAJUSCULE"
|
||
venue="Nom du lieu, éventuellement de la salle"
|
||
dateISO="2026-01-15T20:30:00+01:00"
|
||
dateLabel="Jeudi 15 janvier 2026 — 20h30"
|
||
description="Description du concert assez courte qui reprend l'essentiel, les artistes... On pourra écrire un nombre de lettres limitées."
|
||
imageUrl="https://picsum.photos/id/56/500/700"
|
||
imageAlt="Orchestre sur scène"
|
||
ctaHref="/concert[id]"
|
||
detailsHref="/concerts/concert_template"
|
||
/>
|
||
<ConcertCard
|
||
id="1"
|
||
title="TITRE DU CONCERT EN MAJUSCULE"
|
||
venue="Nom du lieu, éventuellement de la salle"
|
||
dateISO="2026-01-15T20:30:00+01:00"
|
||
dateLabel="Jeudi 15 janvier 2026 — 20h30"
|
||
description="Description du concert assez courte qui reprend l'essentiel, les artistes... On pourra écrire un nombre de lettres limitées."
|
||
imageUrl="https://picsum.photos/id/56/500/700"
|
||
imageAlt="Orchestre sur scène"
|
||
ctaHref="/concert[id]"
|
||
detailsHref="/concerts/concert_template"
|
||
/>
|
||
</ConcertCardList>
|
||
</PageSection>
|
||
|
||
<!-- ================== -->
|
||
<!-- Carte Île-De-France Partout et pour tous -->
|
||
<!-- ================== -->
|
||
<PageSection padded_size="md" class="theme_ppt_wp">
|
||
<SectionContent class="theme_ppt">
|
||
<DsMedia :src="ppt_img" alt="Carte Île-De-France" class="theme_ppt--img"/>
|
||
<SectionContent tone="brand_rouge45" pad="" class="theme_ppt--content">
|
||
<SectionTitle tone="invert" pad="xs">
|
||
PARTOUT ET POUR TOUS
|
||
</SectionTitle>
|
||
<SectionContent pad="xs" class="theme_ppt--description">
|
||
<DsText tone="invert" size="lg" class="theme_ppt--txt" >
|
||
Ici le texte qui décrit le concept de Tous à l’Orchestre - Dans les régions - Ici le texte qui décrit le concept de Tous à l’Orchestre - Dans les régions - Ici le texte qui décrit le concept de Tous à l’Orchestre - Dans les régions -
|
||
</DsText>
|
||
<DsButtonArrow to="/" variant="invert">
|
||
Carte des événements
|
||
</DsButtonArrow>
|
||
</SectionContent>
|
||
</SectionContent>
|
||
</SectionContent>
|
||
</PageSection>
|
||
|
||
<!-- ================== -->
|
||
<!-- Tous à l'Orchestre -->
|
||
<!-- ================== -->
|
||
<PageSection tone="brandreverse" padded_size="md" content-size="default" padb="xs" class="theme_tao">
|
||
<SectionContent>
|
||
<SectionTitle tone="invert" pad="xs">
|
||
TOUS À L’ORCHESTRE
|
||
</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
|
||
</DsText>
|
||
</SectionContent>
|
||
</SectionContent>
|
||
|
||
<!-- LES CARTES -->
|
||
<FilteredCards />
|
||
</PageSection>
|
||
|
||
<!-- ================== -->
|
||
<!-- ACTUALITÉS -->
|
||
<!-- ================== -->
|
||
<PageSection padded_size="md">
|
||
<SectionContent>
|
||
<SectionTitle tone="" pad="xs">
|
||
LES DERNIÈRES ACTUALITÉS
|
||
</SectionTitle>
|
||
</SectionContent>
|
||
<SquareCardList >
|
||
<SquareCard
|
||
v-for="actuscard in actuscards"
|
||
:key="actuscard.id"
|
||
:id="actuscard.id"
|
||
:imgSrc="actuscard.imgSrc"
|
||
:imgAlt="actuscard.imgAlt"
|
||
:title="actuscard.title"
|
||
:description="actuscard.description"
|
||
:url="actuscard.url"
|
||
></SquareCard>
|
||
</SquareCardList>
|
||
</PageSection>
|
||
|
||
<!-- ================== -->
|
||
<!-- ONDIF MAG -->
|
||
<!-- ================== -->
|
||
<PageSection padded_size="md" position="relative" overflow="hidden" class="theme_mag">
|
||
<div class="decoration--mag"><img src="/img/decoration/ellipse_mag.svg" alt=""></div>
|
||
<SectionContent>
|
||
<SectionTitle tone="" pad="xs">
|
||
ONDIF MAG
|
||
</SectionTitle>
|
||
<SectionContent pad="xs" class="theme_tao--description">
|
||
<DsText tone="" size="lg" class="theme_tao--txt" >
|
||
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>
|
||
</SectionContent>
|
||
|
||
<SectionContent pad="xs">
|
||
<TextCardLeftList >
|
||
<TextCardLeft
|
||
v-for="magcard in magcards"
|
||
:key="magcard.id"
|
||
:id="magcard.id"
|
||
:title="magcard.title"
|
||
:description="magcard.description"
|
||
:url="magcard.url"
|
||
></TextCardLeft>
|
||
</TextCardLeftList>
|
||
</SectionContent>
|
||
</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>
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onMounted, computed } from 'vue'
|
||
import { clientLog } from '~/utils/clientLog'
|
||
import SectionContent from '../components/section/SectionContent.vue'
|
||
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'
|
||
import DsButtonArrow from '@root/design-system/primitives/DsButtonArrow.vue'
|
||
import ppt_img from '@/assets/img/illustrations/map_idf.jpg'
|
||
import DsCard from '@root/design-system/components/DsCard.vue'
|
||
|
||
// Layout utilisé
|
||
definePageMeta({ layout: 'default' })
|
||
const runtimeConfig = useRuntimeConfig()
|
||
|
||
const STRAPI_URL = runtimeConfig.public.strapiUrl
|
||
console.log("STRAPI_URL : ",STRAPI_URL)
|
||
|
||
// Config app (pour SEO)
|
||
const config = useAppConfig()
|
||
useSeoMeta({
|
||
title: config.title
|
||
})
|
||
|
||
// On récupère le fichier le plus récent de la Media Library Strapi
|
||
const { data, error } = await useFetch(
|
||
() => `${STRAPI_URL}/api/upload/files?pagination[pageSize]=1&sort=createdAt:desc`
|
||
)
|
||
|
||
const imageUrl = computed(() => {
|
||
const file = data.value?.[0]
|
||
console.log("file : ",file)
|
||
if (!file) return null
|
||
|
||
// Si Strapi renvoie une URL absolue (S3/OVH)
|
||
if (file.url?.startsWith('http')) {
|
||
return file.url
|
||
}
|
||
|
||
// Si jamais c'était une URL relative
|
||
return `${STRAPI_URL}${file.url}`
|
||
})
|
||
|
||
if (error.value) {
|
||
console.error('Erreur en récupérant les fichiers Strapi :', error.value)
|
||
clientLog('error', 'Erreur en récupérant les fichiers Strapi', {
|
||
endpoint: `${STRAPI_URL}/api/upload/files?pagination[pageSize]=1&sort=createdAt:desc`,
|
||
error: error.value?.message || error.value
|
||
})
|
||
}
|
||
|
||
const appConfig = useAppConfig()
|
||
console.log("test 3 : ",appConfig.title) // "Mon site Nuxt"
|
||
onMounted(() => {
|
||
clientLog('info', 'test de log depuis vuejs', { })
|
||
clientLog('info', `STRAPI_URL : ${STRAPI_URL}`, { strapiUrl: STRAPI_URL })
|
||
})
|
||
|
||
//--------------------
|
||
// DONNÉES POUR LES ACTUS
|
||
//--------------------
|
||
const actuscards = ref([
|
||
{
|
||
id: '1',
|
||
imgSrc: '/contenus/actu1_1.jpg',
|
||
imgAlt: 'Les prochains concours',
|
||
title: "Les prochains concours",
|
||
description: `Inscrivez-vous aux auditions de l'Orchestre national d'Île-de-France.
|
||
Un nombre maximum de caractère sera défini pour le texte qui figure dans la description de l’actu sur la page d’accueil.`,
|
||
url:"#",
|
||
},
|
||
{
|
||
id: '2',
|
||
imgSrc: '/contenus/actu1_1.jpg',
|
||
imgAlt: 'Du sur-mesure pour les petites oreilles',
|
||
title: "Du sur-mesure pour les petites oreilles",
|
||
description: `Les ateliers 0-3 ans sont de retour !`,
|
||
url:"#",
|
||
},
|
||
{
|
||
id: '3',
|
||
imgSrc: '/contenus/actu1_1.jpg',
|
||
imgAlt: "Académie d'Orchestre 2026",
|
||
title: "Académie d'Orchestre 2026",
|
||
description: `Les ateliers 0-3 ans sont de retour !`,
|
||
url:"#",
|
||
},
|
||
{
|
||
id: '4',
|
||
imgSrc: '/contenus/actu1_1.jpg',
|
||
imgAlt: "Pablo González, nouveau directeur musical pour la saison 27.28",
|
||
title: "Pablo González, nouveau directeur musical pour la saison 27.28",
|
||
description: ``,
|
||
url:"#",
|
||
},
|
||
])
|
||
|
||
//--------------------
|
||
// DONNÉES POUR ONDIF MAG
|
||
//--------------------
|
||
const magcards = ref([
|
||
{
|
||
id: '1',
|
||
title: "LA FANTASTIQUE DE BERLIOZ",
|
||
description: `L’auteur suppose qu’un jeune musicien, affecté de cette maladie morale qu’un écrivain célèbre appelle le vague des passions, voit pour la première fois une femme qui réunit tous les charmes de l’être idéal que rêvait son imagination...`,
|
||
url:"#",
|
||
},
|
||
{
|
||
id: '2',
|
||
title: "L’ITALIE BAROQUE, BERCEAU DU CONCERTO",
|
||
description: `C’est dans l’Italie baroque du début du XVIIe siècle que naît le Stile Concertato (style concertant), et plus précisément à Venise, autour des grands maîtres qui ont œuvré à la basilique Saint-Marc, comme les Gabrieli.`,
|
||
url:"#",
|
||
},
|
||
{
|
||
id: '3',
|
||
title: "BEETHOVEN : LA SYMPHONIE N°4, CHEF-D’OEUVRE À LA FOIS CLASSIQUE ET ROMANTIQUE",
|
||
description: `Avant la première exécution publique de l’œuvre au Theater an der Wien, la partition de la Quatrième symphonie de Beethoven avait d’abord été créée dans le palais du prince Lobkowitz en mars 1807.`,
|
||
url:"#",
|
||
},
|
||
])
|
||
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.remonter_concert_list {
|
||
transform: translateY(-170px);
|
||
}
|
||
|
||
.theme_ppt_wp {
|
||
margin-bottom: 50px;
|
||
// parce que le bloc du dessus à un transform: translateY(-170px); alors cela laisse un espace vide que l'on comble avec ce margin-top négatif
|
||
margin-top: -170px;
|
||
}
|
||
.theme_ppt {
|
||
display: grid;
|
||
|
||
&--img {
|
||
grid-row: 1;
|
||
grid-column: 1;
|
||
}
|
||
&--content {
|
||
grid-row: 1;
|
||
grid-column: 1;
|
||
display: grid;
|
||
align-items: center;
|
||
|
||
}
|
||
&--description {
|
||
max-width: 800px;
|
||
align-self: self-start;
|
||
// margin-top: 35px;
|
||
}
|
||
&--txt {
|
||
margin-bottom: 35px;
|
||
}
|
||
}
|
||
|
||
.theme_tao {
|
||
margin-bottom: 50px;
|
||
|
||
&--description {
|
||
max-width: 800px;
|
||
|
||
}
|
||
&--txt {
|
||
margin-bottom: 35px;
|
||
}
|
||
&--filters {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
column-gap: 10px;
|
||
row-gap: 14px;
|
||
|
||
}
|
||
&--cardlist {
|
||
margin-top: 20px;
|
||
|
||
&--card {
|
||
background-color: var(--c-surface);
|
||
border-radius: 10px;
|
||
//padding: 50px;
|
||
padding: clamp(18px, 2.4vw, 32px);
|
||
|
||
&--wp {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
&--img {
|
||
max-width: 280px;
|
||
overflow: hidden;
|
||
img {
|
||
max-height: 280px;
|
||
}
|
||
@media (min-width: 400px) {
|
||
img {
|
||
max-height: 350px;
|
||
}
|
||
}
|
||
|
||
}
|
||
&--content {
|
||
max-width: 320px;
|
||
padding-top: 20px;
|
||
}
|
||
}
|
||
|
||
|
||
&--card {
|
||
/* base: mobile-first */
|
||
width: clamp(260px, 81vw, 360px);
|
||
}
|
||
@media (min-width: 400px) {
|
||
&--card {
|
||
width: clamp(260px, 80vw, 360px);
|
||
}
|
||
}
|
||
@media (min-width: 500px) {
|
||
&--card {
|
||
width: clamp(280px, 63vw, 460px);
|
||
}
|
||
}
|
||
@media (min-width: 700px) {
|
||
&--card {
|
||
width: clamp(280px, 60vw, 460px);
|
||
}
|
||
}
|
||
@media (min-width: 1024px) {
|
||
&--card {
|
||
width: clamp(320px, 33vw, 520px);
|
||
}
|
||
}
|
||
@media (min-width: 1440px) {
|
||
&--card {
|
||
width: clamp(360px, 28vw, 560px);
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
}
|
||
|
||
}
|
||
|
||
.theme_mag {
|
||
|
||
|
||
@media (max-width: 499px) {
|
||
min-height: 650px;
|
||
}
|
||
@media (min-width: 500px) {
|
||
min-height: 650px;
|
||
}
|
||
@media (min-width: 700px) {
|
||
min-height: 650px;
|
||
}
|
||
@media (min-width: 900px) {
|
||
min-height: 650px;
|
||
}
|
||
@media (min-width: 1100px) {
|
||
min-height: 650px;
|
||
}
|
||
@media (min-width: 1300px) {
|
||
min-height: 650px;
|
||
}
|
||
@media (min-width: 1500px) {
|
||
min-height: 650px;
|
||
}
|
||
|
||
.decoration--mag {
|
||
position: absolute;
|
||
top: -20px;
|
||
|
||
@media (max-width: 499px) {
|
||
right: -150px;
|
||
}
|
||
@media (min-width: 500px) {
|
||
right: -120px;
|
||
}
|
||
@media (min-width: 700px) {
|
||
right: -100px;
|
||
}
|
||
@media (min-width: 900px) {
|
||
right: -100px;
|
||
}
|
||
@media (min-width: 1100px) {
|
||
right: -140px;
|
||
}
|
||
@media (min-width: 1300px) {
|
||
right: -100px;
|
||
}
|
||
@media (min-width: 1500px) {
|
||
right: -50px;
|
||
}
|
||
img {
|
||
height: 600px;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
</style>
|