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

Update blog layout to evenly distribute content and remove empty ad spaces

Browse Source 
Refactor the homepage layout in `home.tsx` to dynamically arrange articles into rows of four, removing the placeholder `NativeAdCard` components and ensuring a more consistent visual presentation.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: f8786fc6-adc7-4518-b95d-23cb30c27006
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/drGbo1a
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 21:24:15 +00:00
parent a25ef1ca81
commit 4e2a52aadd
2 changed files with 13 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1772313799360.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 290 KiB

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

@ -357,10 +357,13 @@ export default function Home() {
); );
} }
const row2Left = articles.slice(0, 2); const row2 = articles.slice(0, 2);
const row3Middle = articles.slice(2, 4); const row3 = articles.slice(2, 4);
const row4Articles = articles.slice(4, 7); const remaining = articles.slice(4);
const row5Articles = articles.slice(7, 10); const rows: Article[][] = [];
for (let i = 0; i < remaining.length; i += 4) {
rows.push(remaining.slice(i, i + 4));
}
return ( return (
<div className="min-h-screen bg-background"> <div className="min-h-screen bg-background">
@ -370,7 +373,7 @@ export default function Home() {
<FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} focalPoints={focalPoints} /> <FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} focalPoints={focalPoints} />
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
{row2Left.map((a) => ( {row2.map((a) => (
<MediumCard key={a.id} article={a} focalPoints={focalPoints} /> <MediumCard key={a.id} article={a} focalPoints={focalPoints} />
))} ))}
<RecipeWidget /> <RecipeWidget />
@ -378,33 +381,22 @@ export default function Home() {
</div> </div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
{row3Middle.map((a) => ( {row3.map((a) => (
<MediumCard key={a.id} article={a} focalPoints={focalPoints} /> <MediumCard key={a.id} article={a} focalPoints={focalPoints} />
))} ))}
<PhotoGalleryWidget /> <PhotoGalleryWidget />
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<NewsWidget /> <NewsWidget />
<NativeAdCard />
</div> </div>
</div> </div>
{row4Articles.length > 0 && ( {rows.map((row, ri) => (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> <div key={ri} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
{row4Articles.map((a) => ( {row.map((a) => (
<MediumCard key={a.id} article={a} focalPoints={focalPoints} /> <MediumCard key={a.id} article={a} focalPoints={focalPoints} />
))} ))}
<NativeAdCard />
</div> </div>
)} ))}
{row5Articles.length > 0 && (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
{row5Articles.map((a) => (
<MediumCard key={a.id} article={a} focalPoints={focalPoints} />
))}
<NativeAdCard />
</div>
)}
</main> </main>
<Footer /> <Footer />