fix(UI): Use flexbox and make it look just a tiny bit nicer

XKNX · Apr 16, 2022 · d9645a0 · d9645a0
1 parent 41e3b27
commit d9645a0
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 11 deletions.
diff --git a/custom_components/knx_panel/knx_ui.js b/custom_components/knx_panel/knx_ui.js
@@ -192,13 +192,20 @@ this.knx_ui.js = (function (exports) {
             }
             return $ `
       <ha-card class="knx-info" header="KNX Information">
-        <div class="card-content">
-          <div class="knx-version">XKNX Version: ${(_a = this.knxInfo) === null || _a === void 0 ? void 0 : _a.version}</div>
-          <div class="knx-connection-state">
-            Connected to Bus: ${((_b = this.knxInfo) === null || _b === void 0 ? void 0 : _b.connected) ? "Yes" : "No"}
+        <div class="card-content knx-info-section">
+          <div class="knx-content-row">
+            <div>XKNX Version</div>
+            <div>${(_a = this.knxInfo) === null || _a === void 0 ? void 0 : _a.version}</div>
           </div>
-          <div>
-            Individual address: ${(_c = this.knxInfo) === null || _c === void 0 ? void 0 : _c.current_address}
+          
+          <div class="knx-content-row">
+            <div>Connected to Bus</div>
+            <div>${((_b = this.knxInfo) === null || _b === void 0 ? void 0 : _b.connected) ? "Yes" : "No"}</div>
+          </div>
+          
+          <div class="knx-content-row">
+            <div>Individual address</div>
+            <div>${(_c = this.knxInfo) === null || _c === void 0 ? void 0 : _c.current_address}</div>
           </div>
         </div>
       </ha-card>
@@ -209,6 +216,17 @@ this.knx_ui.js = (function (exports) {
       .knx-info {
         max-width: 400px;
       }
+      
+      .knx-info-section {
+        display: flex;
+        flex-direction: column;
+      }
+      
+      .knx-content-row {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between; 
+      }
     `;
         }
     };

diff --git a/frontend/src/views/overview.ts b/frontend/src/views/overview.ts
@@ -25,12 +25,21 @@ export class KNXOverview extends LitElement {
 
     return html`
       <ha-card class="knx-info" header="KNX Information">
-        <div class="card-content">
-          <div class="knx-version">XKNX Version: ${this.knxInfo?.version}</div>
-          <div class="knx-connection-state">
-            Connected to Bus: ${this.knxInfo?.connected ? "Yes" : "No"}
+        <div class="card-content knx-info-section">
+          <div class="knx-content-row">
+            <div>XKNX Version</div>
+            <div>${this.knxInfo?.version}</div>
+          </div>
+
+          <div class="knx-content-row">
+            <div>Connected to Bus</div>
+            <div>${this.knxInfo?.connected ? "Yes" : "No"}</div>
+          </div>
+
+          <div class="knx-content-row">
+            <div>Individual address</div>
+            <div>${this.knxInfo?.current_address}</div>
           </div>
-          <div>Individual address: ${this.knxInfo?.current_address}</div>
         </div>
       </ha-card>
     `;
@@ -41,6 +50,17 @@ export class KNXOverview extends LitElement {
       .knx-info {
         max-width: 400px;
       }
+
+      .knx-info-section {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .knx-content-row {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
     `;
   }
 }