Adjust ad positioning on article pages for better display

Modify `PageSideAds` component to accept `contentHalfWidth` prop for dynamic ad placement based on content container width, and update specific pages (article, about, datenschutz, empfang, impressum, search) to pass the correct values.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 23852c00-4779-460a-9e0c-d09fee4b6c92
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: a7feb44f-676a-4a21-8ede-a392a39b3b56
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/23852c00-4779-460a-9e0c-d09fee4b6c92/nlGTLC9
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-03-06 08:24:17 +00:00
parent d827d524f9
commit 155914238d
10 changed files with 603 additions and 772 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1006 KiB

View File

@ -121,10 +121,12 @@ export function MultiplexAd() {
);
}
export function PageSideAds() {
export function PageSideAds({ contentHalfWidth = 640 }: { contentHalfWidth?: number }) {
const gap = 10;
const offset = contentHalfWidth + gap;
return (
<div className="relative">
<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% - 640px - 170px)" }} data-testid="ad-left-sidebar">
<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">
<div className="pointer-events-auto">
<AdSense
slot="2398082838"
@ -133,7 +135,7 @@ export function PageSideAds() {
/>
</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% - 640px - 170px)" }} data-testid="ad-right-sidebar">
<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">
<div className="pointer-events-auto">
<AdSense
slot="2398082838"

View File

@ -9,7 +9,7 @@ export default function AboutPage() {
return (
<div className="min-h-screen bg-background">
<Header />
<PageSideAds />
<PageSideAds contentHalfWidth={384} />
<main className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div className="flex items-center gap-3 mb-8">
<Tv className="w-7 h-7 text-primary" />

View File

@ -164,7 +164,7 @@ export default function ArticlePage() {
return (
<div className="min-h-screen bg-background">
<Header />
<PageSideAds />
<PageSideAds contentHalfWidth={448} />
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<Link href="/">
<Button variant="ghost" size="sm" className="mb-6 gap-2" data-testid="button-back">

View File

@ -9,7 +9,7 @@ export default function DatenschutzPage() {
return (
<div className="min-h-screen bg-background">
<Header />
<PageSideAds />
<PageSideAds contentHalfWidth={384} />
<main className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div className="flex items-center gap-3 mb-8">
<Shield className="w-7 h-7 text-primary" />

View File

@ -38,7 +38,7 @@ export default function EmpfangPage() {
return (
<div className="min-h-screen bg-background">
<Header />
<PageSideAds />
<PageSideAds contentHalfWidth={448} />
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div className="flex items-center gap-3 mb-2">
<Tv className="w-7 h-7 text-primary" />

View File

@ -9,7 +9,7 @@ export default function ImpressumPage() {
return (
<div className="min-h-screen bg-background">
<Header />
<PageSideAds />
<PageSideAds contentHalfWidth={384} />
<main className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div className="flex items-center gap-3 mb-8">
<Scale className="w-7 h-7 text-primary" />

View File

@ -77,7 +77,7 @@ export default function SearchPage() {
return (
<div className="min-h-screen bg-background" data-testid="page-search">
<Header />
<PageSideAds />
<PageSideAds contentHalfWidth={512} />
<main className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
<Link href="/">
<button className="flex items-center gap-1 text-muted-foreground hover:text-foreground text-sm mb-4 transition-colors" data-testid="link-back-home">

View File

@ -1,7 +1,7 @@
{
"access_token": "sl.u.AGW_3g9U_e3m28SfOehKgi8FjZw0oThxhf69ffTm5JBSIV1cG0VU7Kj_ieTgcJ68g0SknJ4No918aH4cq8RudqZdbp4LaU5cGi4J0qWxdr5yP4d6NhtYkvQas5B9VqdLyuX3VCE6LtEgoTQZdgw6thKXK8qG_R2fTz5118AO4IODyUI1twXBmLiajqnnROY6qCtj0wZ1uLOaUU0r_lzMQR6gc3tZkdgiEQMqemuD7fuzea4WnYSIju8ZZAcVvelyGtjxmcS_ksTg-BNLQaPFRREBHPkH2SKpOvuxjZkitDEa2KVSuc5cxXGs5jrU9Mz16naVlW5XziJIJIQRND7-Euer17cV73ueCs-G95kMaKViO3fiGHgUKwY0uAj5C4V1n7JcmOgRZSjYxibU-WLRwGyHyhLwRvd81IA_sRcb4v0dVc-Cff6xsMUfww57xKRpAYHqq8rA8EA6hQ7K9BFG4_yUq7ST8DI0f0f6SE0V9at1EmuVudxoY945su4clr1JoF5J4TN-i6MnmQ7hx8YLmUYn2oHUO821wfH75j2YTr5LsaQL-fZ6IWYSMfsZJvQKWM-cfNWbzoAr6QaJRBTpzubw71sK-IzaTOk5PsEwpWlDoPEQY33zifJhAUWiA75yGZ-nH_y3YcUuxVF06y1qM83Rh1coBgg2yfGRXR79RoXR_eh3XRa6MVZJ14B0zJfaPX-UTCHtO0HuFLTAxrKdv6T9iUEv1wBSe8Rp2xvasIS0JQpCut0PicFOrJzeWgUq_I83EnxgOr8Z4fJ7JTDxUgjWuXuYwWngHGtq02wCqN3MBBEW8Qdz9P2ZVIICsU0avig43ZhwG2qf0QdV-58AwJeNsnS59u50AQEsvLLPAaLBRI9qT8MorNWq8feq1Fj88Rb20bt8LadU71Y69Bty-VEp525sXiDUcaz4HRU3czqylTfhDW0YlPmWh-Ak5A2MKkbma81Wnw4Mxf_7rspEzBQc4yVzschFxU_G1BuNBpYZKeqQxwDetUsMFpceCXDSW3yDPk4Fvz7wBisDjp6wBpknZxx6YPXNLjQczKhOuL57aA9tvhpN8wROHf8WY4LGXmA4i73btNVG1BhscOjVO962oO1VZjYil8QjWyOBG-v6U1kvIvh-ihQCNz1hKkZBf5Sovrvoyv2U6IE_njWUzOGuwDN80BOf2Viht860ND9EIRQfw31Doi__ZUqr_PeQDh2y72iQ6hlzcUbnq1CqRYzx_e4jPmD9S2YY318IUWINkj1j9kO01FYLNjtAejccLbSWVK52_QzRGkphJVgVU4J7wHHl1noz_wO1619xDs6kjw",
"access_token": "sl.u.AGWTxN887QjkoXzqbrgUCbpBS-LCgBoibzPyzhz8D7WkR3hV68Aw0ZTJt1SJlakIxWYsFWC84AWlC0Qq5xHZ8zAYRopgSNezE2e-dExQ1HSjW4MVlp_1FdpqCh1E82cGI15yvYKRMf2637Vai3wGK2R9u0j3AvZaZYVk6Wh7SBJwQ6gUvvJio_AolkxYbXK5tJTJeF7gBs9M2YfAWF6lA4SpeH4o4EKn-kZcurhhzxXW4zpPUUhdVi5WKPXsy9uUxKhu_sd1xZRnOjs0Niy3K31b73orF4p5zN9Vk36x-t1TcDu2Mfgn50jkTH0bJppFjaP2jieCsP5Bre_9kYExMKrf9k9hENRw4RqvYEaoJH2LVuZZk99Fwjzun9FMclFwdwaUhoGXWXzmMdHwIkK1WML6hrSjAIycw7mbKN4I85znXcFHUlznmoDdqTiaXWGOGy7NpFiEK1PT_SbZ8veOEUvv3aAHQJR-VhS_3O7CvVYbxu63MijnT054pieTadR2UQ0xRgWqugJ7qIKOiOY-20CF1LwYbMB4SNk4lfaMy_lbmKfWi_FmtE2j1sAWv6e0nxMnAclQYOVHQOvJP5W0cDXjD-AAVHcrm-tZVWoTV-EIWqHTlP5HpJ4IYMd1beqCDxGpUwjKilM30F56VZM-Bohn9eSPgW-uoX5r6G0coM-96oPL77FAp1-IuL5SmASrHC4lHyqmSNw5AcTTWqKQ6QscAaQ96aHmpH4pEJ7mG7RGi6_8s1Qeww08XmgcLx5GAWr2LewMOwjI-l5tHiIMSvCn_z0FdqrepLpBgkP97EE_h36jq8BON1LxOpFGKU3l6cSc9QFMN2vP5VmnAU25dih-Mh_XSJOQ32KgEydJ9-X3t0WEYUijsx37_6N8lCoCXyuoZye98rdVWeA56N4h2xmdUGHnLmUqFH3ASyNebJ9W7iFbBz0tltqwxHr_H8nRydolPMtmkUnPjkbJwR9Nf7mrJ6MMK9kViR7ZVwpVgWJDugWdOIewm1-mvyp814zTyndBXlzd7n0z26s900RpZOBm5AIDPujnHD3j9FUH4nLzswrCMd3PQ_j8RK-nhXXlYfAY6l8WNsVMRn2T1ctjK3LQqFijMN6u2YMzD5BFnkHSKS6gjxPOoibGEGwCJ1ndnlgpTslsLpLR88uU1Tpqb33VLQKkkzZc5Mx1wnA3-CSlbdxs01KTF1bisURnB03SRMuBx232avkImc_AvipOPiOkiDQ3YWm0rWES87wBVBc6FFEQ9Kmmp8ONv7bmmOB5UfVUpYmHr23Kd25Ll9kvZOlJ1kgP01a9wYTuOGpvRmeVSQ",
"refresh_token": "8-fiK0Io8Z8AAAAAAAAAAXn1QIGTwFTVWKF47COXY2bjqYlWyd4aRnFtQJ7usZ0y",
"expires_at": 1772746381053,
"expires_at": 1772799637434,
"app_key": "sjwprgka82p8tpv",
"app_secret": "g3vuczqo0rx3crz"
}

File diff suppressed because it is too large Load Diff