usite-sas-bic/whatsapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pantalla TV: el video pasa de formato reel a cuadrado de verdad

Browse Source 
El cambio anterior hizo cuadrada la caja, pero la dejó dentro de la columna
fija del 29% —que es proporción de reel—, así que el cuadrado salía diminuto
y con medio espacio vertical vacío.

Ahora la columna se dimensiona sola (grid `auto`) y el cuadrado toma todo el
alto del cuerpo, deduciendo el ancho de ahí. Queda tan grande como quepa, con
tope de media pantalla para no ahogar la columna de llamados.

El aspect-ratio va en el elemento interno y no en el contenedor: con
box-sizing border-box, el padding asimétrico del contenedor deformaba la
proporción y el "cuadrado" no quedaba cuadrado.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
2026-08-13 08:22:10 -05:00
co-authored by Claude Opus 5
parent 645ed677ea
commit c7ff8e4ead
1 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/turnero/views/display_global.php
+17 -9
View File
@@ -112,8 +112,12 @@ $_hasVideo = (bool)$_tvPlaylist;
overflow: hidden;
position: relative;
}
/* La columna del video se dimensiona sola: `auto` la deja del ancho que
pida su contenido, y el contenido es un cuadrado tan alto como el
cuerpo. Antes era una franja fija del 29% —proporción de reel—, así
que un video cuadrado quedaba diminuto y con medio espacio vacío. */
.pg-body.has-video {
grid-template-columns: 1fr 29%;
grid-template-columns: 1fr auto;
}
.pg-body.has-video .turno-activo { display: none; }
@@ -240,25 +244,29 @@ $_hasVideo = (bool)$_tvPlaylist;
}
.ul-item.activo .ul-dest { color: rgba(255,255,255,.85); }
/* ── Video reel ──
El material es cuadrado. Antes la caja ocupaba todo el alto de una
columna angosta y, con object-fit:cover, del cuadrado solo se veía
una franja vertical del centro: se perdían los bordes del video.
Ahora la caja es cuadrada y se centra, así entra completo. */
/* ── Video cuadrado ──
El material ya no es de proporción reel sino cuadrado. La caja toma
todo el alto disponible y el ancho lo deduce de ahí (aspect-ratio),
así que el cuadrado sale tan grande como quepa. Se limita a la mitad
de la pantalla para no ahogar la columna de los llamados. */
.reel-wrap {
display: none;
height: 100%;
max-width: 50vw;
overflow: hidden;
padding: 8px 8px 8px 0;
align-items: center;
justify-content: center;
}
.reel-wrap.has-video { display: flex; }
/* El cuadrado se define aquí y no en el contenedor: con box-sizing
border-box, el padding asimétrico del contenedor deformaría la
proporción. La columna se ajusta sola al ancho que resulte. */
.reel-wrap .reel-inner {
width: 100%;
height: auto;
height: 100%;
width: auto;
aspect-ratio: 1 / 1;
max-height: 100%;
max-width: 100%;
border-radius: 16px;
overflow: hidden;
box-shadow: -8px 0 30px rgba(0,0,0,.08);