From c88088c7a1c17c12ece622098e05345aa050dffc Mon Sep 17 00:00:00 2001 From: HanishKVC Date: Mon, 20 May 2024 10:40:50 +0530 Subject: [PATCH] SimpleChat:HtmlCss: Cleanup UI flow set margin wrt vmin rather than vw or vh so portrait/landscape ok. Use flex and flex-grow to put things on the same line as well as distribute available space as needed. Given two main elements/line so it remains simple. In each line have one element with grows and one sits with a basic comfortably fixed size. --- .../server/public_simplechat/simplechat.css | 15 ++++++++---- .../server/public_simplechat/simplechat.html | 24 ++++++++++--------- 2 files changed, 24 insertions(+), 15 deletions(-) diff --git a/examples/server/public_simplechat/simplechat.css b/examples/server/public_simplechat/simplechat.css index 5c5ea48a4..f7ea6ec23 100644 --- a/examples/server/public_simplechat/simplechat.css +++ b/examples/server/public_simplechat/simplechat.css @@ -12,8 +12,8 @@ .role-user { background-color: lightgray; } -.wideinput { - width: 90vw; +.flex-grow { + flex-grow: 1; } .float-right { float: right; @@ -22,6 +22,13 @@ height: 75vh; overflow: scroll; } -* { - margin: 0.4vh; +button { + min-width: 8vw; +} +.sameline { + display: flex; + flex-direction: row; +} +* { + margin: 0.6vmin; } diff --git a/examples/server/public_simplechat/simplechat.html b/examples/server/public_simplechat/simplechat.html index 908bd74bd..4bfcadb01 100644 --- a/examples/server/public_simplechat/simplechat.html +++ b/examples/server/public_simplechat/simplechat.html @@ -13,18 +13,20 @@ -
- - +
+

SimpleChat

+
+ + +
-

SimpleChat

-
+
- +
@@ -34,8 +36,8 @@
-
- +
+