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

Rearrange articles and ads to display one ad per row with rotating positions

Browse Source 
Restructure the category page layout to display 3 articles and 1 ad per row, with the ad's position rotating through columns 0 to 3 for each subsequent row.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 23852c00-4779-460a-9e0c-d09fee4b6c92
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: acf132ee-55a0-45c7-a19c-5f963e3439d9
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/23852c00-4779-460a-9e0c-d09fee4b6c92/ee1CXlO
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-03-06 15:41:41 +00:00
parent d9e9179840
commit 1ac3edf5cc
1 changed files with 43 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
client/src/pages/category.tsx
View File

@ -150,38 +150,51 @@ export default function CategoryPage() {
) : data && data.articles.length > 0 ? (
<>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
{data.articles.flatMap((article, index) => {
const items = [
<Link key={article.id} href={`/article/${article.slug}`}>
<article
className="group cursor-pointer bg-card rounded-md border border-card-border transition-all duration-300 h-full flex flex-col"
data-testid={`card-article-${article.id}`}
>
<div className="overflow-hidden rounded-t-md">
<img
src={article.coverImage || "/images/article-1.jpg"}
alt={article.title}
className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105"
style={{ objectPosition: "center 25%" }}
loading="lazy"
/>
</div>
<div className="p-4 flex flex-col flex-1">
<h3 className="font-semibold text-card-foreground mb-1 line-clamp-2 group-hover:text-primary transition-colors text-sm leading-snug">
{article.title}
</h3>
<span className="text-muted-foreground text-xs">
{format(new Date(article.publishedAt), "d. MMMM yyyy", { locale: de })}
</span>
</div>
</article>
</Link>,
];
if ((index + 1) % 8 === 0) {
items.push(<ArticleCardAd key={`ad-cat-${index}`} />);
{(() => {
const items: React.ReactNode[] = [];
const articles = data.articles;
let ai = 0;
let row = 0;
while (ai < articles.length) {
const adCol = row % 4;
for (let col = 0; col < 4; col++) {
if (col === adCol) {
items.push(<ArticleCardAd key={`ad-row-${row}`} />);
} else if (ai < articles.length) {
const a = articles[ai];
items.push(
<Link key={a.id} href={`/article/${a.slug}`}>
<article
className="group cursor-pointer bg-card rounded-md border border-card-border transition-all duration-300 h-full flex flex-col"
data-testid={`card-article-${a.id}`}
>
<div className="overflow-hidden rounded-t-md">
<img
src={a.coverImage || "/images/article-1.jpg"}
alt={a.title}
className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105"
style={{ objectPosition: "center 25%" }}
loading="lazy"
/>
</div>
<div className="p-4 flex flex-col flex-1">
<h3 className="font-semibold text-card-foreground mb-1 line-clamp-2 group-hover:text-primary transition-colors text-sm leading-snug">
{a.title}
</h3>
<span className="text-muted-foreground text-xs">
{format(new Date(a.publishedAt), "d. MMMM yyyy", { locale: de })}
</span>
</div>
</article>
</Link>
);
ai++;
}
}
row++;
}
return items;
})}
})()}
</div>
{renderPagination()}
</>