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