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

discographie

Browse Source
This commit is contained in:
Julie
2026-06-14 16:02:36 +02:00
parent 29914a1041
commit 25a175f89d
9 changed files with 383 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
app/components/RessourcesCard.vue
View File

@@ -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,

4
app/components/header/HeaderNav.vue
View File

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