Improve layout for interfaces with multiple lines

diff --git a/web/controlpi-debug.css b/web/controlpi-debug.css
index 22c072db5af50bdc6d3fbbec6b57ab2cce105535..70b3f9a08f37b34c95b87e46be591c87e0985dac 100644 (file)
--- 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 8c6eebcbccff34f37ae979e4a7b88cca101d7657..9e8b53c85d4d824526dead228ab1cd2d03174a1f 100644 (file)
--- 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))
         }