feat(rail-ads): rails responsive que llenan el espacio disponible

- Ancho calculado automaticamente: (viewport - container) / 2 - 20px
- 10px margen del viewport + 10px gap al container
- Selector simplificado: solo altura (250-1050px)
- AdSense usa data-full-width-responsive para adaptarse
- Media query actualizada: oculta en pantallas < 1620px
This commit is contained in:
FrankZamora
2025-11-27 21:55:04 -06:00
parent 070ee7398c
commit 6b6ebd3c6d
3 changed files with 72 additions and 135 deletions

View File

@@ -462,51 +462,22 @@ final class AdsensePlacementFormBuilder
$html .= ' </div>';
$html .= '</div>';
// Format select - Multiples anchos y alturas disponibles
$railFormat = $this->renderer->getFieldValue($cid, 'behavior', 'rail_format', 'skyscraper');
$html .= $this->buildSelect($cid . 'RailFormat', 'Formato',
// Format select - Solo altura (el ancho es responsive)
$railFormat = $this->renderer->getFieldValue($cid, 'behavior', 'rail_format', 'h600');
$html .= $this->buildSelect($cid . 'RailFormat', 'Altura del Rail',
$railFormat,
[
// 130px width
'w130-h300' => '130x300',
'w130-h400' => '130x400',
'w130-h500' => '130x500',
'w130-h600' => '130x600',
// 140px width
'w140-h300' => '140x300',
'w140-h400' => '140x400',
'w140-h500' => '140x500',
'w140-h600' => '140x600',
// 150px width
'w150-h300' => '150x300',
'w150-h400' => '150x400',
'w150-h500' => '150x500',
'w150-h600' => '150x600',
// 160px width
'slim-small' => '160x300',
'slim-medium' => '160x400',
'slim-large' => '160x500',
'skyscraper' => '160x600 (Skyscraper)',
'slim-xlarge' => '160x700',
'wide-skyscraper' => '160x800',
// 300px width
'w300-h250' => '300x250 (Medium Rectangle)',
'half-page' => '300x600 (Half Page)',
'large-skyscraper' => '300x1050 (Large Skyscraper)',
// 400px width
'w400-h300' => '400x300',
'w400-h400' => '400x400',
'w400-h600' => '400x600',
// 500px width
'w500-h300' => '500x300',
'w500-h400' => '500x400',
'w500-h600' => '500x600',
// 600px width
'w600-h300' => '600x300',
'w600-h400' => '600x400',
'w600-h600' => '600x600'
'h250' => '250px (Compacto)',
'h300' => '300px (Pequeno)',
'h400' => '400px (Mediano)',
'h500' => '500px',
'h600' => '600px (Recomendado)',
'h700' => '700px',
'h800' => '800px (Grande)',
'h1050' => '1050px (Extra grande)'
]
);
$html .= '<small class="text-muted d-block mt-1 mb-2">El ancho se ajusta automaticamente al espacio disponible.</small>';
// Top offset - Select con opciones predefinidas
$topOffset = $this->renderer->getFieldValue($cid, 'behavior', 'rail_top_offset', '300');