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 (
<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="lg:col-span-3">
<div className={isGalleryPage ? "lg:col-span-5" : "lg:col-span-3"}>
{isGalleryPage && galleryImages ? (
<GalleryHeroCard images={galleryImages.slice(0, 30)} />
) : hero ? (
<HeroCard article={hero} />
) : null}
</div>
<div className="lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-4">
{isGalleryPage && galleryImages ? (
<>
<GalleryMediumCard images={galleryImages.slice(30, 60)} />
<GalleryMediumCard images={galleryImages.slice(60, 90)} />
</>
) : (
side.map((a) => (
{!isGalleryPage && (
<div className="lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-4">
{side.map((a) => (
<MediumCard key={a.id} article={a} />
))
)}
</div>
))}
</div>
)}
<div className="lg:col-span-1">
{popular && popular.length > 0 && <TopStoriesList articles={popular} />}
</div>