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

Adjust blog page layout to reduce image height and widen top stories

Browse Source 
Modify HeroCard and GalleryHeroCard to use a 2:1 aspect ratio, decreasing their height. Adjust the grid layout in FeaturedCarousel to allocate more space to the TopStoriesList.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 6f6fbf91-469b-4ca9-b7cd-f1c19c974aed
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 20:38:49 +00:00
parent c441cc1594
commit 8432d4e240
2 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1772311051088.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 767 KiB

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

@ -43,7 +43,7 @@ function HeroCard({ article }: { article: Article }) {
return ( return (
<Link href={`/article/${article.slug}`}> <Link href={`/article/${article.slug}`}>
<div className="relative group cursor-pointer rounded-lg overflow-hidden" data-testid={`card-hero-${article.id}`}> <div className="relative group cursor-pointer rounded-lg overflow-hidden" data-testid={`card-hero-${article.id}`}>
<div className="relative aspect-[4/3]"> <div className="relative aspect-[2/1]">
<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" /> <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 && ( {isVideo && (
<div className="absolute inset-0 flex items-center justify-center z-10"> <div className="absolute inset-0 flex items-center justify-center z-10">
@ -78,7 +78,7 @@ function GalleryHeroCard({ images }: { images: GalleryImage[] }) {
return ( return (
<Link href="/gallery"> <Link href="/gallery">
<div className="relative group cursor-pointer rounded-lg overflow-hidden" data-testid="card-hero-gallery"> <div className="relative group cursor-pointer rounded-lg overflow-hidden" data-testid="card-hero-gallery">
<div className="relative aspect-[4/3]"> <div className="relative aspect-[2/1]">
<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" /> <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 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"> <div className="absolute bottom-0 left-0 right-0 p-5">
@ -240,7 +240,7 @@ function FeaturedCarousel({ articles, popular, galleryImages }: { articles: Arti
return ( return (
<section data-testid="featured-carousel" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}> <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="grid grid-cols-1 lg:grid-cols-6 gap-4">
<div className={wide ? "lg:col-span-5" : "lg:col-span-3"}> <div className={wide ? "lg:col-span-4" : "lg:col-span-3"}>
{isGalleryPage && galleryImages ? ( {isGalleryPage && galleryImages ? (
<GalleryHeroCard images={galleryImages.slice(0, 30)} /> <GalleryHeroCard images={galleryImages.slice(0, 30)} />
) : hero ? ( ) : hero ? (
@ -248,13 +248,13 @@ function FeaturedCarousel({ articles, popular, galleryImages }: { articles: Arti
) : null} ) : null}
</div> </div>
{!wide && ( {!wide && (
<div className="lg:col-span-2 grid grid-cols-1 gap-3"> <div className="lg:col-span-1 grid grid-cols-1 gap-3">
{side.map((a) => ( {side.map((a) => (
<SideCard key={a.id} article={a} /> <SideCard key={a.id} article={a} />
))} ))}
</div> </div>
)} )}
<div className="lg:col-span-1"> <div className="lg:col-span-2">
{popular && popular.length > 0 && <TopStoriesList articles={popular} />} {popular && popular.length > 0 && <TopStoriesList articles={popular} />}
</div> </div>
</div> </div>