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

Update blog layout and fix horoscope navigation

Browse Source 
Adjust article display on the homepage to show more content and modify the horoscope widget to navigate to a dedicated page instead of a modal.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: c8cadc1b-5524-4725-abba-7f1558b33894
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/413891e8-d784-4bea-b9f5-91a5a68316b4/RVXhOPb
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 19:27:16 +00:00
parent 0918ffd291
commit 102c6f0046
3 changed files with 40 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1772306629624.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 792 KiB

60
client/src/components/horoscope-widget.tsx
View File

@ -1,6 +1,6 @@
import { useState, useEffect, useCallback } from "react"; import { useState, useEffect, useCallback } from "react";
import { useLocation } from "wouter"; import { useLocation } from "wouter";
import { Star, ChevronLeft, ChevronRight, X } from "lucide-react"; import { Star } from "lucide-react";
const SIGNS = [ const SIGNS = [
{ name: "Widder", symbol: "♈", date: "21.03 – 19.04", element: "Feuer" }, { name: "Widder", symbol: "♈", date: "21.03 – 19.04", element: "Feuer" },
@ -90,7 +90,7 @@ function HoroscopeModal({ onClose, initialSign }: { onClose: () => void; initial
} }
export function HoroscopeWidget() { export function HoroscopeWidget() {
const [showModal, setShowModal] = useState(false); const [, navigate] = useLocation();
const [index, setIndex] = useState(0); const [index, setIndex] = useState(0);
const [paused, setPaused] = useState(false); const [paused, setPaused] = useState(false);
@ -105,37 +105,33 @@ export function HoroscopeWidget() {
const sign = SIGNS[index]; const sign = SIGNS[index];
return ( return (
<> <div
<div className="bg-card rounded-lg border border-card-border overflow-hidden h-full w-full cursor-pointer group hover:border-primary/50 transition-colors flex flex-col"
className="bg-card rounded-lg border border-card-border overflow-hidden h-full w-full cursor-pointer group hover:border-primary/50 transition-colors flex flex-col" onMouseEnter={() => setPaused(true)}
onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}
onMouseLeave={() => setPaused(false)} onClick={() => navigate("/horoskop")}
onClick={() => setShowModal(true)} data-testid="widget-horoscope"
data-testid="widget-horoscope" >
> <div className="p-3 flex items-center gap-2 border-b border-card-border flex-shrink-0">
<div className="p-3 flex items-center gap-2 border-b border-card-border flex-shrink-0"> <Star className="w-4 h-4 text-primary" />
<Star className="w-4 h-4 text-primary" /> <h3 className="font-bold text-card-foreground text-sm">Horoskop</h3>
<h3 className="font-bold text-card-foreground text-sm">Horoskop</h3> </div>
</div> <div className="p-5 flex-1 flex flex-col justify-center items-center text-center">
<div className="p-5 flex-1 flex flex-col justify-center items-center text-center"> <span className="text-7xl mb-4 transition-all duration-500 block">{sign.symbol}</span>
<span className="text-7xl mb-4 transition-all duration-500 block">{sign.symbol}</span> <p className="font-bold text-card-foreground text-lg">{sign.name}</p>
<p className="font-bold text-card-foreground text-lg">{sign.name}</p> <p className="text-xs text-muted-foreground mt-1">{sign.date}</p>
<p className="text-xs text-muted-foreground mt-1">{sign.date}</p> <p className="text-sm text-muted-foreground mt-4 leading-relaxed">{getDailyText(index)}</p>
<p className="text-sm text-muted-foreground mt-4 leading-relaxed">{getDailyText(index)}</p> <div className="flex justify-center gap-1 mt-5">
<div className="flex justify-center gap-1 mt-5"> {SIGNS.map((_, i) => (
{SIGNS.map((_, i) => ( <button
<button key={i}
key={i} onClick={(e) => { e.stopPropagation(); setIndex(i); }}
onClick={(e) => { e.stopPropagation(); setIndex(i); }} className={`w-1.5 h-1.5 rounded-full transition-all ${i === index ? "bg-primary w-3" : "bg-muted-foreground/30 hover:bg-muted-foreground/50"}`}
className={`w-1.5 h-1.5 rounded-full transition-all ${i === index ? "bg-primary w-3" : "bg-muted-foreground/30 hover:bg-muted-foreground/50"}`} data-testid={`button-horoscope-dot-${i}`}
data-testid={`button-horoscope-dot-${i}`} />
/> ))}
))}
</div>
</div> </div>
</div> </div>
</div>
{showModal && <HoroscopeModal initialSign={index} onClose={() => setShowModal(false)} />}
</>
); );
} }

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

@ -316,8 +316,9 @@ export default function Home() {
); );
} }
const row2Articles = articles.slice(3, 7); const row2Articles = articles.slice(3, 6);
const row3Articles = articles.slice(7); const row3Articles = articles.slice(6, 9);
const row4Articles = articles.slice(9);
return ( return (
<div className="min-h-screen bg-background"> <div className="min-h-screen bg-background">
@ -327,7 +328,7 @@ export default function Home() {
<FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} /> <FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} />
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
{row2Articles.slice(0, 3).map((a) => ( {row2Articles.map((a) => (
<MediumCard key={a.id} article={a} /> <MediumCard key={a.id} article={a} />
))} ))}
<NativeAdCard /> <NativeAdCard />
@ -353,13 +354,19 @@ export default function Home() {
{row3Articles.length > 0 && ( {row3Articles.length > 0 && (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
{row3Articles.slice(0, 2).map((a) => ( {row3Articles.map((a) => (
<MediumCard key={a.id} article={a} /> <MediumCard key={a.id} article={a} />
))} ))}
<NativeAdCard /> <NativeAdCard />
{row3Articles.length > 2 && row3Articles.slice(2, 3).map((a) => ( </div>
)}
{row4Articles.length > 0 && (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
{row4Articles.slice(0, 3).map((a) => (
<MediumCard key={a.id} article={a} /> <MediumCard key={a.id} article={a} />
))} ))}
<NativeAdCard />
</div> </div>
)} )}