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

Update ad display to prevent overlap with page footer

Browse Source 
Modify AdSense component to remove IntersectionObserver logic and apply isolation-isolate to footer to ensure ads do not overlap.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 23852c00-4779-460a-9e0c-d09fee4b6c92
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 5bb0345a-5f8a-44c4-bba7-d5949ad9defa
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/23852c00-4779-460a-9e0c-d09fee4b6c92/ee1CXlO
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-03-06 15:16:23 +00:00
parent 9db1b3c6a2
commit 3af8f8852f
3 changed files with 3 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1772810165930.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 167 KiB

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

@ -124,26 +124,9 @@ export function MultiplexAd() {
export function PageSideAds({ contentHalfWidth = 640 }: { contentHalfWidth?: number }) { export function PageSideAds({ contentHalfWidth = 640 }: { contentHalfWidth?: number }) {
const gap = 10; const gap = 10;
const offset = contentHalfWidth + gap; const offset = contentHalfWidth + gap;
const [footerVisible, setFooterVisible] = useState(false);
useEffect(() => {
const footer = document.querySelector("footer");
if (!footer) return;
const observer = new IntersectionObserver(
([entry]) => setFooterVisible(entry.isIntersecting),
{ threshold: 0 }
);
observer.observe(footer);
return () => observer.disconnect();
}, []);
return ( return (
<div className="relative"> <div className="relative">
<div <div className="hidden 2xl:flex fixed top-0 bottom-0 w-[160px] z-10 items-center justify-center pointer-events-none" style={{ left: `calc(50% - ${offset}px - 160px)` }} data-testid="ad-left-sidebar">
className="hidden 2xl:flex fixed top-0 bottom-0 w-[160px] z-10 items-center justify-center pointer-events-none transition-opacity duration-300"
style={{ left: `calc(50% - ${offset}px - 160px)`, opacity: footerVisible ? 0 : 1 }}
data-testid="ad-left-sidebar"
>
<div className="pointer-events-auto"> <div className="pointer-events-auto">
<AdSense <AdSense
slot="2398082838" slot="2398082838"
@ -152,11 +135,7 @@ export function PageSideAds({ contentHalfWidth = 640 }: { contentHalfWidth?: num
/> />
</div> </div>
</div> </div>
<div <div className="hidden 2xl:flex fixed top-0 bottom-0 w-[160px] z-10 items-center justify-center pointer-events-none" style={{ right: `calc(50% - ${offset}px - 160px)` }} data-testid="ad-right-sidebar">
className="hidden 2xl:flex fixed top-0 bottom-0 w-[160px] z-10 items-center justify-center pointer-events-none transition-opacity duration-300"
style={{ right: `calc(50% - ${offset}px - 160px)`, opacity: footerVisible ? 0 : 1 }}
data-testid="ad-right-sidebar"
>
<div className="pointer-events-auto"> <div className="pointer-events-auto">
<AdSense <AdSense
slot="2398082838" slot="2398082838"

2
client/src/components/footer.tsx
View File

@ -10,7 +10,7 @@ const SOCIAL_LINKS = [
export default function Footer() { export default function Footer() {
return ( return (
<footer className="border-t border-border bg-card mt-16 relative z-20" data-testid="footer"> <footer className="border-t border-border bg-[hsl(var(--card))] mt-16 relative z-20 isolation-isolate" data-testid="footer">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8"> <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div> <div>