mirror of
https://github.com/tiennm99/noitu.git
synced 2026-10-13 22:16:20 +00:00
fix(web): give the chain three rows to be read in
Its floor was a row and a half, which is what a finished game left it: the panel and the lobby took the column and the transcript became a sliver with the top card sliced. A row and a half of history is not history. Three rows now, and the page grows past the window rather than taking a fourth off the list. To pay for them the compact room code under a result is a line instead of a card — its border and padding were 30px of the same screen, and the code and its copy button are all that line was ever carrying. Measured with two players in a room, board and chat side by side: in a game the chain shows every word played at 1080, 900 and 768 tall. After one, 1080 still shows them all with nothing scrolling, and a shorter window keeps its three rows and scrolls for the rest. Four seats, a loser's suggestions and a full lobby come to 989 against 979 — ten pixels, where before these two changes it was 300.
This commit is contained in:
1 parent
aec9d4ad6f
commit
dd3b46397f
2 files changed
+17
-6
No files matched your search
@@ -163,9 +163,15 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
/* overflow-y sets a flex item's automatic minimum size to 0, and the
|
/* overflow-y sets a flex item's automatic minimum size to 0, and the
|
||||||
shell is pinned at exactly 100dvh — so on a short viewport, which is
|
shell is pinned at exactly 100dvh — so on a short viewport, which is
|
||||||
what an open keyboard leaves, the list would shrink to nothing with no
|
what an open keyboard or a finished game's panel leaves, the list
|
||||||
page scroll to recover it. A floor makes the page grow instead. */
|
would shrink to nothing with no page scroll to recover it. A floor
|
||||||
min-height: 4.5rem;
|
makes the page grow instead.
|
||||||
|
|
||||||
|
Three rows of it: at a row and a half the chain was a sliver you
|
||||||
|
could not read the history in, and the whole point of it is reading
|
||||||
|
back what has been played. Anything above this is space the board
|
||||||
|
had going spare. */
|
||||||
|
min-height: 9rem;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
/* Rows settle whole rather than half in and half out of view: the
|
/* Rows settle whole rather than half in and half out of view: the
|
||||||
|
|||||||
@@ -119,13 +119,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* One line under a finished game: the code, and the one button that matters
|
/* One line under a finished game: the code, and the one button that matters
|
||||||
when somebody has to be invited into the next one. */
|
when somebody has to be invited into the next one. A line rather than a
|
||||||
|
card — the card's border and padding were 30px of a screen that also has
|
||||||
|
the result, the seats, the buttons and the chain to fit. */
|
||||||
.panel.compact {
|
.panel.compact {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
gap: var(--space-3);
|
gap: var(--space-3);
|
||||||
padding: 10px var(--space-3);
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
background: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
@@ -148,7 +153,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.panel.compact .code {
|
.panel.compact .code {
|
||||||
font-size: var(--text-8);
|
font-size: var(--text-7);
|
||||||
}
|
}
|
||||||
|
|
||||||
.actions {
|
.actions {
|
||||||
|
|||||||
Reference in new issue
Block a user