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,32 +35,49 @@ const Wrapper = lieuUrl ? 'a' : 'div'
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1>{nom}</h1>
|
<header class="event-header">
|
||||||
<div class="content">
|
<h1>{nom}</h1>
|
||||||
{affiche && <img alt=`Affiche de ${nom}` src={affiche?.fields.file.url} />}
|
<div class="event-meta">
|
||||||
<div class="infos">
|
<span class="event-date">{date ? new Date(date as string).toLocaleDateString("fr-FR") : ""}</span>
|
||||||
<Card title={date ? new Date(date as string).toLocaleDateString("fr-FR") : ""}>
|
{lieu && (
|
||||||
<div>
|
<span class="event-location">
|
||||||
à <Wrapper target="_blank" href={lieuUrl}>{lieu}</Wrapper>
|
à <Wrapper target="_blank" href={lieuUrl}>{lieu}</Wrapper>
|
||||||
</div>
|
</span>
|
||||||
{
|
)}
|
||||||
description && <article set:html={documentToHtmlString(description)} />
|
</div>
|
||||||
}
|
</header>
|
||||||
</Card>
|
|
||||||
|
|
||||||
{album && (
|
<div class="event-content">
|
||||||
<div class="album">
|
<div class="content-grid">
|
||||||
<div class="flickr-embed">
|
{affiche && (
|
||||||
<iframe
|
<div class="affiche-section">
|
||||||
src={`${album}/player/`}
|
<img alt=`Affiche de ${nom}` src={affiche?.fields.file.url} />
|
||||||
width="100%"
|
|
||||||
height="500"
|
|
||||||
frameborder="0"
|
|
||||||
allowfullscreen
|
|
||||||
></iframe>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
<div class="description-section">
|
||||||
|
{description && (
|
||||||
|
<div class="description-card">
|
||||||
|
<h2>Le spectacle</h2>
|
||||||
|
<article set:html={documentToHtmlString(description)} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{album && (
|
||||||
|
<div class="gallery-section">
|
||||||
|
<h2>Retour en photo</h2>
|
||||||
|
<div class="flickr-embed">
|
||||||
|
<iframe
|
||||||
|
src={`${album}/player/`}
|
||||||
|
width="100%"
|
||||||
|
height="500"
|
||||||
|
frameborder="0"
|
||||||
|
allowfullscreen
|
||||||
|
></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -92,40 +109,108 @@ const Wrapper = lieuUrl ? 'a' : 'div'
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<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;
|
display: flex;
|
||||||
gap: 2rem;
|
gap: 2rem;
|
||||||
align-items: flex-start;
|
align-items: center;
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
color: rgb(68,68,68);
|
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 {
|
.flickr-embed {
|
||||||
|
|
@ -199,18 +284,42 @@ const Wrapper = lieuUrl ? 'a' : 'div'
|
||||||
transform: translateX(-3px);
|
transform: translateX(-3px);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 48em) {
|
@media (max-width: 768px) {
|
||||||
.content {
|
.event-header {
|
||||||
flex-direction: column;
|
padding: 1.5rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content > img {
|
.event-header h1 {
|
||||||
width: 100%;
|
font-size: 2rem;
|
||||||
max-width: 400px;
|
}
|
||||||
border: black solid 0.1em;
|
|
||||||
border-radius: 1em;
|
.event-meta {
|
||||||
margin: 0 auto 1em;
|
flex-direction: column;
|
||||||
box-shadow: 0.2em 0.2em 1em black;
|
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 {
|
.navigation-header {
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue