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

Adjust article card layouts for improved visual appeal and information display

Browse Source 
Update aspect ratios of hero and gallery cards to 4:3, modify side card image to aspect-video, and enhance side card content with author, date, and excerpt.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 44f2dc39-e213-4018-a119-033950b0453d
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/413891e8-d784-4bea-b9f5-91a5a68316b4/nTLKCC5
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 20:28:39 +00:00
parent cf6a2042cc
commit 84d7de2da6
1 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -43,7 +43,7 @@ function HeroCard({ article }: { article: Article }) {
return (
<Link href={`/article/${article.slug}`}>
<div className="relative group cursor-pointer rounded-lg overflow-hidden" data-testid={`card-hero-${article.id}`}>
<div className="relative aspect-[16/9]">
<div className="relative aspect-[4/3]">
<img src={article.coverImage || "/images/article-1.png"} alt={article.title} className="w-full h-full object-cover absolute inset-0 transition-transform duration-700 group-hover:scale-105" style={{ objectPosition: "center 25%" }} loading="lazy" />
{isVideo && (
<div className="absolute inset-0 flex items-center justify-center z-10">
@ -78,7 +78,7 @@ function GalleryHeroCard({ images }: { images: GalleryImage[] }) {
return (
<Link href="/gallery">
<div className="relative group cursor-pointer rounded-lg overflow-hidden" data-testid="card-hero-gallery">
<div className="relative aspect-[16/9]">
<div className="relative aspect-[4/3]">
<img src={images[idx].large || images[idx].thumb} alt={images[idx].fileName} className="w-full h-full object-cover absolute inset-0 transition-opacity duration-1000" style={{ objectPosition: "center 25%" }} loading="lazy" />
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent" />
<div className="absolute bottom-0 left-0 right-0 p-5">
@ -137,18 +137,23 @@ function SideCard({ article }: { article: Article }) {
<div className="relative group cursor-pointer rounded-lg overflow-hidden bg-card border border-card-border h-full flex flex-col" data-testid={`card-side-${article.id}`}>
<div className="relative flex-shrink-0">
<div className="overflow-hidden">
<img src={thumbUrl(article.coverImage)} alt={article.title} className="w-full aspect-[4/3] object-cover transition-transform duration-500 group-hover:scale-105" style={{ objectPosition: "center 25%" }} loading="lazy" />
<img src={thumbUrl(article.coverImage)} 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>
{isVideo && (
<div className="absolute inset-0 flex items-center justify-center">
<div className="w-8 h-8 rounded-full bg-primary/90 flex items-center justify-center group-hover:bg-primary transition-colors">
<Play className="w-3.5 h-3.5 text-white ml-0.5" fill="white" />
<div className="w-9 h-9 rounded-full bg-primary/90 flex items-center justify-center group-hover:bg-primary transition-colors">
<Play className="w-4 h-4 text-white ml-0.5" fill="white" />
</div>
</div>
)}
</div>
<div className="p-2.5 flex flex-col flex-1">
<h3 className="font-semibold text-card-foreground text-xs leading-snug line-clamp-2 group-hover:text-primary transition-colors">{article.title}</h3>
<div className="p-3 flex flex-col flex-1">
<div className="flex items-center gap-2 mb-1">
<span className="text-[10px] font-medium text-primary">{article.author}</span>
<span className="text-muted-foreground text-[10px]">{timeAgo(new Date(article.publishedAt))}</span>
</div>
<h3 className="font-semibold text-card-foreground text-sm leading-snug line-clamp-2 group-hover:text-primary transition-colors">{article.title}</h3>
<p className="text-xs text-muted-foreground mt-1 leading-relaxed line-clamp-2">{article.excerpt}</p>
</div>
</div>
</Link>
@ -235,7 +240,7 @@ function FeaturedCarousel({ articles, popular, galleryImages }: { articles: Arti
return (
<section data-testid="featured-carousel" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
<div className="grid grid-cols-1 lg:grid-cols-6 gap-4">
<div className={wide ? "lg:col-span-5" : "lg:col-span-4"}>
<div className={wide ? "lg:col-span-5" : "lg:col-span-3"}>
{isGalleryPage && galleryImages ? (
<GalleryHeroCard images={galleryImages.slice(0, 30)} />
) : hero ? (
@ -243,7 +248,7 @@ function FeaturedCarousel({ articles, popular, galleryImages }: { articles: Arti
) : null}
</div>
{!wide && (
<div className="lg:col-span-1 grid grid-cols-1 gap-3">
<div className="lg:col-span-2 grid grid-cols-1 gap-3">
{side.map((a) => (
<SideCard key={a.id} article={a} />
))}