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

Improve image display and layout for a better viewing experience

Browse Source 
Adjusted image rendering and container sizes to optimize the display of landscape and portrait images across the featured section, ensuring content remains visually balanced and readable.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 9b201064-26d8-4881-ae57-42f081461269
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 20:56:39 +00:00
parent 739ec00bc3
commit 30cb723247
1 changed files with 15 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -163,9 +163,9 @@ function SideCard({ article }: { article: Article }) {
return (
<Link href={`/article/${article.slug}`}>
<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-video object-cover object-center transition-transform duration-500 group-hover:scale-105" loading="lazy" />
<div className="relative flex-shrink-0 flex-1 min-h-0">
<div className="overflow-hidden h-full">
<img src={thumbUrl(article.coverImage)} alt={article.title} className="w-full h-full object-cover object-center transition-transform duration-500 group-hover:scale-105" loading="lazy" />
</div>
{isVideo && (
<div className="absolute inset-0 flex items-center justify-center">
@ -175,13 +175,12 @@ function SideCard({ article }: { article: Article }) {
</div>
)}
</div>
<div className="p-3 flex flex-col flex-1">
<div className="flex items-center gap-2 mb-1">
<div className="p-2.5 flex-shrink-0">
<div className="flex items-center gap-2 mb-0.5">
<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>
<h3 className="font-semibold text-card-foreground text-xs leading-snug line-clamp-2 group-hover:text-primary transition-colors">{article.title}</h3>
</div>
</div>
</Link>
@ -267,22 +266,20 @@ 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-8 gap-4">
<div className="lg:col-span-3 flex">
<div className="w-full">
{isGalleryPage && galleryImages ? (
<GalleryHeroCard images={galleryImages.slice(0, 30)} />
) : hero ? (
<HeroCard article={hero} />
) : null}
</div>
<div className="grid grid-cols-1 lg:grid-cols-8 gap-4 lg:max-h-[420px]">
<div className="lg:col-span-3 lg:h-[420px]">
{isGalleryPage && galleryImages ? (
<GalleryHeroCard images={galleryImages.slice(0, 30)} />
) : hero ? (
<HeroCard article={hero} />
) : null}
</div>
<div className="lg:col-span-3 grid grid-cols-1 gap-3 grid-rows-2">
<div className="lg:col-span-3 grid grid-cols-1 gap-3 grid-rows-2 lg:h-[420px]">
{side.map((a) => (
<SideCard key={a.id} article={a} />
))}
</div>
<div className="lg:col-span-2">
<div className="lg:col-span-2 lg:h-[420px] overflow-y-auto">
{popular && popular.length > 0 && <TopStoriesList articles={popular} />}
</div>
</div>