ajout de dev front

2026-04-03 12:06:43 +02:00
parent bc6ad43ea5
commit 3f3f939267
47 changed files with 1302 additions and 188 deletions
--- a/app/pages/orchestre/artiste-[id].vue
+++ b/app/pages/orchestre/artiste-[id].vue
@@ -653,7 +653,7 @@
    padding-left: 10px;
    padding-right: 10px;
    > * {
-      max-width: 570px;
+      max-width: 640px;
      display: flex;
      flex-direction: column;
    }
--- a/app/pages/orchestre/artisteinvitee-[id].vue
+++ b/app/pages/orchestre/artisteinvitee-[id].vue
@@ -651,7 +651,7 @@
    padding-left: 10px;
    padding-right: 10px;
    > * {
-      max-width: 570px;
+      max-width: 640px;
      display: flex;
      flex-direction: column;
    }
--- a/app/pages/orchestre/artistesinvitees.vue
+++ b/app/pages/orchestre/artistesinvitees.vue
@@ -9,7 +9,6 @@
          LES ARTISTES INVITÉS
        </SectionTitle>
        <DsHeading as="h3" tone="invert">
-          La patte de l’Orchestre national d’Île-de-France, c’est aussi la richesse de ses collaborations artistiques
        </DsHeading>
      </SectionContent>

@@ -237,16 +236,16 @@
  .theme_bandeau--grid {
    > .page-section--inner {
      padding-top: 70px;
-      padding-bottom: 150px;
+      padding-bottom: 90px;
      display: flex;
      flex-wrap: wrap;
      column-gap: 120px;
-      row-gap: 30px;
+      row-gap: 0px;
    }
    &--left {
      max-width: 40%;
      h1 {
-        padding-bottom: 20px;
+        padding-bottom: 0px;
      }
    }
    &--right {
--- a/app/pages/orchestre/direction.vue
+++ b/app/pages/orchestre/direction.vue
@@ -8,6 +8,6 @@

 </script>

-<style>
+<style lang="scss">

 </style>
--- a/app/pages/orchestre/discographie.vue
+++ b/app/pages/orchestre/discographie.vue
@@ -8,6 +8,6 @@

 </script>

-<style>
+<style lang="scss">

 </style>
--- a/app/pages/orchestre/missions.vue
+++ b/app/pages/orchestre/missions.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="missions--page">
        <!-- ================== -->
        <!-- FILS D'ARIANE -->
        <!-- ================== -->
@@ -30,7 +30,7 @@
                v-if="missions?.image_illustration_header?.url"
                :src="missions.image_illustration_header.url"
                :alt="missions.image_illustration_header.alternativeText || ''"
-                fit="contain"
+                fit="cover"
                ratio="square"
              />

@@ -51,6 +51,15 @@
          </SectionContent>
        </PageSection>

+        <!-- ================== -->
+        <!-- CHIFFRES -->
+        <!-- ================== -->
+        <PageSection tone="" content-size="default" padded_size="md" class="chiffres_wp">
+            <Chiffres />
+        </PageSection>
+
+
+
        <!-- ================== -->
        <!-- decalage_gauche 1 -->
        <!-- ================== -->
@@ -229,7 +238,6 @@
    }
  }
  .fiche_header_wp_gauche_carre {
-    
    @media (min-width: 0px) and (max-width: 600px) {
      display: none;
    }
@@ -239,7 +247,6 @@
    }
  }
  .fiche_header_wp_droite {
-
    @media (min-width: 0px) and (max-width: 600px) {
      display: none;
    }
@@ -331,7 +338,6 @@
  }

  .fiche_header_titres {
-    
    @media (min-width: 0px) and (max-width: 600px) {
      grid-column: 1;
      grid-row: 1;
@@ -395,7 +401,6 @@
  }

  .fiche_header_img {
-    
    @media (min-width: 0px) and (max-width: 600px) {
      grid-column: 1 / 4;
      grid-row: 2 / 3;
@@ -415,7 +420,6 @@
  }

  .fiche_header_infos {
-
    @media (min-width: 0px) and (max-width: 600px) {
      grid-column: 1 / 2;
      grid-row: 4;
@@ -443,7 +447,6 @@
    }
  }
  .fiche_header_bandeau {
-
    @media (min-width: 0px) and (max-width: 600px) {
      grid-column: 1 / 3;
      grid-row: 4;
@@ -457,18 +460,27 @@
  }

  .fiche_description > * {
-    max-width: 570px;
+    max-width: 640px;
    display: flex;
    flex-direction: column;
  }
  .fiche_description {
    .page-section--inner {
-
      @media (max-width: 599px) {
-          padding-left: 10px;
-          padding-right: 10px;
+        padding-left: 10px;
+        padding-right: 10px;
      }
    }
  }

+// =======================
+// SPÉCIFIQUE À CETTE PAGE
+// =======================
+.missions--page {
+  .chiffres_wp {
+    background-color: #31ae13c2;
+    margin-bottom: 50px;
+  }
+}
+
 </style>
--- a/app/pages/orchestre/musiciens
+++ b/app/pages/orchestre/musiciens
@@ -0,0 +1,320 @@
+<template>
+  <div>
+    <!-- ================== -->
+    <!-- Fond noir -->
+    <!-- ================== -->
+    <PageSection tone="dark" content-size="default" class="theme_bandeau--grid">
+      <SectionContent pad="xs" class="theme_bandeau--grid--left">
+        <SectionTitle tone="invert" pad="">
+          LES MUSICIENS
+        </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" >
+          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.
+        </DsText>
+      </SectionContent>
+    </PageSection>
+
+    <!-- ================== -->
+    <!-- Listes des musiciens -->
+    <!-- ================== -->
+
+    <!-- ================== -->
+    <!-- DIRECTION -->
+    <!-- ================== -->
+
+    <PageSection padded_size="md" content-size="default" class="musiciens_list_section remonter_artistes_list">
+
+
+      <section v-if="pending" aria-busy="true" aria-live="polite">
+        <DsText as="p" tone="default">Chargement des artistes...</DsText>
+      </section>
+
+      <section v-else-if="error">
+        <DsText as="p" tone="default">Impossible de charger les artistes.</DsText>
+      </section>
+
+      <section v-else-if="artistesDirection.length" class="musiciens_list">
+        <article v-for="a in artistesDirection" :key="a.id" class="musicien_card">
+          <DsMedia
+            v-if="a.image?.url"
+            :src="a.image.url"
+            :alt="a.image.alternativeText || a.nom_artiste_ondif || ''"
+            ratio="square"
+          />
+          <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}?from=musiciens`">
+              {{ a.nom_artiste_ondif }}
+            </NuxtLink>
+          </DsHeading>
+
+          <DsText
+            v-if="a.postesLabel"
+            as="p"
+            tone="default"
+            size="md"
+            class="musicien_card_postes"
+          >
+            {{ a.postesLabel }}
+          </DsText>
+        </article>
+      </section>
+
+      <section v-else>
+        <DsText as="p" tone="default">Aucun artiste pour la direction.</DsText>
+      </section>
+    </PageSection>
+
+    <!-- ================== -->
+    <!-- MUSICIENS -->
+    <!-- ================== -->
+
+    <PageSection padded_size="md" content-size="default" class="musiciens_list_section musiciens_list_wp">
+
+
+      <section v-if="pending" aria-busy="true" aria-live="polite">
+        <DsText as="p" tone="default">Chargement des artistes...</DsText>
+      </section>
+
+      <section v-else-if="error">
+        <DsText as="p" tone="default">Impossible de charger les artistes.</DsText>
+      </section>
+
+      <section v-else-if="artistesAutres.length" class="musiciens_list">
+        <article v-for="a in artistesAutres" :key="a.id" class="musicien_card">
+          <DsMedia
+            v-if="a.image?.url"
+            :src="a.image.url"
+            :alt="a.image.alternativeText || a.nom_artiste_ondif || ''"
+            ratio="square"
+          />
+          <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}?from=musiciens`">
+              {{ a.nom_artiste_ondif }}
+            </NuxtLink>
+          </DsHeading>
+
+          <DsText
+            v-if="a.postesLabel"
+            as="p"
+            tone="default"
+            size="md"
+            class="musicien_card_postes"
+          >
+            {{ a.postesLabel }}
+          </DsText>
+        </article>
+      </section>
+
+      <section v-else>
+        <DsText as="p" tone="default">Aucun autre artiste trouvé.</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'
+  const runtimeConfig = useRuntimeConfig()
+  const saisonFiltre = computed(() => String(runtimeConfig.public.saison || '').trim())
+  const artistesFilters = computed(() => {
+    if (!saisonFiltre.value) return null
+    return {
+      saisons_artiste_ondif: {
+        nom_saison: {
+          $eq: saisonFiltre.value,
+        },
+      },
+    }
+  })
+
+  //--------------------
+  // DONNÉES POUR LES ARTISTES
+  //--------------------
+  const { items: artistes, pending, error } = useStrapi(
+      "/api/__strapi__/artistes",
+      {
+        locale: "fr-FR",
+        sort: "ordre_artiste_ondif:asc",
+        populate: {
+            saisons_artiste_ondif: true,
+            image_illustration_artiste_ondif: true,
+            postes_artiste_ondif: true,
+        },
+        filters: artistesFilters,
+      }
+  )
+
+  const artistesDisplay = computed(() => {
+    return (artistes.value || []).map((artiste) => ({
+      ...artiste,
+      image: getArtisteImage(artiste),
+      postesLabel: getPostesLabel(artiste),
+    }))
+  })
+
+  const postesDirection = [
+    "direction",
+    "cheffe assistante",
+    "chef assistante",
+  ]
+
+  const artistesDirection = computed(() =>
+    artistesDisplay.value.filter((a) => isDirectionArtist(a))
+  )
+
+  const artistesAutres = computed(() =>
+    artistesDisplay.value.filter((a) => !isDirectionArtist(a))
+  )
+
+  function getArtisteImage(artiste) {
+    const media = artiste?.image_illustration_artiste_ondif
+    const rows = extractStrapiList(media)
+    if (rows.length) return rows[0]
+    if (media && typeof media === "object" && media.url) return media
+    return null
+  }
+
+  function getPostesLabel(artiste) {
+    const postes = extractStrapiList(artiste?.postes_artiste_ondif)
+    return postes
+      .map((p) => p?.nom_poste)
+      .filter(Boolean)
+      .join(", ")
+  }
+
+  function isDirectionArtist(artiste) {
+    const postes = extractStrapiList(artiste?.postes_artiste_ondif)
+      .map((p) => String(p?.nom_poste || "").trim().toLowerCase())
+      .filter(Boolean)
+
+    return postes.some((poste) => postesDirection.includes(poste))
+  }
+
+  function extractStrapiList(value) {
+    if (!value) return []
+    if (Array.isArray(value)) return value.map(normalizeStrapiItem).filter(Boolean)
+    if (value?.data) {
+      const rows = Array.isArray(value.data) ? value.data : [value.data]
+      return rows.map(normalizeStrapiItem).filter(Boolean)
+    }
+    if (typeof value === "object") return [normalizeStrapiItem(value)].filter(Boolean)
+    return []
+  }
+
+  function normalizeStrapiItem(item) {
+    if (!item || typeof item !== "object") return null
+    if (item.attributes && typeof item.attributes === "object") {
+      return { id: item.id, ...item.attributes }
+    }
+    return item
+  }
+
+
+</script>
+
+<style lang="scss">
+
+
+  .remonter_artistes_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: 30px;
+    }
+    &--left {
+      max-width: 40%;
+      h1 {
+        padding-bottom: 20px;
+      }
+    }
+    &--right {
+      max-width: 60%;
+      &--text {
+        max-width: 500px;
+      }
+    }
+  }
+
+  .musiciens_list_wp {
+    // 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: -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 {
+    margin-left: 5px;
+    text-transform: lowercase;
+    &::first-letter {
+      text-transform: uppercase;
+    }
+  }
+
+
+
+  @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>
--- a/app/pages/orchestre/musiciens.vue
+++ b/app/pages/orchestre/musiciens.vue
@@ -3,20 +3,20 @@
    <!-- ================== -->
    <!-- Fond noir -->
    <!-- ================== -->
-    <PageSection tone="bleu" content-size="default" class="theme_bandeau--grid">
+    <PageSection tone="dark" content-size="default" class="theme_bandeau--grid">
      <SectionContent pad="xs" class="theme_bandeau--grid--left">
        <SectionTitle tone="invert" pad="">
          LES MUSICIENS
        </SectionTitle>
        <DsHeading as="h3" tone="invert">
-          95 musiciens engagés Partout et pour tous en Île-de-France !
+          
        </DsHeading>
      </SectionContent>


      <SectionContent pad="xs" class="theme_bandeau--grid--right">
        <DsText tone="invert" size="lg" class="theme_bandeau--grid--right--text" >
-          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.
+          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.
        </DsText>
      </SectionContent>
    </PageSection>
@@ -66,6 +66,33 @@
            {{ a.postesLabel }}
          </DsText>
        </article>
+
+        <!-- ICI ON MET À LA SUITE LES MUSICIENS DE L'ORCHESTRE -->
+        <article v-for="a in artistesAutres" :key="a.id" class="musicien_card">
+          <DsMedia
+            v-if="a.image?.url"
+            :src="a.image.url"
+            :alt="a.image.alternativeText || a.nom_artiste_ondif || ''"
+            ratio="square"
+          />
+          <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}?from=musiciens`">
+              {{ a.nom_artiste_ondif }}
+            </NuxtLink>
+          </DsHeading>
+
+          <DsText
+            v-if="a.postesLabel"
+            as="p"
+            tone="default"
+            size="md"
+            class="musicien_card_postes"
+          >
+            {{ a.postesLabel }}
+          </DsText>
+        </article>
      </section>

      <section v-else>
@@ -237,16 +264,16 @@
  .theme_bandeau--grid {
    > .page-section--inner {
      padding-top: 70px;
-      padding-bottom: 150px;
+      padding-bottom: 90px;
      display: flex;
      flex-wrap: wrap;
      column-gap: 120px;
-      row-gap: 30px;
+      row-gap: 0px;
    }
    &--left {
      max-width: 40%;
      h1 {
-        padding-bottom: 20px;
+        padding-bottom: 0px;
      }
    }
    &--right {
--- a/app/pages/orchestre/partenaires.vue
+++ b/app/pages/orchestre/partenaires.vue
@@ -8,6 +8,6 @@

 </script>

-<style>
+<style lang="scss">

 </style>
--- a/app/pages/orchestre/soutenir.vue
+++ b/app/pages/orchestre/soutenir.vue
@@ -8,6 +8,6 @@

 </script>

-<style>
+<style lang="scss">

 </style>