feat: enhance server panel layout with improved input handling and bu…

…tton integration
eclipse-zenoh · Dec 12, 2024 · 370a8fd · 370a8fd
1 parent 5c42fda
commit 370a8fd
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 29 deletions.
diff --git 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 */
 }
diff --git a/zenoh-ts/examples/chat/assets/index.html b/zenoh-ts/examples/chat/assets/index.html
@@ -11,20 +11,22 @@
 <body>
     <div class="chat-container">
         <div class="server-panel">
-            <div>
-                <label for="server-name">Server Name:</label>
+            <div class="input-buttons">
+                <button id="connect-button">Connect</button>
+                <button id="disconnect-button" style="display: none;">Disconnect</button>
+            </div>
+            <div class="input-username">
+                <label for="username">Username</label>
+                <input type="text" id="username" value="Jean Dupont">
+            </div>
+            <div class="input-server-name">
+                <label for="server-name">Server</label>
                 <input type="text" id="server-name" value="localhost">
             </div>
-            <div>
-                <label for="server-port">Server Port:</label>
+            <div class="input-server-port">
+                <label for="server-port">Port</label>
                 <input type="text" id="server-port" value="10000">
             </div>
-            <div>
-                <label for="username">Username:</label>
-                <input type="text" id="username" value="Jean Dupont">
-            </div>
-            <button id="connect-button">Connect</button>
-            <button id="disconnect-button" style="display: none;">Disconnect</button>
         </div>
         <div class="main-panel">
             <div class="user-list">