les-particules/les-particules-org
les-particules/les-particules-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: affiche l’overlay uniquement au survol

Browse source
This commit is contained in:
Jalil Arfaoui 2025-08-11 20:00:17 +02:00
parent e915cf88dd
commit 143a75b986
2 changed files with 91 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
src/components/Affiche.astro Normal file
View file

@ -0,0 +1,88 @@
---
const { evenement, showOverlay = true } = Astro.props;
---
<a href={`/evenements/${evenement.slug}`} class="affiche-link">
<img
src={evenement.affiche.fields.file.url}
alt={`Affiche de ${evenement.nom}`}
class="affiche-thumb"
/>
{showOverlay && (
<div class="affiche-overlay">
<span class="affiche-nom">{evenement.nom}</span>
<span class="affiche-date">{new Date(evenement.date).toLocaleDateString("fr-FR")}</span>
</div>
)}
</a>
<style>
.affiche-link {
position: relative;
display: block;
overflow: hidden;
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
background: white;
}
.affiche-link:hover {
transform: translateY(-5px);
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}
.affiche-thumb {
width: 100%;
height: auto;
display: block;
aspect-ratio: 3/4;
object-fit: cover;
}
.affiche-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 60%, transparent 100%);
color: white;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
opacity: 0;
transform: translateY(10px);
transition: all 0.3s ease;
}
.affiche-link:hover .affiche-overlay {
opacity: 1;
transform: translateY(0);
}
.affiche-nom {
font-weight: bold;
font-size: 0.9rem;
line-height: 1.2;
}
.affiche-date {
font-size: 0.8rem;
opacity: 0.9;
}
@media (max-width: 480px) {
.affiche-overlay {
padding: 0.5rem;
}
.affiche-nom {
font-size: 0.75rem;
}
.affiche-date {
font-size: 0.65rem;
}
}
</style>

85
src/components/GrilleSpectaclesPassés.astro
View file

@ -1,4 +1,6 @@
---
import Affiche from "./Affiche.astro";
const { evenements, limite = 6, afficherLienVoirTout = true } = Astro.props;
const evenementsAffiches = evenements.slice(0, limite);
---
@ -8,17 +10,7 @@ const evenementsAffiches = evenements.slice(0, limite);
<div class="grille-affiches">
{evenementsAffiches.map(evenement => (
evenement.affiche && (
<a href={`/evenements/${evenement.slug}`} class="affiche-link">
<img
src={evenement.affiche.fields.file.url}
alt={`Affiche de ${evenement.nom}`}
class="affiche-thumb"
/>
<div class="affiche-overlay">
<span class="affiche-nom">{evenement.nom}</span>
<span class="affiche-date">{new Date(evenement.date).toLocaleDateString("fr-FR")}</span>
</div>
</a>
<Affiche evenement={evenement} />
)
))}
</div>
@ -40,53 +32,6 @@ const evenementsAffiches = evenements.slice(0, limite);
margin-bottom: 2rem;
}
.affiche-link {
position: relative;
display: block;
overflow: hidden;
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
background: white;
}
.affiche-link:hover {
transform: translateY(-5px);
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}
.affiche-thumb {
width: 100%;
height: auto;
display: block;
aspect-ratio: 3/4;
object-fit: cover;
}
.affiche-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
color: white;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.affiche-nom {
font-weight: bold;
font-size: 0.9rem;
line-height: 1.2;
}
.affiche-date {
font-size: 0.8rem;
opacity: 0.9;
}
.voir-tout {
display: inline-block;
margin-top: 1rem;
@ -112,18 +57,6 @@ const evenementsAffiches = evenements.slice(0, limite);
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.affiche-overlay {
padding: 0.5rem;
}
.affiche-nom {
font-size: 0.8rem;
}
.affiche-date {
font-size: 0.7rem;
}
}
@media (max-width: 480px) {
@ -131,17 +64,5 @@ const evenementsAffiches = evenements.slice(0, limite);
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.affiche-overlay {
padding: 0.4rem;
}
.affiche-nom {
font-size: 0.75rem;
}
.affiche-date {
font-size: 0.65rem;
}
}
</style>