sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve gallery page layout with a responsive grid and hover effects

Browse Source 
Refactor GalleryPage component to display images in a responsive grid layout with 4 columns on large screens, 3 on tablets, and 2 on phones. Includes image zoom effects on hover and a lightbox for full-size viewing.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: f944f70c-e1a8-40c8-bfa6-a0562663d6bc
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/0ZGabQy
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 22:12:18 +00:00
parent b49b7512e4
commit 59986d4fc3
2 changed files with 28 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1772316737734.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 233 KiB

40
client/src/components/photo-gallery.tsx
View File

@ -224,22 +224,38 @@ export default function GalleryPage() {
return ( return (
<div data-testid="page-gallery"> <div data-testid="page-gallery">
{isLoading ? ( {isLoading ? (
<div className="max-w-3xl mx-auto"> <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
<div className="aspect-[4/3] bg-card rounded-lg animate-pulse" /> {Array.from({ length: 12 }).map((_, i) => (
<div key={i} className="aspect-square bg-card rounded-lg animate-pulse" />
))}
</div> </div>
) : images && images.length > 0 ? ( ) : images && images.length > 0 ? (
<div className="max-w-3xl mx-auto"> <>
<div className="bg-card rounded-lg border border-card-border overflow-hidden"> <p className="text-muted-foreground text-sm mb-4" data-testid="text-gallery-count">
<SingleImageCarousel
images={images}
autoPlay={false}
onExpand={(i) => setLightboxIndex(i)}
/>
</div>
<p className="text-center text-muted-foreground text-sm mt-3" data-testid="text-gallery-count">
{images.length} Fotos {images.length} Fotos
</p> </p>
</div> <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
{images.map((img, i) => (
<button
key={img.fileName}
onClick={() => setLightboxIndex(i)}
className="group relative aspect-square rounded-lg overflow-hidden bg-card border border-card-border cursor-pointer"
data-testid={`button-gallery-image-${i}`}
>
<img
src={img.thumb}
alt={img.fileName}
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
loading="lazy"
/>
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors" />
<div className="absolute bottom-0 left-0 right-0 p-2 opacity-0 group-hover:opacity-100 transition-opacity">
<Maximize2 className="w-4 h-4 text-white ml-auto" />
</div>
</button>
))}
</div>
</>
) : ( ) : (
<p className="text-center text-muted-foreground">Keine Fotos vorhanden</p> <p className="text-center text-muted-foreground">Keine Fotos vorhanden</p>
)} )}