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

kartica 300 px in oglas 300x250 v eni vrstici: brez dvojne visine na naslovnici in v rubrikah, kartica brez izvlecka

Browse Source
This commit is contained in:
sebastjan
2026-08-31 18:08:45 +02:00
parent fe2804cc4d
commit 2f9071d604
3 changed files with 10 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/pages/home.tsx
+7 -31
View File
@@ -369,10 +369,7 @@ function VideoCard({ video }: { video: YtVideo }) {
<h3 className="font-semibold text-card-foreground text-sm leading-snug line-clamp-2 group-hover:text-primary transition-colors">
{video.shortTitle || video.title}
</h3>
<p className="text-xs text-muted-foreground mt-1.5 leading-relaxed flex-1 line-clamp-3">
{(video.teaser || "").replace(/^Musik News aus Schlager & Volksmusik:\s*/i, "") ||
"Jetzt ansehen auf FOLX TV"}
</p>
<div className="flex-1" />
<div className="flex items-center gap-2 mt-2 text-muted-foreground text-[10px]">
<Play className="w-3 h-3" />
Video ansehen
@@ -409,7 +406,9 @@ function MediumCard({ article, focalPoints, compact }: { article: Article; focal
<span className="text-muted-foreground text-[10px]">{timeAgo(new Date(article.publishedAt))}</span>
</div>
<h3 className="font-semibold text-card-foreground text-sm leading-snug line-clamp-2 group-hover:text-primary transition-colors">{article.title}</h3>
<p className={`text-xs text-muted-foreground mt-1.5 leading-relaxed flex-1 ${compact ? "line-clamp-2" : "line-clamp-4"}`}>{article.excerpt}</p>
{/* Kartica je visoka 300 px, kolikor meri oglas 300x250 z napisom
Anzeige. Za izvlecek ni prostora, ostanejo slika, rubrika, cas,
naslov na dve vrstici in stevilo ogledov. */}
<div className="flex items-center gap-2 mt-2 text-muted-foreground text-[10px]">
<Eye className="w-3 h-3" />
{article.views.toLocaleString()}
@@ -1068,38 +1067,15 @@ export default function Home() {
// naslednjo: oglas zasede levi stolpec cez dve vrstici, ob njem pa
// gresta dve vrsti novic (sest kartic). Prej je pod tremi karticami
// ob visokem oglasu ostal prazen prostor.
const jeOglasna = row.some((it) => it.type === "ad");
const naslednja = gridRows[ri + 1] || [];
if (jeOglasna && naslednja.length === 4 && !naslednja.some((it) => it.type === "ad" || it.type === "widget")) {
const oglas = row.find((it) => it.type === "ad")!;
const ostali = [...row.filter((it) => it.type !== "ad"), ...naslednja];
return (
<LazySection key={`ad-block-${ri}`} minHeight="560px">
{/* Oglas je 600 px. Dve vrstici kartic z razmikom 16 px se
ujameta natanko takrat, ko je kartica visoka 292 px. */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:auto-rows-[292px]">
<div className="lg:row-span-2 h-full empty:hidden" data-testid={`ad-grid-${oglas.key}`}>
<ArticleCardAd />
</div>
{ostali.slice(0, 6).map((item) =>
item.type === "video" && item.video
? <VideoCard key={item.key} video={item.video} />
: item.article
? <MediumCard key={item.key} article={item.article} focalPoints={focalPoints} compact />
: null
)}
</div>
</LazySection>
);
}
if (ri > 0 && gridRows[ri - 1]?.some((it) => it.type === "ad")) return null;
// 31. 8. 2026: oglas je zdaj 300x250 in gre v eno samo celico, zato
// zdruzevanja dveh vrstic ne rabimo vec.
return (
<LazySection key={`row-group-${ri}`} minHeight="280px">
<div>
{/* Trdna visina vrstice: brez nje je vsaka vrstica visoka toliko kot
najdaljsi izvlecek v njej (izmerjeno 369, 399, 418 px) in stran
ob vsakem nalaganju poskakuje. */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:auto-rows-[399px]">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:auto-rows-[300px]">
{row.map((item) =>
item.type === "widget"
? <div key={item.key} className="h-full overflow-hidden">{item.widget!.el}</div>