diff --git a/Public/AdsensePlacement/Infrastructure/Ui/AdsensePlacementRenderer.php b/Public/AdsensePlacement/Infrastructure/Ui/AdsensePlacementRenderer.php index 4fba7081..89842057 100644 --- a/Public/AdsensePlacement/Infrastructure/Ui/AdsensePlacementRenderer.php +++ b/Public/AdsensePlacement/Infrastructure/Ui/AdsensePlacementRenderer.php @@ -330,13 +330,13 @@ final class AdsensePlacementRenderer 'position' => 'fixed', 'top' => $topOffset . 'px', 'width' => 'calc((100vw - var(--roi-container-width-numeric, 1320px)) / 2 - 20px)', + 'min-width' => '170px', 'height' => $height . 'px', 'display' => 'flex', 'justify-content' => 'center', 'align-items' => 'flex-start', 'z-index' => '100', - 'transition' => 'top 0.2s ease-out, width 0.2s ease-out', - 'overflow' => 'hidden', + 'transition' => 'top 0.2s ease-out, opacity 0.3s ease-out', ]); // Posicion rail izquierdo - 10px del borde del viewport @@ -424,6 +424,7 @@ final class AdsensePlacementRenderer var navbar = document.querySelector('nav.navbar'); var hero = document.querySelector('.hero-section, .roi-hero, [class*=\"hero\"]'); var featuredImage = document.querySelector('.featured-image-container, .post-thumbnail, .entry-image'); + var footer = document.querySelector('footer, .site-footer, #footer, [role=\"contentinfo\"]'); function getNavbarHeight() { if (navbar) { @@ -438,6 +439,18 @@ final class AdsensePlacementRenderer function adjustRailPosition() { var navHeight = getNavbarHeight(); var newTop = CONFIG.defaultTop; + var shouldHide = false; + + // Detectar si el footer esta visible y los rails lo tocarian + if (footer) { + var footerRect = footer.getBoundingClientRect(); + var railHeight = railAds[0] ? railAds[0].offsetHeight : {$height}; + + // Si el footer esta en la pantalla y el rail lo tocaria, ocultar + if (footerRect.top < window.innerHeight && footerRect.top < (newTop + railHeight + 50)) { + shouldHide = true; + } + } // Buscar el elemento mas bajo visible en pantalla var elementsToCheck = [hero, featuredImage].filter(Boolean); @@ -471,9 +484,20 @@ final class AdsensePlacementRenderer // Asegurar minimo respetando navbar newTop = Math.max(newTop, navHeight + CONFIG.gap); - // Aplicar posicion a todos los rails + // Re-verificar colision con footer con la nueva posicion + if (footer && !shouldHide) { + var footerRect = footer.getBoundingClientRect(); + var railHeight = railAds[0] ? railAds[0].offsetHeight : {$height}; + if (footerRect.top < (newTop + railHeight + 30)) { + shouldHide = true; + } + } + + // Aplicar posicion y visibilidad a todos los rails for (var i = 0; i < railAds.length; i++) { railAds[i].style.top = Math.round(newTop) + 'px'; + railAds[i].style.opacity = shouldHide ? '0' : '1'; + railAds[i].style.pointerEvents = shouldHide ? 'none' : 'auto'; } }