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

Add prominent article display and reorganize sidebar content

Browse Source 
Adjust the layout to feature selected articles more prominently on the homepage and rearrange sidebar elements for better organization.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: e6a9f029-f178-4d47-85df-7d62a1597a7a
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/nFw7xof
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-03-02 18:20:25 +00:00
parent 3ad5c1cc66
commit e6b789eddf
1 changed files with 7 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -561,23 +561,17 @@ export default function Home() {
<div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
<div className="lg:col-span-3 space-y-4">
<FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} focalPoints={focalPoints} />
{widePickedArticles.length > 0 && (
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
{widePickedArticles.map((a) => (
<WideCard key={`wide-top-${a.id}`} article={a} focalPoints={focalPoints} />
))}
</div>
)}
</div>
<div className="lg:col-span-1 space-y-4">
<SidebarWeatherWidget />
{articles && articles.length > 0 && <TopStoriesList articles={[...articles].sort((a, b) => new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime()).slice(0, 5)} />}
{widePickedArticles.map((a) => (
<Link key={`side-top-${a.id}`} href={`/article/${a.slug}`}>
<div className="group cursor-pointer rounded-lg overflow-hidden bg-card border border-card-border" data-testid={`card-sidebar-${a.id}`}>
<div className="aspect-video overflow-hidden">
<img src={thumbUrl(a.coverImage)} alt={a.title} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy" />
</div>
<div className="p-2.5">
<span className="text-[10px] text-primary font-medium">{a.author}</span>
<h4 className="text-xs font-bold text-card-foreground line-clamp-2 group-hover:text-primary transition-colors leading-snug mt-0.5">{a.title}</h4>
</div>
</div>
</Link>
))}
<SidebarAd />
</div>
</div>