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/components/adsense.tsx
+1 -1
View File
@@ -195,7 +195,7 @@ export function ArticleCardAd() {
<AdSense
slot="8009824249"
responsive={false}
style={{ display: "inline-block", width: "300px", height: "600px" }}
style={{ display: "inline-block", width: "300px", height: "250px" }}
onAdStatus={setFilled}
/>
</div>
client/src/pages/category.tsx
+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.
Zato so vrstice zaklenjene na 292 px, oglas pa zasede dve, tako
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 articles = data.articles;
@@ -169,7 +169,7 @@ export default function CategoryPage({ fixedCategory }: { fixedCategory?: string
const adCol = row === 0 ? 3 : row % 4;
for (let col = 0; col < 4; col++) {
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) {
const a = articles[ai];
items.push(
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>