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

Ensure ads always display a background pattern, preventing blank spaces

Browse Source 
Remove the `hidden` attribute from ad components and the `lg:block` condition from `ArtistPatternBg` to ensure a background pattern is always visible, even when ads fail to load.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 3c78d37e-f103-4480-8bdf-e7de89079bb0
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/V5dWXpq
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-03-05 12:14:28 +00:00
parent 7203a47502
commit b69a3bdc0a
2 changed files with 11 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
client/src/components/adsense.tsx
View File

@ -82,48 +82,40 @@ let adSeedCounter = 1;
export function ArticleCardAd() { export function ArticleCardAd() {
const seed = useMemo(() => adSeedCounter++, []); const seed = useMemo(() => adSeedCounter++, []);
const [filled, setFilled] = useState(false);
return ( return (
<div className={filled ? "" : "hidden"}> <ArtistPatternBg className="rounded-md border border-card-border h-full bg-card" seed={seed}>
<ArtistPatternBg className="rounded-md border border-card-border h-full bg-card" seed={seed}> <AdSense
<AdSense slot="3854634730"
slot="3854634730" format="fluid"
format="fluid" layoutKey="-6r+cy-10+8a-3"
layoutKey="-6r+cy-10+8a-3" style={{ display: "block" }}
style={{ display: "block" }} />
onAdStatus={(f) => setFilled(f)} </ArtistPatternBg>
/>
</ArtistPatternBg>
</div>
); );
} }
export function InArticleAd() { export function InArticleAd() {
const [filled, setFilled] = useState(false);
return ( return (
<div className={filled ? "my-8 py-4 border-y border-border/30" : "hidden"}> <div className="my-8 py-4 border-y border-border/30">
<div className="text-[10px] text-muted-foreground/40 text-center mb-2 uppercase tracking-widest">Anzeige</div> <div className="text-[10px] text-muted-foreground/40 text-center mb-2 uppercase tracking-widest">Anzeige</div>
<AdSense <AdSense
slot="4154017639" slot="4154017639"
format="fluid" format="fluid"
layout="in-article" layout="in-article"
style={{ display: "block", textAlign: "center" }} style={{ display: "block", textAlign: "center" }}
onAdStatus={(f) => setFilled(f)}
/> />
</div> </div>
); );
} }
export function MultiplexAd() { export function MultiplexAd() {
const [filled, setFilled] = useState(false);
return ( return (
<div className={filled ? "bg-card rounded-md border border-card-border overflow-hidden" : "hidden"}> <div className="bg-card rounded-md border border-card-border overflow-hidden">
<AdSense <AdSense
slot="4593001335" slot="4593001335"
format="autorelaxed" format="autorelaxed"
style={{ display: "block" }} style={{ display: "block" }}
className="w-full min-h-[250px]" className="w-full min-h-[250px]"
onAdStatus={(f) => setFilled(f)}
/> />
</div> </div>
); );

2
client/src/components/artist-pattern-bg.tsx
View File

@ -53,7 +53,7 @@ export default function ArtistPatternBg({ children, className = "", seed = 42 }:
return ( return (
<div className={`relative overflow-hidden ${className}`}> <div className={`relative overflow-hidden ${className}`}>
<div className="absolute inset-0 pointer-events-none select-none hidden lg:block" aria-hidden="true"> <div className="absolute inset-0 pointer-events-none select-none" aria-hidden="true">
{items.map((item, i) => ( {items.map((item, i) => (
<span <span
key={i} key={i}