collin/mahjong · 01373481
The buttons stand at the end of the row, not at the end of the strip
Collin Richards · 2026-08-25 08:37 UTC · 01373481a1e2e5ee464a0c3685d854bca17b247e · parent 1c51666e · browse files
modifiedsrc/styles.css+29 −11
| ⋯ 15 unchanged lines | |||
| 16 | 16 | tiles, and they are the same tile as the ones under them — 打出 and 碰 are | |
| 17 | 17 | things you do with a tile, so they are drawn as one. */ | |
| 18 | 18 | --bar-h: calc(var(--tile-w) * 1.375); | |
| 19 | + | /* The daylight between two tiles standing side by side in a row. The action | |
| 20 | + | buttons are tiles too, so it is the gap on either side of them as well — | |
| 21 | + | one number, and the row is evenly spaced end to end. */ | |
| 22 | + | --hand-gap: 2px; | |
| 19 | 23 | /* Largest tile a strip can hold. Edge inwards it has to fit the melds (a | |
| 20 | 24 | full tile, 1.375 tall, since they are the same tiles as the ones in the | |
| 21 | 25 | hand), the button bar, the hand (1.71 + 6px) and the nameplate (28px), plus | |
| ⋯ 251 unchanged lines | |||
| 273 | 277 | /* ---------- seat sections ---------- */ | |
| 274 | 278 | .hand { | |
| 275 | 279 | display: flex; | |
| 276 | - | gap: 2px; | |
| 280 | + | gap: var(--hand-gap); | |
| 277 | 281 | /* the extra top room is where the 摸 tag sits */ | |
| 278 | 282 | height: calc(var(--tile-w) * 1.71 + 6px); | |
| 279 | 283 | padding-top: calc(var(--tile-w) * 0.34); | |
| ⋯ 189 unchanged lines | |||
| 469 | 473 | middle of the strip where it has always been, and the bar is taken out of the | |
| 470 | 474 | flow and hung on the right-hand end — so a button arriving moves nothing at | |
| 471 | 475 | all, neither the tiles under it nor the sets and flowers above. */ | |
| 476 | + | /* Three columns: the room to the left of the hand, the hand, and the room to | |
| 477 | + | the right of it. The two outside columns are the same `1fr`, so the hand is | |
| 478 | + | centred in the strip and stays centred whether or not there is a button — and | |
| 479 | + | the bar starts at the *start* of the right-hand column, which is exactly | |
| 480 | + | where the tiles stop. A button is one more tile at the end of the row, one | |
| 481 | + | tile-gap along, rather than something parked at the far edge of the strip. | |
| 482 | + | ||
| 483 | + | `1fr` rather than `minmax(0, 1fr)`: a bar crowded with claim buttons is | |
| 484 | + | allowed to push the hand along instead of being cut off by the strip. */ | |
| 472 | 485 | .hand-row { | |
| 473 | 486 | position: relative; | |
| 474 | - | display: flex; | |
| 475 | - | justify-content: center; | |
| 476 | - | align-items: flex-end; | |
| 487 | + | display: grid; | |
| 488 | + | grid-template-columns: 1fr auto 1fr; | |
| 489 | + | column-gap: var(--hand-gap); | |
| 490 | + | align-items: end; | |
| 477 | 491 | align-self: stretch; | |
| 478 | 492 | flex: none; | |
| 479 | 493 | } | |
| 494 | + | :root:not(.compact) .hand-row > .hand { | |
| 495 | + | grid-column: 2; | |
| 496 | + | } | |
| 497 | + | :root:not(.compact) .hand-row > .actionbar { | |
| 498 | + | grid-column: 3; | |
| 499 | + | justify-self: start; | |
| 500 | + | } | |
| 480 | 501 | .actionbar { | |
| 481 | - | position: absolute; | |
| 482 | - | right: 0; | |
| 483 | - | bottom: 0; | |
| 484 | - | height: 100%; | |
| 485 | 502 | display: flex; | |
| 486 | - | gap: 8px; | |
| 503 | + | /* The gap the tiles keep between themselves, so a run of buttons reads as a | |
| 504 | + | run of tiles rather than as a toolbar. */ | |
| 505 | + | gap: var(--hand-gap); | |
| 487 | 506 | /* On the same line the tiles stand on, since they are tiles too. */ | |
| 488 | 507 | align-items: flex-end; | |
| 489 | - | justify-content: flex-end; | |
| 490 | - | padding-right: calc(var(--tile-w) * 0.4); | |
| 508 | + | justify-content: flex-start; | |
| 491 | 509 | flex-wrap: wrap; | |
| 492 | 510 | flex: none; | |
| 493 | 511 | } | |
| ⋯ 2164 unchanged lines | |||