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

Horoskop: brez naslovnega bloka in praznega poziva, slikce pri drugih znamenjih, mreza 4 v vrsti z vecjimi karticami

Browse Source
This commit is contained in:
sebastjan 2026-08-15 16:41:03 +02:00
parent b6eb0c6d0e
commit e6a951620e
1 changed files with 18 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
client/src/pages/horoscope.tsx
View File

@ -62,7 +62,7 @@ function SignGrid({ onSelect, selectedIndex, aiHoroscopes }: { onSelect: (i: num
<Star className="w-5 h-5 text-primary" />
Ihr Sternzeichen wählen
</h2>
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
<div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{SIGNS.map((sign, i) => {
const ec = ELEMENT_COLORS[sign.element];
const aiH = aiHoroscopes.find(h => h.signIndex === i);
@ -84,17 +84,17 @@ function SignGrid({ onSelect, selectedIndex, aiHoroscopes }: { onSelect: (i: num
src={(horoscope as any).imageUrl}
alt={`Sternzeichen ${sign.name}`}
loading="lazy"
className="w-full h-24 object-cover rounded-lg mb-3"
className="w-full h-40 md:h-44 object-cover rounded-lg mb-3"
/>
)}
<div className="flex items-center gap-2 mb-2">
<span className="text-2xl">{sign.symbol}</span>
<div>
<span className={`text-sm font-semibold block ${isSelected ? ec.text : "text-foreground"}`}>{sign.name}</span>
<span className="text-[10px] text-muted-foreground">{sign.date}</span>
<span className={`text-base font-semibold block ${isSelected ? ec.text : "text-foreground"}`}>{sign.name}</span>
<span className="text-[11px] text-muted-foreground">{sign.date}</span>
</div>
</div>
<p className="text-[11px] text-foreground/60 leading-relaxed line-clamp-3">{horoscope.general.substring(0, 100)}...</p>
<p className="text-xs text-foreground/70 leading-relaxed line-clamp-4">{horoscope.general.substring(0, 180)}...</p>
<div className="flex items-center gap-1 mt-2 text-[10px] text-primary">
Lesen <ArrowRight className="w-3 h-3" />
</div>
@ -116,6 +116,7 @@ function SignDetail({ signIndex, onNavigate, aiHoroscopes }: { signIndex: number
const dailyColor = getDailyColor(signIndex);
const detailRef = useRef<HTMLDivElement>(null);
const isAI = !!aiH;
const imgFor = (i: number) => aiHoroscopes.find((h) => h.signIndex === i)?.imageUrl || null;
const prevIndex = (signIndex - 1 + SIGNS.length) % SIGNS.length;
const nextIndex = (signIndex + 1) % SIGNS.length;
@ -309,6 +310,14 @@ function SignDetail({ signIndex, onNavigate, aiHoroscopes }: { signIndex: number
className={`${sEc.bg} hover:opacity-80 border ${sEc.border} rounded-lg p-3 transition-all text-left`}
data-testid={`button-sign-other-${s.name.toLowerCase()}`}
>
{imgFor(origIdx) && (
<img
src={imgFor(origIdx)!}
alt={`Tageshoroskop ${s.name}`}
loading="lazy"
className="w-full h-20 object-cover rounded-md mb-2"
/>
)}
<div className="flex items-center gap-2 mb-1">
<span className="text-xl">{s.symbol}</span>
<span className={`font-medium text-sm ${sEc.text}`}>{s.name}</span>
@ -379,20 +388,9 @@ export default function HoroscopePage() {
<InterstitialAd forceShow />
<PageSideAds />
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
<div className="flex items-center gap-3 mb-2">
<Link href="/">
<button className="text-muted-foreground hover:text-foreground transition-colors" data-testid="button-back-home">
<ChevronLeft className="w-5 h-5" />
</button>
</Link>
<h1 className="text-2xl font-bold text-foreground flex items-center gap-2" data-testid="text-horoscope-title">
<Star className="w-6 h-6 text-primary" />
Horoskop
</h1>
</div>
<p className="text-muted-foreground text-sm mb-8 ml-8" data-testid="text-horoscope-subtitle">
Entdecken Sie, was die Sterne für Sie bereithalten — Ihr persönliches Tageshoroskop für alle zwölf Sternzeichen.
</p>
<h1 className="sr-only" data-testid="text-horoscope-title">
Horoskop — Tageshoroskop für alle zwölf Sternzeichen
</h1>
{aiLoading && (
<div className="flex items-center gap-2 mb-6 text-sm text-primary bg-primary/10 border border-primary/20 rounded-lg px-4 py-2" data-testid="text-horoscope-loading">
@ -408,13 +406,7 @@ export default function HoroscopePage() {
<div ref={detailRef}>
{selected !== null ? (
<SignDetail signIndex={selected} onNavigate={handleSelect} aiHoroscopes={aiHoroscopes} />
) : (
<div className="text-center py-16 bg-card rounded-xl border border-card-border" data-testid="text-horoscope-prompt">
<Sparkles className="w-16 h-16 text-primary mx-auto mb-4" />
<p className="text-muted-foreground text-lg">Wählen Sie oben Ihr Sternzeichen</p>
<p className="text-muted-foreground/60 text-sm mt-1">für Ihr persönliches Tages-, Wochen- und Monatshoroskop</p>
</div>
)}
) : null}
</div>
</main>
<Footer />