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

Improve carousel layout to display articles in different formats

Browse Source 
Adjusts the featured carousel component to support a wide display format for articles on page 2, alongside the existing gallery and standard article layouts.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 8f0c2904-5e6f-40d1-bdfc-6a9808591bb4
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 19:35:31 +00:00
parent a5caf0f5af
commit d0ee926b35
1 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -220,29 +220,34 @@ function FeaturedCarousel({ articles, popular, galleryImages }: { articles: Arti
}, [paused, next, total]);
const isGalleryPage = hasGallery && page === total - 1;
const isWidePage = page === 1;
let hero: Article | null = null;
let side: Article[] = [];
if (!isGalleryPage && articles.length > 0) {
hero = articles[page % articles.length];
side = [
articles[(page * 2 + 1) % articles.length],
articles[(page * 2 + 2) % articles.length],
];
if (!isWidePage) {
side = [
articles[(page * 2 + 1) % articles.length],
articles[(page * 2 + 2) % articles.length],
];
}
}
const wide = isGalleryPage || isWidePage;
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={isGalleryPage ? "lg:col-span-5" : "lg:col-span-3"}>
<div className={wide ? "lg:col-span-5" : "lg:col-span-3"}>
{isGalleryPage && galleryImages ? (
<GalleryHeroCard images={galleryImages.slice(0, 30)} />
) : hero ? (
<HeroCard article={hero} />
) : null}
</div>
{!isGalleryPage && (
{!wide && (
<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} />