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

This commit is contained in:
2026-08-31 18:08:45 +02:00
parent fe2804cc4d
commit 2f9071d604
3 changed files with 10 additions and 34 deletions
+1 -1
View File
@@ -195,7 +195,7 @@ export function ArticleCardAd() {
<AdSense <AdSense
slot="8009824249" slot="8009824249"
responsive={false} responsive={false}
style={{ display: "inline-block", width: "300px", height: "600px" }} style={{ display: "inline-block", width: "300px", height: "250px" }}
onAdStatus={setFilled} onAdStatus={setFilled}
/> />
</div> </div>
+2 -2
View File
@@ -156,7 +156,7 @@ export default function CategoryPage({ fixedCategory }: { fixedCategory?: string
{/* Oglas je fiksen 300x600 in bi vrstico raztegnil na svojo visino. {/* Oglas je fiksen 300x600 in bi vrstico raztegnil na svojo visino.
Zato so vrstice zaklenjene na 292 px, oglas pa zasede dve, tako Zato so vrstice zaklenjene na 292 px, oglas pa zasede dve, tako
da se visini ujameta in pod karticami ni praznega prostora. */} da se visini ujameta in pod karticami ni praznega prostora. */}
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5 lg:auto-rows-[292px]"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5 lg:auto-rows-[300px]">
{(() => { {(() => {
const items: React.ReactNode[] = []; const items: React.ReactNode[] = [];
const articles = data.articles; const articles = data.articles;
@@ -169,7 +169,7 @@ export default function CategoryPage({ fixedCategory }: { fixedCategory?: string
const adCol = row === 0 ? 3 : row % 4; const adCol = row === 0 ? 3 : row % 4;
for (let col = 0; col < 4; col++) { for (let col = 0; col < 4; col++) {
if (col === adCol) { if (col === adCol) {
items.push(<div key={`ad-row-${row}`} className="lg:row-span-2 h-full empty:hidden"><ArticleCardAd /></div>); items.push(<div key={`ad-row-${row}`} className="h-full empty:hidden"><ArticleCardAd /></div>);
} else if (ai < articles.length) { } else if (ai < articles.length) {
const a = articles[ai]; const a = articles[ai];
items.push( items.push(
+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"> <h3 className="font-semibold text-card-foreground text-sm leading-snug line-clamp-2 group-hover:text-primary transition-colors">
{video.shortTitle || video.title} {video.shortTitle || video.title}
</h3> </h3>
<p className="text-xs text-muted-foreground mt-1.5 leading-relaxed flex-1 line-clamp-3"> <div className="flex-1" />
{(video.teaser || "").replace(/^Musik News aus Schlager & Volksmusik:\s*/i, "") ||
"Jetzt ansehen auf FOLX TV"}
</p>
<div className="flex items-center gap-2 mt-2 text-muted-foreground text-[10px]"> <div className="flex items-center gap-2 mt-2 text-muted-foreground text-[10px]">
<Play className="w-3 h-3" /> <Play className="w-3 h-3" />
Video ansehen 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> <span className="text-muted-foreground text-[10px]">{timeAgo(new Date(article.publishedAt))}</span>
</div> </div>
<h3 className="font-semibold text-card-foreground text-sm leading-snug line-clamp-2 group-hover:text-primary transition-colors">{article.title}</h3> <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]"> <div className="flex items-center gap-2 mt-2 text-muted-foreground text-[10px]">
<Eye className="w-3 h-3" /> <Eye className="w-3 h-3" />
{article.views.toLocaleString()} {article.views.toLocaleString()}
@@ -1068,38 +1067,15 @@ export default function Home() {
// naslednjo: oglas zasede levi stolpec cez dve vrstici, ob njem pa // naslednjo: oglas zasede levi stolpec cez dve vrstici, ob njem pa
// gresta dve vrsti novic (sest kartic). Prej je pod tremi karticami // gresta dve vrsti novic (sest kartic). Prej je pod tremi karticami
// ob visokem oglasu ostal prazen prostor. // ob visokem oglasu ostal prazen prostor.
const jeOglasna = row.some((it) => it.type === "ad"); // 31. 8. 2026: oglas je zdaj 300x250 in gre v eno samo celico, zato
const naslednja = gridRows[ri + 1] || []; // zdruzevanja dveh vrstic ne rabimo vec.
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;
return ( return (
<LazySection key={`row-group-${ri}`} minHeight="280px"> <LazySection key={`row-group-${ri}`} minHeight="280px">
<div> <div>
{/* Trdna visina vrstice: brez nje je vsaka vrstica visoka toliko kot {/* Trdna visina vrstice: brez nje je vsaka vrstica visoka toliko kot
najdaljsi izvlecek v njej (izmerjeno 369, 399, 418 px) in stran najdaljsi izvlecek v njej (izmerjeno 369, 399, 418 px) in stran
ob vsakem nalaganju poskakuje. */} 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) => {row.map((item) =>
item.type === "widget" item.type === "widget"
? <div key={item.key} className="h-full overflow-hidden">{item.widget!.el}</div> ? <div key={item.key} className="h-full overflow-hidden">{item.widget!.el}</div>