fix: responsive C4 board on mobile and preserve chat input during morph
All checks were successful
Deploy c4 / deploy (push) Successful in 42s
All checks were successful
Deploy c4 / deploy (push) Successful in 42s
Shrink board cells to 36px with tighter gaps on <768px screens so the board fits on 375px phones. Add DataIgnoreMorph to the C4 chat input so typing isn't disrupted when new messages arrive.
This commit is contained in:
@@ -166,6 +166,9 @@
|
|||||||
.c4-game-area { flex-direction: column; align-items: center; }
|
.c4-game-area { flex-direction: column; align-items: center; }
|
||||||
.c4-game-area .c4-chat { width: 100%; max-width: 480px; }
|
.c4-game-area .c4-chat { width: 100%; max-width: 480px; }
|
||||||
.c4-chat-history { height: 150px; }
|
.c4-chat-history { height: 150px; }
|
||||||
|
.board { gap: 4px; padding: 8px; }
|
||||||
|
.column { gap: 4px; padding: 2px; }
|
||||||
|
.cell { width: 36px; height: 36px; }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* C4 chat */
|
/* C4 chat */
|
||||||
|
|||||||
@@ -1723,6 +1723,18 @@
|
|||||||
.c4-chat-history {
|
.c4-chat-history {
|
||||||
height: 150px;
|
height: 150px;
|
||||||
}
|
}
|
||||||
|
.board {
|
||||||
|
gap: 4px;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
.column {
|
||||||
|
gap: 4px;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
.cell {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.c4-chat {
|
.c4-chat {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@@ -50,7 +50,7 @@ func C4Chat(messages []C4ChatMessage, msgBind, sendClick, sendKeyDown h.H) h.H {
|
|||||||
|
|
||||||
return h.Div(h.Class("c4-chat"),
|
return h.Div(h.Class("c4-chat"),
|
||||||
h.Div(historyAttrs...),
|
h.Div(historyAttrs...),
|
||||||
h.Div(h.Class("c4-chat-input"),
|
h.Div(h.Class("c4-chat-input"), h.DataIgnoreMorph(),
|
||||||
h.Input(
|
h.Input(
|
||||||
h.Type("text"),
|
h.Type("text"),
|
||||||
h.Attr("placeholder", "Chat..."),
|
h.Attr("placeholder", "Chat..."),
|
||||||
|
|||||||
Reference in New Issue
Block a user