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

Update layout to display a square hero image with two articles beside it

Browse Source 
Adjust the grid layout to accommodate a square hero image and two accompanying articles, resizing the hero to 3/8 and the new articles to 3/8, while the top stories remain at 2/8.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 8a63d9bf-4c11-4545-b0ea-5acc34888005
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 20:45:37 +00:00
parent 3987e78957
commit 125943dab5
1 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
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-[2/1]">
<div className="relative aspect-square">
<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-[2/1]">
<div className="relative aspect-square">
<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">
@ -223,21 +223,31 @@ function FeaturedCarousel({ articles, popular, galleryImages }: { articles: Arti
const isWidePage = page === 1;
let hero: Article | null = null;
let side: Article[] = [];
if (!isGalleryPage && articles.length > 0) {
hero = articles[page % articles.length];
side = [
articles[(page + 1) % articles.length],
articles[(page + 2) % articles.length],
];
}
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-6">
<div className="lg:col-span-3">
{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">
{side.map((a) => (
<SideCard key={a.id} article={a} />
))}
</div>
<div className="lg:col-span-2">
{popular && popular.length > 0 && <TopStoriesList articles={popular} />}
</div>