generated from gitea_admin/default
dev
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user