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

Return to previous layout for wide cards

Browse Source 
Remove wide cards from the FeaturedCarousel component and place them below the main grid.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 8d662854-6a02-450f-9147-28ba7caf32ca
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:22:51 +00:00
parent 43d3c230d5
commit ac54a6fbd7
1 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -360,7 +360,7 @@ function FeaturedHeroCard({ article, focalPoints }: { article: Article; focalPoi
);
}
function FeaturedCarousel({ articles, popular, galleryImages, focalPoints, wideArticles }: { articles: Article[]; popular?: Article[]; galleryImages?: GalleryImage[]; focalPoints?: Record<string, { x: number; y: number }>; wideArticles?: 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,10 +393,8 @@ function FeaturedCarousel({ articles, popular, galleryImages, focalPoints, wideA
</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} />}
{wideArticles && wideArticles.length > 0 && <WideCard article={wideArticles[0]} focalPoints={focalPoints} />}
{wideArticles && wideArticles.length > 1 && <WideCard article={wideArticles[1]} focalPoints={focalPoints} />}
</div>
</div>
{totalPages > 1 && (
@ -510,7 +508,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} wideArticles={shuffled.length > 1 ? [shuffled[shuffled.length - 1], shuffled[shuffled.length - 2]] : []} />
<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">
@ -524,6 +522,13 @@ export default function Home() {
</div>
))}
{shuffled.length > 1 && (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
<WideCard article={shuffled[shuffled.length - 1]} focalPoints={focalPoints} />
<WideCard article={shuffled[shuffled.length - 2]} focalPoints={focalPoints} />
</div>
)}
</main>
<Footer />
</div>