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

Update article display to match video page layout

Browse Source 
Modify the category page to use a compact card layout, showing image, title, and date, similar to the video page. Adjust grid columns for responsive display and update styling for article cards.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 23852c00-4779-460a-9e0c-d09fee4b6c92
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 1ef9c23a-fb77-4dcd-8ca9-040329672db4
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:40:34 +00:00
parent f3d4596d26
commit d9e9179840
1 changed files with 15 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -149,15 +149,14 @@ export default function CategoryPage() {
</div> </div>
) : data && data.articles.length > 0 ? ( ) : data && data.articles.length > 0 ? (
<> <>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> <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) => { {data.articles.flatMap((article, index) => {
const items = [ const items = [
<Link key={article.id} href={`/article/${article.slug}`}> <Link key={article.id} href={`/article/${article.slug}`}>
<article <article
className="group cursor-pointer bg-card rounded-md border border-card-border transition-all duration-300 h-full" 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}`} data-testid={`card-article-${article.id}`}
> >
<div className="relative rounded-t-md">
<div className="overflow-hidden rounded-t-md"> <div className="overflow-hidden rounded-t-md">
<img <img
src={article.coverImage || "/images/article-1.jpg"} src={article.coverImage || "/images/article-1.jpg"}
@ -167,28 +166,13 @@ export default function CategoryPage() {
loading="lazy" loading="lazy"
/> />
</div> </div>
</div> <div className="p-4 flex flex-col flex-1">
<div className="p-4"> <h3 className="font-semibold text-card-foreground mb-1 line-clamp-2 group-hover:text-primary transition-colors text-sm leading-snug">
<div className="flex items-center gap-2 text-muted-foreground text-xs mb-2">
<span>{article.author}</span>
<span>&middot;</span>
<span>{format(new Date(article.publishedAt), "d. MMMM yyyy", { locale: de })}</span>
</div>
<h3 className="font-semibold text-card-foreground mb-2 line-clamp-2 group-hover:text-primary transition-colors">
{article.title} {article.title}
</h3> </h3>
<p className="text-muted-foreground text-sm line-clamp-3 mb-3"> <span className="text-muted-foreground text-xs">
{article.excerpt} {format(new Date(article.publishedAt), "d. MMMM yyyy", { locale: de })}
</p>
<div className="flex items-center justify-between gap-2">
<span className="flex items-center gap-1 text-xs text-muted-foreground">
<Eye className="w-3.5 h-3.5" />
{article.views.toLocaleString()}
</span> </span>
<Button size="sm" data-testid={`button-read-${article.id}`}>
Weiterlesen
</Button>
</div>
</div> </div>
</article> </article>
</Link>, </Link>,