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

Adjust homepage layout to display a single hero image for galleries

Browse Source 
Refactor client/src/pages/home.tsx to modify the FeaturedCarousel component, conditionally adjusting the column span for the hero section. When displaying a gallery page (`isGalleryPage`), the hero section now spans 5 columns (`lg:col-span-5`), and the secondary medium cards are hidden, allowing only the TopStoriesList to appear alongside the expanded hero image.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: c5e3e1f9-1778-4ec0-b249-a68a388e99ea
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/413891e8-d784-4bea-b9f5-91a5a68316b4/RVXhOPb
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 18:33:44 +00:00
parent f3614e4640
commit c5b7473bdc
1 changed files with 7 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
client/src/pages/home.tsx
View File

@ -238,25 +238,20 @@ function FeaturedCarousel({ articles, popular, galleryImages }: { articles: Arti
return ( return (
<section data-testid="featured-carousel" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}> <section data-testid="featured-carousel" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
<div className="grid grid-cols-1 lg:grid-cols-6 gap-4"> <div className="grid grid-cols-1 lg:grid-cols-6 gap-4">
<div className="lg:col-span-3"> <div className={isGalleryPage ? "lg:col-span-5" : "lg:col-span-3"}>
{isGalleryPage && galleryImages ? ( {isGalleryPage && galleryImages ? (
<GalleryHeroCard images={galleryImages.slice(0, 30)} /> <GalleryHeroCard images={galleryImages.slice(0, 30)} />
) : hero ? ( ) : hero ? (
<HeroCard article={hero} /> <HeroCard article={hero} />
) : null} ) : null}
</div> </div>
<div className="lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-4"> {!isGalleryPage && (
{isGalleryPage && galleryImages ? ( <div className="lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-4">
<> {side.map((a) => (
<GalleryMediumCard images={galleryImages.slice(30, 60)} />
<GalleryMediumCard images={galleryImages.slice(60, 90)} />
</>
) : (
side.map((a) => (
<MediumCard key={a.id} article={a} /> <MediumCard key={a.id} article={a} />
)) ))}
)} </div>
</div> )}
<div className="lg:col-span-1"> <div className="lg:col-span-1">
{popular && popular.length > 0 && <TopStoriesList articles={popular} />} {popular && popular.length > 0 && <TopStoriesList articles={popular} />}
</div> </div>