From 370a8fd227fffc1190ecb38ef6009a15d3707c82 Mon Sep 17 00:00:00 2001 From: Michael Ilyin Date: Fri, 13 Dec 2024 00:56:22 +0100 Subject: [PATCH] feat: enhance server panel layout with improved input handling and button integration --- zenoh-ts/examples/chat/assets/index.css | 72 +++++++++++++++++------- zenoh-ts/examples/chat/assets/index.html | 22 ++++---- 2 files changed, 65 insertions(+), 29 deletions(-) diff --git a/zenoh-ts/examples/chat/assets/index.css b/zenoh-ts/examples/chat/assets/index.css index f0467b1..698e9c1 100644 --- a/zenoh-ts/examples/chat/assets/index.css +++ b/zenoh-ts/examples/chat/assets/index.css @@ -13,25 +13,6 @@ body { box-sizing: border-box; /* Include padding and border in element's total width and height */ } -.server-panel { - display: flex; - flex-wrap: wrap; /* Allow wrapping */ - align-items: center; - padding: 10px; - background-color: #f0f0f0; - border-radius: 8px; /* Round corners */ - margin-bottom: 5px; /* Reduce padding between panels */ - box-sizing: border-box; /* Include padding and border in element's total width and height */ -} - -.server-panel label { - margin-right: 5px; -} - -.server-panel input { - margin-right: 10px; -} - .main-panel { display: flex; flex: 1; @@ -129,4 +110,57 @@ body { #toggle-log-button { margin-top: 10px; +} + +.server-panel { + display: flex; + align-items: center; + padding: 10px; + background-color: #f0f0f0; + border-radius: 8px; /* Round corners */ + margin-bottom: 5px; /* Reduce padding between panels */ + box-sizing: border-box; /* Include padding and border in element's total width and height */ + width: 100%; /* Ensure server panel fits the screen width */ + flex-wrap: wrap; /* Allow wrapping to prevent overflow */ +} + +.server-panel label { + font-size: 12px; /* Make text smaller */ + margin-bottom: 5px; +} + +.server-panel input { + min-width: 0; /* Reduce minimum width of input fields */ + flex: 1; /* Ensure input fields resize */ + width: 100%; /* Ensure input fields take full width of their container */ +} + +.input-buttons { + width: 100px; + margin-right: 20px; /* Add margin inside input group */ + box-sizing: border-box; /* Include padding and border in element's total width and height */ +} + +.input-username { + width: 150px; + margin-right: 20px; /* Add margin inside input group */ + box-sizing: border-box; /* Include padding and border in element's total width and height */ +} + +.input-server-name { + width: 150px; + margin-right: 20px; /* Add margin inside input group */ + box-sizing: border-box; /* Include padding and border in element's total width and height */ +} + +.input-server-port { + width: 50px; + margin-right: 20px; /* Add margin inside input group */ + box-sizing: border-box; /* Include padding and border in element's total width and height */ +} + +.server-panel button { + width: 100%; + height: 100%; + flex: 1; /* Ensure buttons take full height of their container */ } \ No newline at end of file diff --git a/zenoh-ts/examples/chat/assets/index.html b/zenoh-ts/examples/chat/assets/index.html index bac11fe..dac06fe 100644 --- a/zenoh-ts/examples/chat/assets/index.html +++ b/zenoh-ts/examples/chat/assets/index.html @@ -11,20 +11,22 @@
-
- +
+ + +
+
+ + +
+
+
-
- +
+
-
- - -
- -