wondif_vue/app/pages/concerts/mag.vue

<template>
  <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">

  .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>