fix(ui): landscape board zoom/pan + rack tile rendering, shorter mobile block label
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 57s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m28s
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 57s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m28s
Bugs surfaced while testing in VK but present on every platform (verified across browsers, not VK-specific): - Rack tiles: the letter used a fixed rem size, so in landscape — where tiles shrink below 46px in the narrow left panel — it overflowed and dropped into the bottom-left corner. Size it relative to the rack (cqw, like the board's labels; the tile's own container-query size resolves unreliably under flex + aspect-ratio). - Landscape board zoom positioned "in two steps": the per-frame clamp-to-max reached the wide axis before the tall one. Interpolate both scroll axes together by time over the grow/shrink transition instead (settles on zoom-out too). - The zoomed board could not be panned with a mouse (touch scrolls the overflow:auto viewport natively; a mouse cannot drag-scroll a div). Add a drag-to-pan handler, active only while zoomed, off pending tiles, past a small movement threshold, swallowing the trailing click so it does not also act on a cell. - Shorten the in-game block-confirm label ru "Блокируем?" -> "В бан?" (the long form overflowed the seat score chip on mobile).
This commit is contained in:
@@ -112,12 +112,29 @@
|
||||
/* Landscape: the rack sits in a fixed-width left panel, so the tiles share the panel width
|
||||
(capped at the portrait size) and shrink below it when the panel is narrow, instead of the
|
||||
viewport-width measure that would overflow seven tiles in a column. */
|
||||
.rack.landscape {
|
||||
/* Size the tile glyphs relative to the rack (the board sizes its labels the same way, on its
|
||||
.scaler container). The tile is a flex + aspect-ratio item whose OWN container-query size
|
||||
resolves unreliably, so the rack — which has a definite width — is the query container. A
|
||||
fixed-rem letter overflowed the tile once it shrank below 46px in a narrow left panel and
|
||||
dropped into the bottom-left corner. The cqw values track the rack≈7×tile relation. */
|
||||
container-type: inline-size;
|
||||
}
|
||||
.rack.landscape .tile {
|
||||
flex: 1 1 0;
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
max-width: 46px;
|
||||
}
|
||||
.rack.landscape .letter {
|
||||
font-size: 6cqw;
|
||||
}
|
||||
.rack.landscape .val {
|
||||
font-size: 3.1cqw;
|
||||
}
|
||||
.rack.landscape .star {
|
||||
font-size: 7.6cqw;
|
||||
}
|
||||
/* While reordering, tiles at/after the drop slot slide right to open a gap there (one
|
||||
tile width plus the rack gap), so the drop position is visible. */
|
||||
.rack.reordering .tile {
|
||||
|
||||
Reference in New Issue
Block a user