Ajout section Explorer sous le diaporama /photo et factorisation HeroViewport
La page /photo affiche maintenant une flèche de scroll invitant à découvrir une section de navigation avec les catégories et le fil photo en dessous du diaporama, avec un dégradé progressif entre les deux. Le pattern "hero viewport + scroll indicator" est factorisé dans un composant HeroViewport réutilisable, utilisé par /photo (mode transparent), les albums de catégories et les posts du fil photo.
This commit is contained in:
parent
c80e2bd386
commit
cd1ca94b11
5 changed files with 218 additions and 31 deletions
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
import { Picture } from 'astro:assets';
|
||||
import ScrollIndicator from './ScrollIndicator.astro';
|
||||
import HeroViewport from './HeroViewport.astro';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
|
|
@ -15,25 +15,26 @@ const { title, description, date, tags, coverImage, scrollTarget = '.info-sectio
|
|||
---
|
||||
|
||||
{coverImage && (
|
||||
<div class="hero-image">
|
||||
<Picture src={coverImage} alt={title} widths={[800, 1200, 1920]} formats={['webp']} />
|
||||
<div class="hero-overlay">
|
||||
<div class="hero-content">
|
||||
<h1 class="album-title">{title}</h1>
|
||||
{description && <p class="album-description">{description}</p>}
|
||||
{date && (
|
||||
<time class="album-date">
|
||||
{date.toLocaleDateString('fr-FR', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}
|
||||
</time>
|
||||
)}
|
||||
<HeroViewport targetSelector={scrollTarget}>
|
||||
<div class="hero-image">
|
||||
<Picture src={coverImage} alt={title} widths={[800, 1200, 1920]} formats={['webp']} />
|
||||
<div class="hero-overlay">
|
||||
<div class="hero-content">
|
||||
<h1 class="album-title">{title}</h1>
|
||||
{description && <p class="album-description">{description}</p>}
|
||||
{date && (
|
||||
<time class="album-date">
|
||||
{date.toLocaleDateString('fr-FR', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}
|
||||
</time>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<ScrollIndicator targetSelector={scrollTarget} />
|
||||
</div>
|
||||
</div>
|
||||
</HeroViewport>
|
||||
)}
|
||||
|
||||
{tags && tags.length > 0 && (
|
||||
|
|
@ -47,10 +48,13 @@ const { title, description, date, tags, coverImage, scrollTarget = '.info-sectio
|
|||
)}
|
||||
|
||||
<style>
|
||||
:global(.hero-viewport) {
|
||||
--hero-height: calc(100vh - var(--header-height, 53px) - var(--footer-height, 54px));
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
width: 100%;
|
||||
height: calc(100vh - var(--header-height, 53px) - var(--footer-height, 54px));
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
import CategoryNav from './CategoryNav.astro';
|
||||
import ScrollIndicator from './ScrollIndicator.astro';
|
||||
import HeroViewport from './HeroViewport.astro';
|
||||
import Lightbox from './Lightbox.astro';
|
||||
import { Picture } from 'astro:assets';
|
||||
import { getEntry } from 'astro:content';
|
||||
|
|
@ -49,7 +49,7 @@ const lightboxImages = images.map(img => ({
|
|||
<CategoryNav currentCategory={category} opaque={true} />
|
||||
|
||||
<!-- Image hero avec titre en overlay -->
|
||||
<header class="hero-cover">
|
||||
<HeroViewport targetSelector="#thumbnails">
|
||||
<div class="hero-image">
|
||||
{images[0] && <Picture src={images[0].src} alt={images[0].alt} widths={[800, 1200, 1920]} formats={['webp']} class="hero-bg" />}
|
||||
<div class="hero-overlay">
|
||||
|
|
@ -61,10 +61,9 @@ const lightboxImages = images.map(img => ({
|
|||
<p class="hero-subtitle">{categoryData.data.subtitle}</p>
|
||||
)}
|
||||
</div>
|
||||
<ScrollIndicator targetSelector="#thumbnails" />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</HeroViewport>
|
||||
|
||||
<!-- Grille de thumbnails -->
|
||||
<div id="thumbnails" class="thumbnails-grid">
|
||||
|
|
@ -144,11 +143,8 @@ document.addEventListener('scroll', onScroll);
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.hero-cover {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100vh - var(--header-height) - var(--footer-height));
|
||||
overflow: hidden;
|
||||
.category-container :global(.hero-viewport) {
|
||||
--hero-height: calc(100vh - var(--header-height) - var(--footer-height));
|
||||
margin-top: var(--header-height);
|
||||
}
|
||||
|
||||
|
|
|
|||
150
src/components/photo/ExploreSection.astro
Normal file
150
src/components/photo/ExploreSection.astro
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
---
|
||||
import { getCollection } from 'astro:content';
|
||||
|
||||
const photoCategories = await getCollection('photoCategories');
|
||||
const sortedCategories = photoCategories.sort((a, b) => (a.data.order || 99) - (b.data.order || 99));
|
||||
---
|
||||
|
||||
<section id="explore-section" class="explore-section">
|
||||
<div class="explore-content">
|
||||
<div class="explore-card">
|
||||
<h2 class="explore-card-title">Catégories</h2>
|
||||
<p class="explore-card-desc">Parcourir les photos par thème</p>
|
||||
<ul class="category-list">
|
||||
{sortedCategories.map(cat => (
|
||||
<li>
|
||||
<a href={`/photo/albums/${cat.id}`} class="category-link">
|
||||
{cat.data.title}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="explore-card">
|
||||
<h2 class="explore-card-title">Fil Photo</h2>
|
||||
<p class="explore-card-desc">Parcourir les séries chronologiques, reportages et histoires en images</p>
|
||||
<a href="/photo/blog" class="explore-cta">
|
||||
Voir le fil
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="5" y1="12" x2="19" y2="12"/>
|
||||
<polyline points="12 5 19 12 12 19"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.explore-section {
|
||||
position: relative;
|
||||
background: #000;
|
||||
z-index: 20;
|
||||
padding: 4rem 2rem;
|
||||
padding-top: 8rem;
|
||||
min-height: 60vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.explore-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -30vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 30vh;
|
||||
background: linear-gradient(to bottom, transparent, #000);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.explore-content {
|
||||
display: flex;
|
||||
gap: 3rem;
|
||||
max-width: 900px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.explore-card {
|
||||
flex: 1;
|
||||
padding: 2rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.explore-card-title {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.explore-card-desc {
|
||||
margin: 0 0 1.5rem;
|
||||
font-size: 0.95rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.category-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.category-link {
|
||||
display: inline-block;
|
||||
padding: 0.4rem 0.9rem;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: 20px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
transition: background 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.category-link:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.explore-cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.6rem 1.2rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.explore-cta:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.explore-section {
|
||||
padding: 3rem 1.25rem;
|
||||
}
|
||||
|
||||
.explore-content {
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.explore-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
33
src/components/photo/HeroViewport.astro
Normal file
33
src/components/photo/HeroViewport.astro
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
---
|
||||
import ScrollIndicator from './ScrollIndicator.astro';
|
||||
|
||||
interface Props {
|
||||
targetSelector?: string;
|
||||
transparent?: boolean;
|
||||
}
|
||||
|
||||
const { targetSelector = '#content', transparent = false } = Astro.props;
|
||||
---
|
||||
|
||||
<div class:list={['hero-viewport', { transparent }]}>
|
||||
<slot />
|
||||
<ScrollIndicator targetSelector={targetSelector} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.hero-viewport {
|
||||
position: relative;
|
||||
height: var(--hero-height, 100vh);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-viewport.transparent {
|
||||
z-index: 25;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-viewport.transparent :global(.scroll-indicator) {
|
||||
pointer-events: auto;
|
||||
bottom: 100px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,10 +1,14 @@
|
|||
---
|
||||
import PhotoLayout from '../layouts/PhotoLayout.astro';
|
||||
import PhotoGallery from '../components/photo/PhotoGallery.astro';
|
||||
import HeroViewport from '../components/photo/HeroViewport.astro';
|
||||
import ExploreSection from '../components/photo/ExploreSection.astro';
|
||||
|
||||
const title = "Galerie Photo - Jalil Arfaoui";
|
||||
---
|
||||
|
||||
<PhotoLayout title={title}>
|
||||
<PhotoLayout title={title} enableScroll={true}>
|
||||
<PhotoGallery category="all" />
|
||||
<HeroViewport targetSelector="#explore-section" transparent />
|
||||
<ExploreSection />
|
||||
</PhotoLayout>
|
||||
Loading…
Add table
Reference in a new issue