generated from gitea_admin/default
discographie
This commit is contained in:
@@ -169,6 +169,8 @@ https://bo.orchestre-ile.com/api/actualites?populate[image_illustration_actu]=tr
|
||||
|
||||
https://bo.orchestre-ile.com/api/ressources-pedagogiques?populate[illustration_ressource]=true&populate[document_ressource]=true
|
||||
|
||||
https://bo.orchestre-ile.com/api/disques?populate[illustration_disque]=true
|
||||
|
||||
|
||||
j'ai créé le endpoint home-tous-orchestre strapi pour saisir le contenu de cards. Donc peux-tu le remplacer par ce contenu strapi ?
|
||||
|
||||
|
||||
@@ -23,20 +23,20 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-6 p-6">
|
||||
<div class="grid gap-3">
|
||||
<h3 class="text-xl font-extrabold leading-tight tracking-tight">
|
||||
<div class="ressources-card__content grid gap-6 p-6">
|
||||
<div class="ressources-card__copy grid min-w-0 gap-3">
|
||||
<h3 class="ressources-card__title min-w-0 text-xl font-extrabold leading-tight">
|
||||
{{ title }}
|
||||
</h3>
|
||||
<p
|
||||
v-if="description"
|
||||
class="text-sm"
|
||||
class="ressources-card__description min-w-0 text-sm"
|
||||
>
|
||||
{{ description }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-3">
|
||||
<div class="ressources-card__actions grid gap-3">
|
||||
<template
|
||||
v-for="action in resourceActions"
|
||||
:key="action.id || action.label"
|
||||
@@ -45,7 +45,7 @@
|
||||
v-if="action.url"
|
||||
:href="action.url"
|
||||
:download="getDownloadAttribute(action)"
|
||||
class="group flex items-center justify-between gap-4 rounded-lg border border-outline-variant/30 bg-surface-container-low px-4 py-3 text-on-surface transition-colors hover:bg-primary-container"
|
||||
class="ressources-card__action group flex items-center justify-between gap-4 rounded-lg border border-outline-variant/30 bg-surface-container-low px-4 py-3 text-on-surface transition-colors hover:bg-primary-container"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
@@ -61,16 +61,16 @@
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-primary-container text-primary transition-colors group-hover:bg-primary group-hover:text-on-primary">
|
||||
<span class="ressources-card__action-icon grid h-9 w-9 shrink-0 place-items-center rounded-full bg-primary-container text-primary transition-colors group-hover:bg-primary group-hover:text-on-primary">
|
||||
<span class="material-symbols-outlined text-xl">{{ getActionIcon(action) }}</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="flex items-center justify-between gap-4 rounded-lg border border-outline-variant/30 bg-surface-container-low px-4 py-3 text-on-surface opacity-70"
|
||||
class="ressources-card__action flex items-center justify-between gap-4 rounded-lg border border-outline-variant/30 bg-surface-container-low px-4 py-3 text-on-surface opacity-70"
|
||||
>
|
||||
<span>
|
||||
<span class="min-w-0">
|
||||
<span class="block text-sm font-bold text-primary">{{ action.label }}</span>
|
||||
<span
|
||||
v-if="action.size"
|
||||
@@ -79,7 +79,7 @@
|
||||
{{ action.size }}
|
||||
</span>
|
||||
</span>
|
||||
<span class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-surface-container text-outline">
|
||||
<span class="ressources-card__action-icon grid h-9 w-9 shrink-0 place-items-center rounded-full bg-surface-container text-outline">
|
||||
<span class="material-symbols-outlined text-xl">{{ getActionIcon(action) }}</span>
|
||||
</span>
|
||||
</div>
|
||||
@@ -196,7 +196,9 @@ function getActionIcon(action) {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ressources-card {
|
||||
width: 100%;
|
||||
max-width: 392px;
|
||||
container-type: inline-size;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
@@ -205,6 +207,51 @@ function getActionIcon(action) {
|
||||
aspect-ratio: 392 / 200;
|
||||
}
|
||||
|
||||
.ressources-card__title,
|
||||
.ressources-card__description,
|
||||
.ressources-card__action {
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.ressources-card__copy {
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@container (max-width: 320px) {
|
||||
.ressources-card__content {
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.ressources-card__copy,
|
||||
.ressources-card__actions {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.ressources-card__title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.ressources-card__description {
|
||||
font-size: 0.8125rem;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.ressources-card__action {
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.ressources-card__action-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings:
|
||||
'FILL' 0,
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
<!-- <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/direction">Direction musicale</NuxtLink></li> -->
|
||||
<li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/musiciens">Musiciennes et musiciens</NuxtLink></li>
|
||||
<li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/artistesinvitees">Les artistes invités</NuxtLink></li>
|
||||
<!-- <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/discographie">Discographie</NuxtLink></li> -->
|
||||
<li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/discographie">Discographie</NuxtLink></li>
|
||||
<li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/partenaires">Nos partenaires</NuxtLink></li>
|
||||
</ul>
|
||||
</li>
|
||||
@@ -170,7 +170,7 @@
|
||||
<!-- <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/direction">Direction musicale</NuxtLink></li> -->
|
||||
<li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/musiciens">Musiciennes et musiciens</NuxtLink></li>
|
||||
<li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/artistesinvitees">Les artistes invités</NuxtLink></li>
|
||||
<!-- <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/discographie">Discographie</NuxtLink></li> -->
|
||||
<li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/discographie">Discographie</NuxtLink></li>
|
||||
<li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/partenaires">Nos partenaires</NuxtLink></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
@@ -212,8 +212,10 @@
|
||||
|
||||
return [...new Set(values)]
|
||||
})
|
||||
console.log("saisonsFiltre.value : ",saisonsFiltre.value)
|
||||
const { concerts, refresh } = useConcerts({
|
||||
locale: "fr-FR",
|
||||
pageSize: 200,
|
||||
populate: {
|
||||
saison_concert: true,
|
||||
image_illustration_concert: true,
|
||||
|
||||
@@ -398,10 +398,20 @@ et de la programmation jeune public"
|
||||
}
|
||||
.ressources-pedagogiques__list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 392px));
|
||||
grid-template-columns: repeat(auto-fit, minmax(0, 392px));
|
||||
gap: 24px;
|
||||
justify-content: center;
|
||||
}
|
||||
@media (min-width: 400px) and (max-width: 900px) {
|
||||
.ressources-pedagogiques__list {
|
||||
grid-template-columns: repeat(2, minmax(0, 392px));
|
||||
}
|
||||
}
|
||||
@media (max-width: 399px) {
|
||||
.ressources-pedagogiques__list {
|
||||
grid-template-columns: minmax(0, 392px);
|
||||
}
|
||||
}
|
||||
.strapi-blocks {
|
||||
h2 {
|
||||
color: var(--c-bleu);
|
||||
|
||||
@@ -1,13 +1,267 @@
|
||||
<template>
|
||||
<div>
|
||||
test
|
||||
<!-- ================== -->
|
||||
<!-- EN-tête Fond noir -->
|
||||
<!-- ================== -->
|
||||
<PageSection tone="dark" content-size="default" class="theme_bandeau--grid">
|
||||
<div>
|
||||
<SectionContent pad="xs" class="">
|
||||
<SectionTitle tone="invert" pad="">
|
||||
DISCOGRAPHIE
|
||||
</SectionTitle>
|
||||
<DsHeading as="h3" tone="invert" class="max-w-[500px]">
|
||||
Collection Orchestre national d’Île-de-France chez NoMadMusic
|
||||
</DsHeading>
|
||||
</SectionContent>
|
||||
<SectionContent pad="xs" class="">
|
||||
<DsText tone="invert" size="lg" align="justify" class="theme_bandeau--grid--right--text" >
|
||||
C’est en 2016 que naît la collaboration fructueuse entre l’Orchestre national d’Île-de-France et l’innovant label NoMad Music. Depuis nombre d’enregistrements salués par la critique sont parus parmi lesquels Bel canto amore mio (2016), un album consacré à Manuel De Falla (2017), La Bien-Aimée de Darius Milhaud et L’Oiseau de feu d’Igor Stravinski (2018), Ludwig, un album consacré à Beethoven avec le pianiste Cédric Tiberghien (2018) et un autre dédié à Gustav Mahler avec le baryton Markus Werba (2019). Sont parus en janvier 2021 deux enregistrements sous la direction de Case Scaglione : la Symphonie n°3 « Eroica » de Beethoven et un disque Wagner avec la mezzo Michelle DeYoung et le ténor Simon O’Neil.
|
||||
</DsText>
|
||||
</SectionContent>
|
||||
<SectionContent pad="xs" class="">
|
||||
<DsHeading as="h3" tone="invert">
|
||||
Collection Solo chez NoMadMusic
|
||||
</DsHeading>
|
||||
</SectionContent>
|
||||
<SectionContent pad="xs" class="">
|
||||
<DsText tone="invert" size="lg" align="justify" class="theme_bandeau--grid--right--text" >
|
||||
Solo, la collection discographique créée par l’Orchestre national d’Île-de-France, a pour vocation de mettre en valeur la richesse des individualités artistiques qui composent l’Orchestre. Au travers de différents enregistrements, à raison d’un à deux par saison, des musiciennes et musiciens de l’Orchestre peuvent ainsi se produire en solo, en duo ou en petit effectif de musique de chambre et présenter des répertoires variés.
|
||||
</DsText>
|
||||
</SectionContent>
|
||||
</div>
|
||||
</PageSection>
|
||||
|
||||
<!-- ================== -->
|
||||
<!-- Listes des Disques -->
|
||||
<!-- ================== -->
|
||||
<PageSection padded_size="md" content-size="default" class="pl-2 pr-2">
|
||||
<SectionContent v-if="pending">
|
||||
<DsText>Chargement des disques...</DsText>
|
||||
</SectionContent>
|
||||
|
||||
<SectionContent v-else-if="error">
|
||||
<DsText>Impossible de charger les disques pour le moment.</DsText>
|
||||
</SectionContent>
|
||||
|
||||
<SectionContent v-else>
|
||||
<section
|
||||
v-for="collection in disquesParCollection"
|
||||
:key="collection.nom"
|
||||
class="discographie-collection"
|
||||
>
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<h3 class="text-2xl font-bold tracking-tight uppercase">{{ collection.nom }}</h3>
|
||||
<div class="h-[2px] flex-1 bg-surface-container"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<section class="flex flex-wrap gap-y-12 gap-x-6 xl:gap-8 2xl:gap-16 mb-16 w-full max-w-[88rem]">
|
||||
<article
|
||||
v-for="disque in collection.disques"
|
||||
:key="disque.id"
|
||||
class="discographie-disque w-full overflow-hidden rounded-md bg-white shadow-lg xm:max-w-[258px] sm:max-w-[278px] md:max-w-[310px] lg:max-w-[300px] xl:max-w-[345px] 2xl:max-w-[380px]"
|
||||
>
|
||||
<div class="relative flex aspect-[3/2] bg-surface-container-low">
|
||||
<div class="w-[68%] bg-surface-container-lowest">
|
||||
<img
|
||||
v-if="disque.illustration"
|
||||
:src="disque.illustration.url"
|
||||
:alt="disque.illustration.alternativeText"
|
||||
class="h-full w-full object-cover"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="discographie-disque__vinyl relative flex-1 bg-[#070707]">
|
||||
<span
|
||||
v-if="disque.sortie"
|
||||
class="absolute right-4 top-4 rounded bg-[#fff3f3] px-2.5 py-1 text-sm font-extrabold text-[#d81938]"
|
||||
>
|
||||
{{ disque.sortie }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-5">
|
||||
<h4 class="mb-1 text-2xl font-extrabold leading-tight">
|
||||
{{ disque.titre }}
|
||||
</h4>
|
||||
|
||||
<div v-if="disque.distribution.length" class="discographie-disque__meta mb-4 text-base leading-relaxed">
|
||||
<StrapiBlocksConvert :blocks="disque.distribution" />
|
||||
</div>
|
||||
<div v-if="disque.compositeurs.length" class="discographie-disque__meta mb-5 text-base leading-relaxed">
|
||||
<StrapiBlocksConvert :blocks="disque.compositeurs" />
|
||||
</div>
|
||||
|
||||
<p v-if="disque.descriptionText" class="mb-5 text-base leading-relaxed">
|
||||
{{ disque.descriptionText }}
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<a
|
||||
v-if="disque.lienNomadMusic"
|
||||
:href="disque.lienNomadMusic"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex w-full items-center justify-center gap-3 rounded-md bg-[#E20018] px-5 py-3 text-base font-extrabold text-white transition-colors hover:bg-[#e3061391]"
|
||||
>
|
||||
<span class="grid h-4 w-4 place-items-center rounded-full border border-white/80 text-[9px] leading-none">
|
||||
◉
|
||||
</span>
|
||||
<span>NoMadMusic</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
v-if="disque.lienAutre"
|
||||
:href="disque.lienAutre"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex w-full items-center justify-center gap-3 rounded-md bg-[#E20018] px-5 py-3 text-base font-extrabold text-white transition-colors hover:bg-[#e3061391]"
|
||||
>
|
||||
<span class="grid h-4 w-4 place-items-center rounded-full border border-white/80 text-[9px] leading-none">
|
||||
◉
|
||||
</span>
|
||||
<span>En savoir plus</span>
|
||||
</a>
|
||||
</div>
|
||||
</article>1
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</SectionContent>
|
||||
</PageSection>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
|
||||
import DsText from '@root/design-system/primitives/DsText.vue'
|
||||
|
||||
const { items: disquesItems, pending, error } = useStrapi(
|
||||
"/api/__strapi__/disques",
|
||||
{
|
||||
locale: "fr-FR",
|
||||
sort: "ordre_disque:asc",
|
||||
fetchAll: true,
|
||||
populate: {
|
||||
illustration_disque: true,
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
const disques = computed(() => {
|
||||
return disquesItems.value
|
||||
.map(normalizeDisque)
|
||||
.sort((a, b) => {
|
||||
if (a.ordre !== b.ordre) return a.ordre - b.ordre
|
||||
return a.titre.localeCompare(b.titre, "fr-FR")
|
||||
})
|
||||
})
|
||||
|
||||
const disquesParCollection = computed(() => {
|
||||
const collections = new Map()
|
||||
|
||||
for (const disque of disques.value) {
|
||||
const nom = disque.collection || "Autres disques"
|
||||
if (!collections.has(nom)) {
|
||||
collections.set(nom, {
|
||||
nom,
|
||||
disques: [],
|
||||
})
|
||||
}
|
||||
collections.get(nom).disques.push(disque)
|
||||
}
|
||||
|
||||
return Array.from(collections.values())
|
||||
})
|
||||
|
||||
function normalizeDisque(item) {
|
||||
return {
|
||||
id: item.documentId || item.id,
|
||||
titre: item.titre_disque || "",
|
||||
collection: item.collection_disque || "",
|
||||
sortie: item.sortie_disque || "",
|
||||
distribution: normalizeBlocks(item.distribution_disque),
|
||||
compositeurs: normalizeBlocks(item.compositeurs_disque),
|
||||
description: normalizeBlocks(item.description_disque),
|
||||
descriptionText: blocksToPlainText(item.description_disque),
|
||||
lienNomadMusic: item.lien_nomadmusic || "",
|
||||
lienAutre: item.lien_autre || "",
|
||||
ordre: Number(item.ordre_disque ?? Number.MAX_SAFE_INTEGER),
|
||||
illustration: normalizeStrapiMedia(item.illustration_disque),
|
||||
}
|
||||
}
|
||||
|
||||
function normalizeBlocks(blocks) {
|
||||
return Array.isArray(blocks) ? blocks : []
|
||||
}
|
||||
|
||||
function getFirstBlockLine(blocks) {
|
||||
const text = blocksToPlainText(blocks)
|
||||
return text.split("\n").map((line) => line.trim()).find(Boolean) || ""
|
||||
}
|
||||
|
||||
function blocksToPlainText(blocks) {
|
||||
if (!Array.isArray(blocks)) return ""
|
||||
|
||||
return blocks
|
||||
.map((block) => blockToPlainText(block))
|
||||
.filter(Boolean)
|
||||
.join("\n")
|
||||
.trim()
|
||||
}
|
||||
|
||||
function blockToPlainText(block) {
|
||||
if (!block || typeof block !== "object") return ""
|
||||
|
||||
if (Array.isArray(block.children)) {
|
||||
return block.children.map(blockToPlainText).join("")
|
||||
}
|
||||
|
||||
return typeof block.text === "string" ? block.text : ""
|
||||
}
|
||||
|
||||
function normalizeStrapiMedia(media) {
|
||||
if (!media?.url) return null
|
||||
|
||||
return {
|
||||
id: media.id || media.documentId || media.url,
|
||||
url: media.url,
|
||||
alternativeText: media.alternativeText || media.caption || "",
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.discographie-disque {
|
||||
&__vinyl::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
repeating-radial-gradient(
|
||||
circle at -18% 50%,
|
||||
rgba(255, 255, 255, 0.13) 0,
|
||||
rgba(255, 255, 255, 0.13) 1px,
|
||||
transparent 1px,
|
||||
transparent 15px
|
||||
);
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
&__meta {
|
||||
.strapi-blocks {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.strapi-blocks--p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
25
public/vinyle.svg
Normal file
25
public/vinyle.svg
Normal file
@@ -0,0 +1,25 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" aria-label="Vinyle">
|
||||
<circle cx="256" cy="256" r="230" fill="#111"/>
|
||||
<circle cx="256" cy="256" r="205" fill="none" stroke="#222" stroke-width="2"/>
|
||||
<circle cx="256" cy="256" r="170" fill="none" stroke="#2a2a2a" stroke-width="2"/>
|
||||
<circle cx="256" cy="256" r="135" fill="none" stroke="#222" stroke-width="2"/>
|
||||
<circle cx="256" cy="256" r="100" fill="none" stroke="#2a2a2a" stroke-width="2"/>
|
||||
|
||||
<circle cx="256" cy="256" r="72" fill="#d94b3d"/>
|
||||
<circle cx="256" cy="256" r="48" fill="#c93f33"/>
|
||||
<circle cx="256" cy="256" r="12" fill="#111"/>
|
||||
|
||||
<path d="M256 26a230 230 0 0 1 203 122"
|
||||
fill="none"
|
||||
stroke="#ffffff"
|
||||
stroke-width="18"
|
||||
stroke-linecap="round"
|
||||
opacity="0.10"/>
|
||||
|
||||
<path d="M162 99a185 185 0 0 1 188-8"
|
||||
fill="none"
|
||||
stroke="#ffffff"
|
||||
stroke-width="8"
|
||||
stroke-linecap="round"
|
||||
opacity="0.14"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 971 B |
@@ -24,6 +24,7 @@ const COLLECTION_MAP = {
|
||||
"home-partout-pour-tous": "/api/home-partout-pour-tous",
|
||||
"home-tous-orchestre": "/api/home-tous-orchestre",
|
||||
actualites: "/api/actualites",
|
||||
disques: "/api/disques",
|
||||
"ressources-pedagogiques": "/api/ressources-pedagogiques",
|
||||
}
|
||||
|
||||
|
||||
@@ -12,6 +12,9 @@ export default {
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
screens: {
|
||||
xm: '570px',
|
||||
},
|
||||
colors: {
|
||||
surface: '#faf8ff',
|
||||
'on-secondary-fixed-variant': '#4d5d73',
|
||||
|
||||
Reference in New Issue
Block a user