diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue index 0a27631..6b61227 100644 --- a/frontend/src/components/AppHeader.vue +++ b/frontend/src/components/AppHeader.vue @@ -10,12 +10,20 @@
+
@@ -60,6 +68,7 @@ export default { data() { return { adInitialized: false, + viewportWidth: typeof window !== 'undefined' ? window.innerWidth : 1280, /** Endonyme: jede Sprache bezeichnet sich in ihrer eigenen Sprache. */ uiLocaleOptions: [ { value: 'de', nativeLabel: 'Deutsch' }, @@ -89,7 +98,7 @@ export default { }; }, showHeaderAd() { - if (!this.adSlotId) { + if (!this.activeAdSlotId) { return false; } const path = this.$route?.path || ''; @@ -103,9 +112,27 @@ export default { path.startsWith('/falukant/home') ); }, - adSlotId() { - const slot = String(import.meta.env.VITE_ADSENSE_HEADER_SLOT || '').trim(); + desktopAdSlotId() { + const slot = String( + import.meta.env.VITE_ADSENSE_HEADER_SLOT_DESKTOP + || import.meta.env.VITE_ADSENSE_HEADER_SLOT + || '' + ).trim(); return /^\d{6,}$/.test(slot) ? slot : ''; + }, + mobileAdSlotId() { + const slot = String( + import.meta.env.VITE_ADSENSE_HEADER_SLOT_MOBILE + || import.meta.env.VITE_ADSENSE_HEADER_SLOT + || '' + ).trim(); + return /^\d{6,}$/.test(slot) ? slot : ''; + }, + isMobileAd() { + return this.viewportWidth < 960; + }, + activeAdSlotId() { + return this.isMobileAd ? this.mobileAdSlotId : this.desktopAdSlotId; } }, watch: { @@ -116,9 +143,30 @@ export default { this.$nextTick(() => this.initHeaderAd()); } } + }, + isMobileAd(next, prev) { + if (next !== prev) { + this.adInitialized = false; + if (this.showHeaderAd) { + this.$nextTick(() => this.initHeaderAd()); + } + } + } + }, + mounted() { + if (typeof window !== 'undefined') { + window.addEventListener('resize', this.handleResize, { passive: true }); + } + }, + beforeUnmount() { + if (typeof window !== 'undefined') { + window.removeEventListener('resize', this.handleResize); } }, methods: { + handleResize() { + this.viewportWidth = window.innerWidth; + }, initHeaderAd() { if (!this.showHeaderAd) return; if (this.adInitialized) return; @@ -252,28 +300,26 @@ export default { } .header-ad { - flex: 1 1 260px; - min-width: 180px; - max-width: 560px; - min-height: 54px; - max-height: 54px; + flex: 1 1 728px; + min-width: 320px; + max-width: 728px; + min-height: 90px; + max-height: 90px; display: flex; align-items: center; + justify-content: center; overflow: hidden; } .header-ad .adsbygoogle { - width: 100% !important; - height: 54px !important; - min-height: 54px !important; - max-height: 54px !important; + width: 100%; + max-width: 100%; overflow: hidden !important; } .header-ad :deep(iframe), .header-ad :deep([id^="aswift_"]) { - height: 54px !important; - max-height: 54px !important; + max-width: 100% !important; } .header-meta__context { @@ -407,22 +453,26 @@ export default { .header-ad { order: 3; width: 100%; - max-width: none; + max-width: 320px; flex: 1 1 100%; - min-height: 44px; - max-height: 44px; + min-height: 50px; + max-height: 50px; } .header-ad .adsbygoogle { - height: 44px !important; - min-height: 44px !important; - max-height: 44px !important; + width: 320px !important; + min-width: 320px !important; + max-width: 320px !important; + height: 50px !important; + min-height: 50px !important; + max-height: 50px !important; } .header-ad :deep(iframe), .header-ad :deep([id^="aswift_"]) { - height: 44px !important; - max-height: 44px !important; + width: 320px !important; + height: 50px !important; + max-height: 50px !important; } .header-meta {