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

décalage

Browse Source
This commit is contained in:
Julie
2026-02-24 23:58:32 +01:00
parent db365010e9
commit b0352c963c
12 changed files with 282 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
README.md
View File

@@ -8,6 +8,21 @@ Démarrer NUXT
- npm run dev
- URL : http://localhost:3000/
# Variables d'environnement
Elles sont **définies** dans `ecosystem.config.cjs` (PM2) et **consommées** dans `nuxt.config.js` via `runtimeConfig`.
Exemples de variables :
- `NUXT_PUBLIC_STRAPI_URL`
- `NUXT_PUBLIC_SAISON`
- `NUXT_STRAPI_TOKEN`
Utilisation dans le code :
- `runtimeConfig.public.saison`
- `runtimeConfig.public.strapiUrl`
Après modification de `ecosystem.config.cjs` :
- `pm2 reload ecosystem.config.cjs --only wondif_vue`
# Site de développement
## URL
https://2025.orchestre-ile.com/
@@ -42,7 +57,8 @@ cd /var/www/wondif_vue
git pull origin main # récupère le dernier code
npm ci # installe / met à jour les dépendances (à exécuter uniquement si nouvelle dépendances installées dans package json)
npm run build # rebuild Nuxt
pm2 restart wondif_vue # redémarre le process
pm2 reload ecosystem.config.cjs --only wondif_vue # redémarre le process avec les nouvelles variables d'environnement de ecosystem
# STRAPI
## URL de PROD

54
app/components/Breadcrumb.vue
View File

@@ -2,7 +2,7 @@
<div v-if="items.length > 1" aria-label="Fil d’Ariane" class="breadcrumb">
<ul class="breadcrumb__list">
<li v-for="(item, i) in items" :key="item.to" class="breadcrumb__item">
<NuxtLink v-if="i < items.length - 1" :to="item.to">
<NuxtLink v-if="i < items.length - 1 && !item.noLink" :to="item.to">
<img
v-if="i === 0"
src="/img/icones/house-grey.svg"
@@ -32,6 +32,27 @@
professionnels: "Professionnels"
}
function resolveTo(part, index, parts, acc) {
if (part === 'concerts') {
const next = parts[index + 1] || ''
if (next.startsWith('concert-')) {
const from = typeof route.query.from === 'string' ? route.query.from : ''
if (from === 'agenda') return '/concerts/agenda'
if (from === 'saison') return '/concerts/saison'
if (from === 'jeune-public') return '/concerts/jeune-public'
}
}
if (part === 'orchestre') {
const next = parts[index + 1] || ''
if (next.startsWith('artiste-') || next.startsWith('artisteinvitee-') || next.startsWith('artistesinvitees-')) {
const from = typeof route.query.from === 'string' ? route.query.from : ''
if (from === 'musiciens') return '/orchestre/musiciens'
if (from === 'artistesinvitees') return '/orchestre/artistesinvitees'
}
}
return acc
}
function humanize(segment) {
return segment
.replace(/-/g, ' ')
@@ -41,6 +62,7 @@
const items = computed(() => {
const parts = route.path.split('/').filter(Boolean)
const crumbs = [{ to: '/', label: 'Accueil' }]
const from = typeof route.query.from === 'string' ? route.query.from : ''
let acc = ''
parts.forEach((part, index) => {
@@ -50,7 +72,35 @@
? props.currentLabel
: (labelMap[part] || humanize(decodeURIComponent(part)))
crumbs.push({ to: acc, label })
const noLink = part === 'orchestre' || part === 'concerts'
crumbs.push({ to: resolveTo(part, index, parts, acc), label, noLink })
if (part === 'concerts') {
const next = parts[index + 1] || ''
if (next.startsWith('concert-')) {
if (from === 'agenda') {
crumbs.push({ to: '/concerts/agenda', label: 'Agenda' })
}
if (from === 'saison') {
crumbs.push({ to: '/concerts/saison', label: 'Saison' })
}
if (from === 'jeune-public') {
crumbs.push({ to: '/concerts/jeune-public', label: 'Jeune public' })
}
}
}
if (part === 'orchestre') {
const next = parts[index + 1] || ''
if (next.startsWith('artiste-') || next.startsWith('artisteinvitee-')) {
if (from === 'musiciens') {
crumbs.push({ to: '/orchestre/musiciens', label: 'Les musiciens' })
}
if (from === 'artistesinvitees') {
crumbs.push({ to: '/orchestre/artistesinvitees', label: 'Les artistes invités' })
}
}
}
})
return crumbs

2
app/components/concert/ConcertCard.vue
View File

@@ -49,7 +49,7 @@
defineProps({
id: { type: [String, Number], required: true },
title: { type: String, required: true },
lieu: { type: String, required: true },
lieu: { type: String, default: '' },
dateISO: { type: String, required: true }, // ex: "2026-01-15T20:00:00+01:00"
dateLabel: { type: String, required: true }, // ex: "Jeu. 15 jan. 2026 — 20h"
description: { type: String, default: '' },

158
app/components/section/Decalage.vue Normal file
View File

@@ -0,0 +1,158 @@
<template>
<div class="decalage_cont"
:class="[
`decalage_cont--${position}`
]""
>
<div class="decalage"
:class="[
`decalage--${tone}`,
`decalage--${position}`
]"
>
<div class="decalage_inner">
<DsHeading v-if="$slots.title" :tone=titleTone as="h2" textcase="uppercase">
<slot name="title" />
</DsHeading>
<slot />
<div v-if="$slots.button" class="decalage_button">
<slot name="button" />
</div>
<div v-if="ensavoirplusTarget" class="decalage_button">
<DsButton :textColor=buttonTone :borderColor="buttonTone" @click="toggleTarget(ensavoirplusTarget)">En savoir +</DsButton>
</div>
</div>
</div>
</div>
</template>
<script setup>
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
import DsText from '@root/design-system/primitives/DsText.vue'
import DsButton from '@root/design-system/primitives/DsButton.vue'
defineProps({
tone: { type: String, default: 'default' },
titleTone: { type: String, default: 'default' },
buttonTone: { type: String, default: 'default' },
position: { type: String, default: 'left' },
ensavoirplusTarget: { type: String, default: '' }
})
function toggleTarget(ensavoirplusTarget) {
document.getElementById(ensavoirplusTarget).classList.toggle("decalage_ensavoirplus--hidden");
}
</script>
<style lang="scss">
.decalage_cont {
margin-bottom: 70px;
display: flex;
&--left {
justify-content: flex-start;
}
&--right {
justify-content: flex-end;
}
}
.decalage {
padding-top: 50px;
padding-bottom: 50px;
display: flex;
@media (min-width: 0px) and (max-width: 700px) {
width: 89vw;
}
@media (min-width: 700px) {
width: 67vw;
}
@media (min-width: 800px) {
width: 50vw;
}
/* tons = arrière-plan section */
&--default { background: transparent; }
&--brand { background: var(--c-brand_rouge);}
&--dark { background: var(--c-backgroud-black); }
&--brandreverse { background: var(--c-backgroud-brandreverse); }
&--jaune { background: var(--c-background-jaune); }
/* position = arrière-plan section */
&--right {
.decalage_inner {
padding-left: 50px;
@media (max-width: 599px) {
padding-left: 40px;
}
}
}
&--left {
justify-content: flex-end;
.decalage_inner {
padding-right: 50px;
@media (max-width: 599px) {
padding-right: 40px;
}
}
}
}
.decalage_inner {
@media (min-width: 0px) {
width: 100%;
}
@media (min-width: 600px) {
width: calc(290px + 39vw);
}
@media (min-width: 700px) {
width: calc(330px + 17vw);
}
@media (min-width: 800px) {
width: 390px;
}
@media (min-width: 900px) {
width: 430px;
}
@media (min-width: 1000px) {
width: 475px;
}
@media (min-width: 1100px) {
width: 510px;
}
@media (min-width: 1200px) {
width: 550px;
}
@media (min-width: 1300px) {
width: 600px;
}
@media (min-width: 1400px) {
width: 650px;
}
@media (min-width: 1500px) {
width: 700px;
}
}
.decalage_button {
margin-top: 10px;
text-align: right;
}
.decalage_ensavoirplus--hidden {
display: none;
}
</style>

2
app/pages/concerts/agenda.vue
View File

@@ -20,7 +20,7 @@
:description="c.resume_concert"
:imageUrl="c.image_illustration_concert?.url"
:imageAlt="c.image_illustration_concert?.alternativeText"
:href="`concert-${c.slug_concert}`"
:href="`concert-${c.slug_concert}?from=agenda`"
/>
</ConcertCardList>
</PageSection>

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

@@ -654,7 +654,10 @@
margin-bottom: 70px;
padding-top: 50px;
padding-right: 30px;
padding-left: 50px;
@media (max-width: 599px) {
padding-left: 40px;
}
padding-bottom: 50px;
/* DÉCALAGE DU BLOC VERS LA DROITE */

2
app/pages/concerts/jeune-public.vue
View File

@@ -20,7 +20,7 @@
:description="c.resume_concert"
:imageUrl="c.image_illustration_concert?.url"
:imageAlt="c.image_illustration_concert?.alternativeText"
:href="`concert-${c.slug_concert}`"
:href="`concert-${c.slug_concert}?from=jeune-public`"
/>
</ConcertCardList>
</PageSection>

2
app/pages/concerts/saison.vue
View File

@@ -20,7 +20,7 @@
:description="c.resume_concert"
:imageUrl="c.image_illustration_concert?.url"
:imageAlt="c.image_illustration_concert?.alternativeText"
:href="`concert-${c.slug_concert}`"
:href="`concert-${c.slug_concert}?from=saison`"
/>
</ConcertCardList>
</PageSection>

2
app/pages/index.vue
View File

@@ -26,7 +26,7 @@
:description="c.resume_concert"
:imageUrl="c.image_illustration_concert?.url"
:imageAlt="c.image_illustration_concert?.alternativeText"
:href="`/concerts/concert-${c.slug_concert}`"
:href="`/concerts/concert-${c.slug_concert}?from=agenda`"
/>
</ConcertCardList>
</PageSection>

4
app/pages/orchestre/artistesinvitees.vue
View File

@@ -51,7 +51,7 @@
<div v-else class="musicien_card_media-placeholder" aria-hidden="true" />
<DsHeading as="h4" tone="default" class="musicien_card_nom">
<NuxtLink :to="`/orchestre/artisteinvitee-${a.slug_artiste_invite}`">
<NuxtLink :to="`/orchestre/artisteinvitee-${a.slug_artiste_invite}?from=artistesinvitees`">
{{ a.nom_artiste_invite }}
</NuxtLink>
</DsHeading>
@@ -99,7 +99,7 @@
<div v-else class="musicien_card_media-placeholder" aria-hidden="true" />
<DsHeading as="h4" tone="default" class="musicien_card_nom">
<NuxtLink :to="`/orchestre/artistesinvitees-${a.slug_artiste_invite}`">
<NuxtLink :to="`/orchestre/artisteinvitee-${a.slug_artiste_invite}?from=artistesinvitees`">
{{ a.nom_artiste_invite }}
</NuxtLink>
</DsHeading>

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

@@ -1,10 +1,48 @@
<template>
<div>
Page en construction Missions
<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>
<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>
</template>
<script setup>
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
import DsText from '@root/design-system/primitives/DsText.vue'
import DsButton from '@root/design-system/primitives/DsButton.vue'
</script>

4
app/pages/orchestre/musiciens.vue
View File

@@ -51,7 +51,7 @@
<div v-else class="musicien_card_media-placeholder" aria-hidden="true" />
<DsHeading as="h4" tone="default" class="musicien_card_nom">
<NuxtLink :to="`/orchestre/artiste-${a.slug_artiste_ondif}`">
<NuxtLink :to="`/orchestre/artiste-${a.slug_artiste_ondif}?from=musiciens`">
{{ a.nom_artiste_ondif }}
</NuxtLink>
</DsHeading>
@@ -99,7 +99,7 @@
<div v-else class="musicien_card_media-placeholder" aria-hidden="true" />
<DsHeading as="h4" tone="default" class="musicien_card_nom">
<NuxtLink :to="`/orchestre/artiste-${a.slug_artiste_ondif}`">
<NuxtLink :to="`/orchestre/artiste-${a.slug_artiste_ondif}?from=musiciens`">
{{ a.nom_artiste_ondif }}
</NuxtLink>
</DsHeading>