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

Remove the side column and adjust layout for two main sections

Browse Source 
Remove the unused `wide` variable, `SideCard` component, and adjust grid column spans to accommodate the removal of the side column, ensuring the hero section takes up 75% width and the Top Stories section takes up 25% width.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 3785250a-79ce-4d5b-9dae-ed3c4db23160
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 20:44:05 +00:00
parent f6ca0a2e70
commit 3987e78957
2 changed files with 1 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1772311384148.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 325 KiB

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

@ -223,37 +223,21 @@ function FeaturedCarousel({ articles, popular, galleryImages }: { articles: Arti
const isWidePage = page === 1; const isWidePage = page === 1;
let hero: Article | null = null; let hero: Article | null = null;
let side: Article[] = [];
if (!isGalleryPage && articles.length > 0) { if (!isGalleryPage && articles.length > 0) {
hero = articles[page % articles.length]; hero = articles[page % articles.length];
if (!isWidePage) {
side = [
articles[(page * 2 + 1) % articles.length],
articles[(page * 2 + 2) % articles.length],
];
}
} }
const wide = isGalleryPage || isWidePage;
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-8 gap-4"> <div className="grid grid-cols-1 lg:grid-cols-8 gap-4">
<div className={wide ? "lg:col-span-6" : "lg:col-span-5"}> <div className="lg:col-span-6">
{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>
{!wide && (
<div className="lg:col-span-1 grid grid-cols-1 gap-3">
{side.map((a) => (
<SideCard key={a.id} article={a} />
))}
</div>
)}
<div className="lg:col-span-2"> <div className="lg:col-span-2">
{popular && popular.length > 0 && <TopStoriesList articles={popular} />} {popular && popular.length > 0 && <TopStoriesList articles={popular} />}
</div> </div>