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 { useLocation } from "wouter";
import { Star, ChevronLeft, ChevronRight, X } from "lucide-react";
import { Star } from "lucide-react";
const SIGNS = [
{ name: "Widder", symbol: "♈", date: "21.03 – 19.04", element: "Feuer" },
@ -90,7 +90,7 @@ function HoroscopeModal({ onClose, initialSign }: { onClose: () => void; initial
}
export function HoroscopeWidget() {
const [showModal, setShowModal] = useState(false);
const [, navigate] = useLocation();
const [index, setIndex] = useState(0);
const [paused, setPaused] = useState(false);
@ -105,37 +105,33 @@ export function HoroscopeWidget() {
const sign = SIGNS[index];
return (
<>
<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"
onMouseEnter={() => setPaused(true)}
onMouseLeave={() => setPaused(false)}
onClick={() => setShowModal(true)}
data-testid="widget-horoscope"
>
<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" />
<h3 className="font-bold text-card-foreground text-sm">Horoskop</h3>
</div>
<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>
<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-sm text-muted-foreground mt-4 leading-relaxed">{getDailyText(index)}</p>
<div className="flex justify-center gap-1 mt-5">
{SIGNS.map((_, i) => (
<button
key={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"}`}
data-testid={`button-horoscope-dot-${i}`}
/>
))}
</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"
onMouseEnter={() => setPaused(true)}
onMouseLeave={() => setPaused(false)}
onClick={() => navigate("/horoskop")}
data-testid="widget-horoscope"
>
<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" />
<h3 className="font-bold text-card-foreground text-sm">Horoskop</h3>
</div>
<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>
<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-sm text-muted-foreground mt-4 leading-relaxed">{getDailyText(index)}</p>
<div className="flex justify-center gap-1 mt-5">
{SIGNS.map((_, i) => (
<button
key={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"}`}
data-testid={`button-horoscope-dot-${i}`}
/>
))}
</div>
</div>
{showModal && <HoroscopeModal initialSign={index} onClose={() => setShowModal(false)} />}
</>
</div>
);
}

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

@ -316,8 +316,9 @@ export default function Home() {
);
}
const row2Articles = articles.slice(3, 7);
const row3Articles = articles.slice(7);
const row2Articles = articles.slice(3, 6);
const row3Articles = articles.slice(6, 9);
const row4Articles = articles.slice(9);
return (
<div className="min-h-screen bg-background">
@ -327,7 +328,7 @@ export default function Home() {
<FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} />
<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} />
))}
<NativeAdCard />
@ -353,13 +354,19 @@ export default function Home() {
{row3Articles.length > 0 && (
<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} />
))}
<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} />
))}
<NativeAdCard />
</div>
)}