Fix board alignment when opening room chat

main
dev 4 days ago
parent c9c396187d
commit 6c9b1d2fb3

@ -1,6 +1,6 @@
# Servidor de Juegoland
Versión 20261004-10. Web, API y WebSockets en mesa-game, 0.0.0.0:3000.
Versión 20261004-11. Web, API y WebSockets en mesa-game, 0.0.0.0:3000.
El proxy Nginx existente de la red apunta a http://192.168.18.155:3000.
Nginx y el antiguo servicio mesa-web están deshabilitados en la VM.
@ -14,4 +14,6 @@ Damas mantiene la ficha seleccionada durante capturas encadenadas y permite reco
La interfaz consume `src/tokens.css`: tipografía proporcional de 16 a 18 px, espaciados, radios, sombras y colores de claro/oscuro y de las tres paletas. Los estilos globales se concentran en `src/app.css`; la geometría de los tableros permanece en sus componentes. `npm run design:check` se ejecuta durante el despliegue. Se revisaron catálogo, perfil, menús, invitaciones, avatar y salas en el navegador integrado, con anchos de 390, 565, 1440 y 3818 px. Los nombres y datos de partidas comparten escala en catálogo, perfil y panel lateral; la navegación inferior se ajustó a su altura real.
El chat aprovecha primero el margen derecho libre. A 1907×955, los cinco juegos conservan exactamente la posición y tamaño del tablero al abrirlo; en parchís y oca también se conserva el ancho de los controles. Se retiró la regla que convertía el tablero en una columna elástica y estrechaba los controles a 180 px. Se verificaron además 390×844, 1024×900, 1440×900, 3818×1886 y 932×430, sin desbordamiento horizontal. En pantalla horizontal de poca altura, tablero y acciones permanecen en columnas; el apilado del parchís se reserva a tabletas con altura suficiente.
PostgreSQL permanece en loopback, con base y rol dedicados. Credenciales y datos existentes se conservan. APT y npm operan por IPv4. Copias diarias activas a las 03:15 Europe/Madrid.

@ -14,6 +14,8 @@ Los espaciados siguen una base de 4 px: 4, 8, 12, 16, 20, 24, 32, 40, 48 y 64. H
El catálogo alinea título, descripción, datos y acción dentro de cada tarjeta. Las partidas pendientes y las salas comparten tamaños de nombre y metadatos. El texto de lectura se limita a 70 caracteres de ancho. En una sala, el tablero ocupa el espacio disponible y los controles y el chat mantienen una escala de interfaz propia.
El tablero y sus controles forman un conjunto compacto centrado. Al abrir el chat, el panel utiliza primero el margen libre de la derecha: si cabe, conserva las mismas coordenadas y dimensiones del tablero y los controles. Cuando falta espacio, el conjunto se desplaza solo lo necesario y el tablero reduce su tamaño si hace falta. En tabletas, el parchís coloca los controles debajo; en móvil, el chat se superpone y se cierra con su botón. El cálculo usa las dimensiones completas del área de juego, sin estrechar el contenedor ni convertir la columna del tablero en una franja elástica.
```text
Escritorio Móvil
menú | contenido alineado cabecera

@ -2724,11 +2724,11 @@ textarea::placeholder {
padding: var(--space-half) var(--space-1);
}
.match-room .room-layout {
--panel-reserve: 0px;
flex: 1;
min-height: 0;
display: block;
position: relative;
transition: padding-right var(--duration-normal) var(--ease-ui);
}
.match-room .play-area {
height: 100%;
@ -2932,14 +2932,10 @@ textarea::placeholder {
}
@media (min-width: 850px) {
.match-room .room-layout:has(.room-panel:popover-open) {
padding-right: calc(var(--size-popover) + var(--space-8));
}
.match-room .room-layout:has(.room-panel:popover-open) .parchis-board {
grid-template-columns: minmax(0, 1fr) 180px;
gap: var(--space-3);
--panel-reserve: calc(var(--size-popover) + var(--space-8));
}
}
@media (min-width: 850px) and (max-width: 1199px) {
@media (min-width: 850px) and (max-width: 1199px) and (min-height: 521px) {
.match-room .room-layout:has(.room-panel:popover-open) .parchis-controls {
width: 100%;
}
@ -3622,7 +3618,17 @@ form textarea {
--table-gap: clamp(16px, 2cqmin, 32px);
--board-size: min(
100cqh,
calc(100cqw - var(--control-width) - var(--table-gap))
calc(
100cqw - var(--control-width) - var(--table-gap) - var(--panel-reserve)
)
);
--table-width: calc(
var(--board-size) + var(--control-width) + var(--table-gap)
);
/* Use the right gutter first; move the table only when the panel would overlap it. */
--panel-intrusion: max(
0px,
calc(2 * var(--panel-reserve) - (100cqw - var(--table-width)))
);
display: grid;
flex: 1;
@ -3631,6 +3637,7 @@ form textarea {
grid-template-rows: minmax(0, 1fr);
gap: var(--table-gap);
justify-content: center;
padding-right: var(--panel-intrusion);
}
.match-room .board-surface {
align-self: center;
@ -3848,7 +3855,19 @@ form textarea {
box-shadow: 0 0 0 2px var(--player-solid);
}
.match-room .board-container {
width: min(100cqw, calc(100cqh - 34px), 1100px);
--board-size: min(
calc(100cqw - var(--panel-reserve)),
calc(100cqh - 34px),
1100px
);
width: var(--board-size);
margin-left: max(
0px,
min(
calc((100cqw - var(--board-size)) / 2),
calc(100cqw - var(--panel-reserve) - var(--board-size))
)
);
}
.table-game + .board-note {
display: none;
@ -3865,10 +3884,14 @@ form textarea {
color: var(--secondary);
font-size: var(--type-secondary);
}
@media (min-width: 850px) and (max-width: 1199px) {
@media (min-width: 850px) and (max-width: 1199px) and (min-height: 521px) {
.match-room .room-layout:has(.room-panel:popover-open) .parchis-board {
--board-size: min(100cqw, calc(100cqh - 150px));
grid-template-columns: minmax(0, 1fr);
--board-size: min(
calc(100cqw - var(--panel-reserve)),
calc(100cqh - 184px)
);
--table-width: var(--board-size);
grid-template-columns: minmax(0, var(--board-size));
grid-template-rows: minmax(0, var(--board-size)) auto;
align-content: center;
}
@ -3887,6 +3910,7 @@ form textarea {
.match-room .parchis-board,
.match-room .table-game {
--board-size: min(100cqw, calc(100cqh - 184px));
--table-width: var(--board-size);
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, var(--board-size)) auto;
align-content: start;

Loading…
Cancel
Save

Powered by TurnKey Linux.