UI fixes

Author: mathertel

.stylelintrc.json

@@ -19,7 +19,7 @@
     "selector-max-compound-selectors": 4,
     "selector-no-qualifying-type": [true, { "ignore": ["class", "attribute"]  } ],
     "selector-class-pattern": "[a-zA-Z]*",
-    "at-rule-allowed-list": ["use", "media", "import"],
+    "at-rule-allowed-list": ["use", "media", "import", "container"],
     "at-rule-no-unknown": null,
     "custom-property-empty-line-before": null,
     "no-descending-specificity": null,

board.htm

@@ -323,8 +323,7 @@ <h3>Scenes</h3>
         var ret;
         if (!document.querySelector('dialog#addElement')) {
           // lazy load dialogs.
-          ret = fetch("./board-new.htm")
-            .then(res => res.text())
+          ret = fetchText("./board-new.htm")
             .then(txt => {
               document.body.appendChild(document.createRange().createContextualFragment(txt));
               document.querySelectorAll('[u-is]').forEach(el => micro.attach(el));
@@ -365,22 +364,13 @@ <h3>Scenes</h3>
         timer = window.setTimeout(updateStateNow, 200);
       };
 
-
-      // initiate a fetch with JSON res expected.
-      async function fetchJSON(url, options) {
-        var p = fetch(url, options)
-          .then(raw => raw.json());
-        return (p);
-      }
-
-      // load templates from other file.
-      var p2 = fetchJSON('/elements.json').then(json => uElements.defs = json);
-      var p3 = fetchJSON('/env.json').then(json => uElements.env = json);
-      var p4 = fetchJSON('/config.json').then(json => uElements.config = json);
-      var pState = fetchJSON('/api/state').then(json => uElements.state = json);
-
-
       function loaded() {
+        // load templates from other file.
+        var p2 = fetchJSON('/elements.json').then(json => uElements.defs = json);
+        var p3 = fetchJSON('/env.json').then(json => uElements.env = json);
+        var p4 = fetchJSON('/config.json').then(json => uElements.config = json);
+        var pState = fetchJSON('/api/state').then(json => uElements.state = json);
+
         params = getHashParams({ sys: false });
         var p0 = micro.loadFile('/board-templates.htm');
 

css/iot.scss

@@ -10,16 +10,14 @@
 
 @use "sass:color";
 
-// ===== panel grid Layout =====
-
-$u-grid-width: 11.5rem;
-$u-grid-gap: $u-gutter;
-
-$u-card-width: 2 * $u-grid-width + $u-gutter;
-$u-card-wide-width: calc(4 * $u-grid-width + 3 * $u-gutter);
 
 // ===== Cards layout =====
 
+:root {
+  --grid-width: 20ch;
+  --grid-gap: 1ch;
+}
+
 .card {
   position: relative;
   display: flex;
@@ -110,46 +108,43 @@ $u-card-wide-width: calc(4 * $u-grid-width + 3 * $u-gutter);
 
 // ===== Dashboard of cards =====
 
+
+body {
+  container-type: size;
+}
+
 .panel {
   display: grid;
-  gap: $u-grid-gap;
-  grid-template-columns: repeat(auto-fill, $u-grid-width);
+  gap: var(--grid-gap);
+  grid-template-columns: repeat(auto-fill, var(--grid-width));
   grid-auto-rows: minmax(min-content, max-content);
   grid-auto-flow: row;
   margin-top: 0.5rem;
+  margin-left: auto;
+  margin-right: auto;
+  width: calc(2 * var(--grid-width) + var(--grid-gap));
+
+  @container (width >= 84ch) {
+    width: calc(4 * var(--grid-width) + 3 * var(--grid-gap));
+  }
+
+  @container (width >= 126ch) {
+    width: calc(6 * var(--grid-width) + 5 * var(--grid-gap));
+  }
 
   >.card {
     grid-column: span 2;
-    width: $u-card-width;
-    min-width: $u-card-width;
+    width: 100%;
+    min-width: 100%;
     align-self: start;
   }
 
   >.card.small {
     grid-column: span 1;
-    width: $u-grid-width;
-    min-width: $u-grid-width;
   }
 
   >.card.wide {
     grid-column: span 4;
-    width: $u-card-wide-width;
-    min-width: $u-card-wide-width;
-  }
-
-  @media (width >=0) {
-    /* 1 col */
-    max-width: $u-card-width;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  @media (width >=2 * $u-card-width + $u-gutter) {
-    max-width: 2 * $u-card-width + $u-gutter;
-  }
-
-  @media (width >=3 * $u-card-width + 2 * $u-gutter) {
-    max-width: 3 * $u-card-width + 2 * $u-gutter;
   }
 }
 

ding.htm

@@ -193,29 +193,21 @@ <h3>Scenes</h3>
         state: {}
       }
 
-      // initiate a fetch with JSON res expected.
-      async function fetchJSON(url, options) {
-        var p = fetch(url, options)
-          .then(raw => raw.json());
-        return (p)
-      }
-
       function updateState() {
         fetchJSON('/api/state')
           .then(json => hub.publishObj(json))
           .finally(() => timer = window.setTimeout(updateState, REFRESH_INTERVAL));
       } // updateState()
       window.updateState = updateState;
 
-      // fetch element definitions from env.json and config.json asap
-      var p3 = fetchJSON('/env.json').then(json => uElements.env = json);
-      var p4 = fetchJSON('/config.json').then(json => uElements.config = json);
-      var pState = fetchJSON('/api/state').then(json => uElements.state = json);
-
       function loaded() {
+        // fetch element definitions from env.json and config.json asap
+        var p3 = fetchJSON('/env.json').then(json => uElements.env = json);
+        var p4 = fetchJSON('/config.json').then(json => uElements.config = json);
+        var pState = fetchJSON('/api/state').then(json => uElements.state = json);
 
         // create new card
-        hub.subscribe('/*/*', function (path) {
+        hub.subscribe('/*/*', function(path) {
           // console.log("ev:", path);
           if (path) {
             path = path.toLowerCase();
@@ -244,12 +236,12 @@ <h3>Scenes</h3>
           document.querySelector("h1").textContent = _title;
         }
 
-        hub.subscribe('/device/*?name', function (path, key, value) {
+        hub.subscribe('/device/*?name', function(path, key, value) {
           _name = value;
           setTitle();
         });
 
-        hub.subscribe('/device/*?title', function (path, key, value) {
+        hub.subscribe('/device/*?title', function(path, key, value) {
           _title = value;
           setTitle();
         });

i/default.svg

@@ -156,10 +156,7 @@ <h3>Diag</h3>
 
     window.addEventListener('load', function () {
       memAPI = memObj.getSVGDocument().api;
-      fetch('/api/sysinfo')
-        .then(function (result) {
-          return result.json();
-        })
+      fetchJSON('/api/sysinfo')
         .then(function (d) {
           var o = document.getElementById('sysinfo');
           o.innerText = JSON.stringify(d, null, 1)
@@ -185,10 +182,7 @@ <h3>Diag</h3>
           ]);
         });
 
-      fetch('/api/state')
-        .then(function (result) {
-          return result.json();
-        })
+      fetchJSON('/api/state')
         .then(function (d) {
           var o = document.querySelector('#stateInfo');
           o.innerText = JSON.stringify(d, null, 1)
@@ -198,10 +192,7 @@ <h3>Diag</h3>
 
         });
 
-      fetch('/api/elements')
-        .then(function (result) {
-          return result.json();
-        })
+      fetchJSON('/api/elements')
         .then(function (d) {
           var o = document.querySelector('#elementsInfo');
           o.innerText = d.join(', ');