feat: restructure la page événement avec un nouveau layout et améliore les styles pour une meilleure lisibilité et adaptabilité
This commit is contained in:
parent
8116c5d0d6
commit
2f88f9a201
1 changed files with 167 additions and 58 deletions
|
|
@ -35,21 +35,37 @@ const Wrapper = lieuUrl ? 'a' : 'div'
|
|||
)}
|
||||
</div>
|
||||
|
||||
<header class="event-header">
|
||||
<h1>{nom}</h1>
|
||||
<div class="content">
|
||||
{affiche && <img alt=`Affiche de ${nom}` src={affiche?.fields.file.url} />}
|
||||
<div class="infos">
|
||||
<Card title={date ? new Date(date as string).toLocaleDateString("fr-FR") : ""}>
|
||||
<div>
|
||||
<div class="event-meta">
|
||||
<span class="event-date">{date ? new Date(date as string).toLocaleDateString("fr-FR") : ""}</span>
|
||||
{lieu && (
|
||||
<span class="event-location">
|
||||
à <Wrapper target="_blank" href={lieuUrl}>{lieu}</Wrapper>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{
|
||||
description && <article set:html={documentToHtmlString(description)} />
|
||||
}
|
||||
</Card>
|
||||
</header>
|
||||
|
||||
<div class="event-content">
|
||||
<div class="content-grid">
|
||||
{affiche && (
|
||||
<div class="affiche-section">
|
||||
<img alt=`Affiche de ${nom}` src={affiche?.fields.file.url} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div class="description-section">
|
||||
{description && (
|
||||
<div class="description-card">
|
||||
<h2>Le spectacle</h2>
|
||||
<article set:html={documentToHtmlString(description)} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{album && (
|
||||
<div class="album">
|
||||
<div class="gallery-section">
|
||||
<h2>Retour en photo</h2>
|
||||
<div class="flickr-embed">
|
||||
<iframe
|
||||
src={`${album}/player/`}
|
||||
|
|
@ -63,6 +79,7 @@ const Wrapper = lieuUrl ? 'a' : 'div'
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navigation-header">
|
||||
{evenementPrecedent && (
|
||||
|
|
@ -92,40 +109,108 @@ const Wrapper = lieuUrl ? 'a' : 'div'
|
|||
</style>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
/* Structure principale */
|
||||
.event-header {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0.2em 0.2em 1em rgba(0,0,0,0.1);
|
||||
border-left: 5px solid orange;
|
||||
}
|
||||
|
||||
.event-header h1 {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 2.5rem;
|
||||
color: rgb(17,17,17);
|
||||
}
|
||||
|
||||
.event-meta {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.content > img {
|
||||
flex: 0 0 30%;
|
||||
max-width: 30%;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.infos {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
article {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.album {
|
||||
margin: 2rem 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
max-width: 80ch; /* Même largeur max que la Card */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.album h2 {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 1rem;
|
||||
align-items: center;
|
||||
color: rgb(68,68,68);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.event-date {
|
||||
font-weight: bold;
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.event-location a {
|
||||
color: rgb(68,68,68);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.event-location a:hover {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.event-content {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
gap: 3rem;
|
||||
margin-bottom: 4rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.description-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.affiche-section {
|
||||
position: sticky;
|
||||
top: 2rem;
|
||||
}
|
||||
|
||||
.affiche-section img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0.3em 0.3em 1.5em rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.description-card {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0.2em 0.2em 1em rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.description-card h2 {
|
||||
margin: 0 0 1.5rem 0;
|
||||
color: rgb(17,17,17);
|
||||
font-size: 1.5rem;
|
||||
border-bottom: 2px solid orange;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.description-card article {
|
||||
font-size: 1.1em;
|
||||
line-height: 1.6;
|
||||
color: rgb(68,68,68);
|
||||
}
|
||||
|
||||
.gallery-section {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0.2em 0.2em 1em rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.gallery-section h2 {
|
||||
margin: 0 0 1.5rem 0;
|
||||
color: rgb(17,17,17);
|
||||
font-size: 1.5rem;
|
||||
border-bottom: 2px solid orange;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.flickr-embed {
|
||||
|
|
@ -199,18 +284,42 @@ const Wrapper = lieuUrl ? 'a' : 'div'
|
|||
transform: translateX(-3px);
|
||||
}
|
||||
|
||||
@media (max-width: 48em) {
|
||||
.content {
|
||||
flex-direction: column;
|
||||
@media (max-width: 768px) {
|
||||
.event-header {
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.content > img {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
border: black solid 0.1em;
|
||||
border-radius: 1em;
|
||||
margin: 0 auto 1em;
|
||||
box-shadow: 0.2em 0.2em 1em black;
|
||||
.event-header h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.event-meta {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.affiche-section {
|
||||
position: static;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.affiche-section img {
|
||||
max-width: 300px;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.description-card,
|
||||
.gallery-section {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.navigation-header {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue