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

Update carousel layout to display random articles more effectively

Browse Source 
Remove the side article prop from FeaturedCarousel, adjust the layout of the right column, and update the display logic for WideCards in the home page to show random articles that are not in the carousel.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 3f16617b-8f92-430f-b0bd-c0c44b00986a
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/0ZGabQy
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 22:25:51 +00:00
parent 31f3806b4b
commit 7b9abf181a
1 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -360,7 +360,7 @@ function FeaturedHeroCard({ article, focalPoints }: { article: Article; focalPoi
);
}
function FeaturedCarousel({ articles, popular, galleryImages, focalPoints, sideArticle }: { articles: Article[]; popular?: Article[]; galleryImages?: GalleryImage[]; focalPoints?: Record<string, { x: number; y: number }>; sideArticle?: Article }) {
function FeaturedCarousel({ articles, popular, galleryImages, focalPoints }: { articles: Article[]; popular?: Article[]; galleryImages?: GalleryImage[]; focalPoints?: Record<string, { x: number; y: number }> }) {
const pageSize = 3;
const totalPages = Math.max(1, Math.ceil(Math.min(articles.length, 9) / pageSize));
const [page, setPage] = useState(0);
@ -393,9 +393,8 @@ function FeaturedCarousel({ articles, popular, galleryImages, focalPoints, sideA
</div>
</div>
</div>
<div className="lg:col-span-1 flex flex-col gap-4">
<div className="lg:col-span-1">
{popular && popular.length > 0 && <TopStoriesList articles={popular} />}
{sideArticle && <WideCard article={sideArticle} focalPoints={focalPoints} />}
</div>
</div>
{totalPages > 1 && (
@ -522,7 +521,7 @@ export default function Home() {
<Header />
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 space-y-4">
<FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} focalPoints={focalPoints} sideArticle={widePickedArticles[0]} />
<FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} focalPoints={focalPoints} />
{gridRows.map((row, ri) => (
<div key={ri} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
@ -536,9 +535,11 @@ export default function Home() {
</div>
))}
{widePickedArticles.length > 1 && (
{widePickedArticles.length > 0 && (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
<WideCard article={widePickedArticles[1]} focalPoints={focalPoints} />
{widePickedArticles.map((a) => (
<WideCard key={`wide-${a.id}`} article={a} focalPoints={focalPoints} />
))}
</div>
)}