From: Benjamin Braatz <bb@bbraatz.eu>
Date: Sun, 7 Mar 2021 20:25:04 +0000 (+0100)
Subject: Improve layout for interfaces with multiple lines
X-Git-Tag: v0.3.0~37
X-Git-Url: http://git.graph-it.com/?a=commitdiff_plain;h=d1de1e6a169fa8478f5b0f67ef065406f14472ba;p=graphit%2Fcontrolpi-wsserver.git

Improve layout for interfaces with multiple lines
---

diff --git a/web/controlpi-debug.css b/web/controlpi-debug.css
index 22c072d..70b3f9a 100644
--- a/web/controlpi-debug.css
+++ b/web/controlpi-debug.css
@@ -14,12 +14,26 @@
     background-color: #bcdaf8;
 }
 
-.client h2 {
+.client > h2 {
     font-size: 1.2rem;
     font-weight: bold;
 }
 
+.interfacecontainer {
+    white-space: nowrap;
+}
+
+.interfacecontainer > h3 {
+    display: inline-block;
+    vertical-align: top;
+    margin-top: 5px;
+    font-weight: bold;
+}
+
 .templatecontainer {
+    display: inline-block;
+    vertical-align: top;
+    white-space: normal;
 }
 
 .lastcontainer {
@@ -30,12 +44,6 @@
     text-align: left;
 }
 
-.templatecontainer h3 {
-    display: inline-block;
-    margin-top: 5px;
-    font-weight: bold;
-}
-
 .message {
     display: inline-block;
     vertical-align: top;
@@ -51,22 +59,22 @@
     background-color: #ee96a8;
 }
 
-.templatecontainer .message {
+.templatecontainer > .message {
     font-size: 0.8rem;
     margin-top: 5px;
     margin-left: 5px;
 }
 
-.lastcontainer .message {
+.lastcontainer > .message {
     margin-top: 5px;
 }
 
-.message span {
+.message > span {
     margin: 5px;
     font-size: 1rem;
 }
 
-.message h4 {
+.message > h4 {
     margin: 2px;
     font-size: 0.8rem;
 }
diff --git a/web/controlpi-debug.js b/web/controlpi-debug.js
index 8c6eebc..9e8b53c 100644
--- a/web/controlpi-debug.js
+++ b/web/controlpi-debug.js
@@ -5,11 +5,15 @@ function createForClient(client) {
     section.setAttribute('class', 'client')
     section.innerHTML = `
         <h2>${client}</h2>
-        <div id="${client} Receives" class="templatecontainer">
+        <div class="interfacecontainer">
             <h3>=&gt;</h3>
+            <div id="${client} Receives" class="templatecontainer">
+            </div>
         </div>
-        <div id="${client} Sends" class="templatecontainer">
+        <div class="interfacecontainer">
             <h3>&lt;=</h3>
+            <div id="${client} Sends" class="templatecontainer">
+            </div>
         </div>
         <div id="${client} Last" class="lastcontainer">
         </div>
@@ -251,7 +255,7 @@ function processBusMessage(message) {
         }
         // Crate message elements for receives interface:
         const receiveContainer = document.getElementById(message['client'] + ' Receives')
-        receiveContainer.innerHTML = '<h3>=&gt;</h3>'
+        receiveContainer.innerHTML = ''
         for (const template of message.receives) {
             if (template['command'] != null) {
                 receiveContainer.appendChild(createForCommand(template))
@@ -261,7 +265,7 @@ function processBusMessage(message) {
         }
         // Create message elements for sends interface:
         const sendContainer = document.getElementById(message['client'] + ' Sends')
-        sendContainer.innerHTML = '<h3>&lt;=</h3>'
+        sendContainer.innerHTML = ''
         for (const template of message.sends) {
             sendContainer.appendChild(createForMessage(template))
         }