use sitelayout css

HomeDing · Feb 15, 2025 · 8067ad7 · 8067ad7
1 parent de701f1
commit 8067ad7
Show file tree

Hide file tree

Showing 20 changed files with 440 additions and 431 deletions.
diff --git a/board-templates.htm b/board-templates.htm
@@ -1,7 +1,7 @@
 <div class="card" u-control="air" id="${id}" microID="${id}" u-is="generic">
   <div u-is="include" ref=".cHead"></div>
   <hr />
-  <div class="block" style="display: flex;flex-wrap: wrap;column-gap: 1rem;">
+  <div class="main" style="display: flex;flex-wrap: wrap;column-gap: 1rem;">
     <div style="flex: 1;min-width:8rem;text-align:center;display:none" u-display="temperature">
       <div style="font-size: 2rem"><span u-text="temperature"></span>&deg;C</div>
       <div>Temperature</div>
@@ -28,7 +28,7 @@
 <div class="card" u-control="dallas" id="${id}" microID="${id}" u-is="generic">
   <div u-is="include" ref=".cHead"></div>
   <hr />
-  <div class="block" style="display: flex;">
+  <div class="main" style="display: flex;">
     <div style="flex: 1">
       <div style="font-size: 2rem"><span u-text="temperature"></span>&deg;C</div>
       <div>Temperature</div>
@@ -46,34 +46,34 @@
     <label><input name="mode" u-value="mode" type="radio" value="timer">Timer</label>
   </fieldset>
 
-  <div class="block">
+  <div class="main">
     <div class="u-bar">
       <span class="pulse"></span>
       <span class="current"></span>
     </div>
   </div>
-  <div class="block footer form-actions">
+  <div class="footer form-actions">
     <button u-action="start" value="1">Start</button>
     <button u-action="next" value="1">Next</button>
   </div>
 </form>
 
 
 <div class="card" u-control="button" microID="${id}" u-is="button">
-  <div class="block"><button u-text="title"></button></div>
+  <div class="main"><button u-text="title"></button></div>
 </div>
 
 <div class="card" u-control="digitalvalue" microID="${id}" u-is="generic">
   <div u-is="include" ref=".cHead"></div>
-  <div class="block Element">
+  <div class="main">
     <span class="u-bool ux-value" u-active="value" style="position: absolute;top:0.5rem;right:0.5rem"></span>
     <div class="form-grid"><label>Value:</label><output u-text="value"></output></div>
   </div>
 </div>
 
 <div class="card" u-control="reference" microID="${id}" u-is="generic">
   <div u-is="include" ref=".cHead"></div>
-  <div class="block Element">
+  <div class="main">
     <span class="u-bool ux-value" u-active="value" style="position: absolute;top:0.5rem;right:0.5rem"></span>
     <div class="form-grid">
       <label>Reference:</label><output u-text="reference"></output>
@@ -84,14 +84,14 @@
 
 <div class="card" u-control="pwmout" u-is="pwmout" microID="${id}">
   <div u-is="include" ref=".cHead"></div>
-  <div class="block" style="position: relative;min-height: 5rem">
+  <div class="main" style="position: relative;min-height: 5rem">
     <span class="ux-levelbar ux-value"></span>
     <div style="font-size: 2rem"><span u-text="value"></span> / <span u-text="range"></span></div>
   </div>
 </div>
 
 <div class="card" u-control="log" u-is="log" microID="${id}">
-  <div class="block header">
+  <div class="header">
     <svg class="icon">
       <use href="./icons.svg#${type}" />
     </svg>
@@ -104,13 +104,13 @@ <h4 u-text="description"></h4>
       <use href="./icons.svg#config" />
     </svg>
   </div>
-  <div class="block"><object data="chartline.svg" type="image/svg+xml" style="width:100%"></object></div>
+  <div class="main"><object data="chartline.svg" type="image/svg+xml" style="width:100%"></object></div>
 </div>
 
 <!-- Display -->
 
 <div class="card" u-control="display" u-is="display" microID="${id}">
-  <div class="block" style="display: flex;align-items: center;">
+  <div class="main" style="display: flex;align-items: center;">
     <svg class="setconfig">
       <use href="./icons.svg#config" />
     </svg>
@@ -125,7 +125,7 @@ <h4 u-text="description"></h4>
 </div>
 
 <div class="card" u-control="displaylcd" u-is="generic" microID="${id}">
-  <div class="block">
+  <div class="main">
     <div class="display" grid="10" style="height: 2em;width: 20ch;font-family: monospace"></div>
   </div>
 </div>

diff --git a/board.htm b/board.htm
@@ -41,7 +41,7 @@
     }
 
     img,
-    .panel {
+    #panl {
       user-select: none;
     }
 
@@ -54,12 +54,12 @@
   <script src="u-toast.js"></script>
 </head>
 
-<body>
+<body class="sitelayout" style="max-width:100%;--layout-gap: 0;--content-back:none">
   <u-toast></u-toast>
-  <div class="u-header">
+  <header>
     <h1>Board</h1>
-  </div>
-  <div class="u-navbar">
+  </header>
+  <div class="navbar">
     <a href="/">Home</a>
     <a href="/board.htm">Board</a>
     <a href="/microide.htm">IDE</a>
@@ -69,7 +69,10 @@ <h1>Board</h1>
     <button id="addButton">+</button>
   </div>
 
-  <main class="panel"></main>
+  <main >
+    <div id="panl" class="card-container col365" style="--card-height: auto;">
+    </div>
+  </main>
 
   <div id="u-templates" style="display:none">
 
@@ -78,7 +81,7 @@ <h1>Board</h1>
       <div class="modalFrame" class="modal-object"></div>
     </div>
 
-    <div class="cHead block header">
+    <div class="cHead header">
       <svg class="icon">
         <use href="./icons.svg#${type}" />
       </svg>
@@ -91,7 +94,7 @@ <h4 u-text="description"></h4>
 
     <div class="card" u-control="generic" u-is="generic" microID="${id}">
       <div u-is="include" ref=".cHead"></div>
-      <div class="block">
+      <div class="main">
         <div class="form-grid"><label>Value:</label><output u-text="value"></output></div>
       </div>
     </div>
@@ -105,7 +108,7 @@ <h4 u-text="description"></h4>
         <label><input name="mode" u-value="mode" type="radio" value="on">On</label>
         <label><input name="mode" u-value="mode" type="radio" value="timer">Timer</label>
       </fieldset>
-      <div class="block">
+      <div class="main">
         <div class="form-grid">
           <label>Start:</label><output u-text="ontime"></output>
           <label>End:</label><output u-text="offtime"></output>
@@ -115,21 +118,21 @@ <h4 u-text="description"></h4>
 
     <div class="card" u-control="dstime" id="${id}" u-is="dstime" microID="${id}">
       <div u-is="include" ref=".cHead"></div>
-      <div class="block">
+      <div class="main">
         <div class="form-grid">
           <label>ReadTime:</label><input u-value="readtime" type="time" step="1" />
           <label>Now:</label><output u-text="now"></output>
           <label>set Time:</label><output class="now"></output>
         </div>
-        <div class="block footer">
+        <div class="footer">
           <button style="float:right">set</button>
         </div>
       </div>
     </div>
 
     <div class="card" u-control="switch" id="${id}" u-is="generic" microID="${id}">
       <div u-is="include" ref=".cHead"></div>
-      <div class="block">
+      <div class="main">
         <span class="u-bool ux-value border" u-active="value"></span>
         <div u-is="input">
           <span class="down">off</span>
@@ -150,22 +153,22 @@ <h4 u-text="description"></h4>
 
     <div class="card" u-control="logic" id="${id}" u-is="generic" microID="${id}">
       <div u-is="include" ref=".cHead"></div>
-      <div class="block">
+      <div class="main">
         <span class="u-bool ux-value" u-active="value"></span>
         <div class="form-grid"><label>value:</label><output u-text="value"></output></div>
       </div>
     </div>
 
     <div class="card" u-control="select" id="${id}" u-is="select" microID="${id}">
       <div u-is="include" ref=".cHead"></div>
-      <div class="block">
+      <div class="main">
         <select></select>
       </div>
     </div>
 
     <div class="card" u-control="rfcodes" microID="${id}" u-is="generic">
       <div u-is="include" ref=".cHead"></div>
-      <div class="block Element">
+      <div class="main">
         <div><label>Last Code:</label></div>
         <pre>[<span u-text="value" style="user-select: text;"></span>]</pre>
       </div>
@@ -183,7 +186,7 @@ <h4 u-text="description"></h4>
         <label>duration:</label>
         <div><input type="range" max="12000" step="100" name="duration"><output name="duration"></output></div>
       </div>
-      <div class="block footer form-actions">
+      <div class="footer form-actions">
         <button u-action="mode" value="fade">fade</button>
         <button u-action="mode" value="fix">fix</button>
         <button u-action="mode" value="pulse">pulse</button>
@@ -200,14 +203,14 @@ <h4 u-text="description"></h4>
         <label>Effect Length:</label>
         <div><input type="range" max="255" u-value="effectlength"><output u-value="effectlength"></output></div>
       </div>
-      <div class="block footer form-actions">
+      <div class="footer form-actions">
         <button u-action="mode" value="flow">flow</button>
       </div>
     </div>
 
     <div class="card" u-control="light" id="${id}" u-is="generic" microID="${id}">
       <div u-is="include" ref=".cHead"></div>
-      <div class="block">
+      <div class="main">
         <span u-color="value" class="border" style="width:4rem;height:4rem;float:right;border-radius:50%;"></span>
         <div class="form-grid"><label>value:</label><output u-text="value"></output>
           <label>brightness:</label><output u-text="brightness"></output>
@@ -217,7 +220,7 @@ <h4 u-text="description"></h4>
 
     <div class="card" u-control="tm1637" id="${id}" u-is="generic" microID="${id}">
       <div u-is="include" ref=".cHead"></div>
-      <div class="block">
+      <div class="main">
         <div style="text-align: center;"><span u-text="value" style="font-size:4rem;font-style: italic;"></span></div>
         <div class="form-grid"><label>brightness:</label><output u-text="brightness"></output></div>
       </div>
@@ -234,7 +237,7 @@ <h4 u-text="description"></h4>
 
     <div class="card" u-control="bl0937" id="${id}" u-is="bl0937" microID="${id}">
       <div u-is="include" ref=".cHead"></div>
-      <div class="block">
+      <div class="main">
         <table style="width:100%;font-size:2rem">
           <tr>
             <td>
@@ -269,7 +272,7 @@ <h4 u-text="description"></h4>
         <label>SNR:</label><output u-text="snr"></output>
         <label>station:</label><output u-text="stationname"></output>
       </div>
-      <div class="block footer form-actions">
+      <div class="footer form-actions">
         <button u-action="frequency" value="9440">hr1</button>
         <button u-action="frequency" value="8930">hr3</button>
         <button u-action="frequency" value="10300">AB</button>
@@ -279,7 +282,7 @@ <h4 u-text="description"></h4>
     </div>
 
     <div class="card" u-control="scene" microID="${id}" u-is="scene">
-      <div class="cHead block header">
+      <div class="cHead header">
         <h3>Scenes</h3>
       </div>
       <div class="block form-actions"></div>
@@ -313,7 +316,7 @@ <h3>Scenes</h3>
 
     (function() { // allows variable names to be packed by minifier
       const REFRESH_INTERVAL = 4000;
-      var panelObj = document.querySelector('.panel');
+      var panelObj = document.querySelector('#panl');
       var addObj = document.getElementById('addButton');
       var sysObj = document.getElementById('sysButton');
       var params = { sys: false };

diff --git a/ding.htm b/ding.htm
@@ -19,11 +19,14 @@
   <script src="/micro.js" defer></script>
 </head>
 
-<body>
-  <main class="panel" style="user-select: none"></main>
+<body class="sitelayout" style="max-width:100%;--layout-gap: 0;--content-back:none">
+  <main>
+    <div id="panl" class="card-container col365" style="--card-height: auto;">
+    </div>
+  </main>
 
   <div id="u-templates" style="display:none">
-    <div class="cHead block header">
+    <div class="cHead header">
       <h3 u-text="title"></h3>
       <h4 u-text="description"></h4>
     </div>
@@ -35,14 +38,14 @@ <h4><span u-text="description"></span> (<span u-text="room"></span>)</h4>
 
     <div class="card" u-control="generic" u-is="generic" microID="${id}">
       <div u-is="include" ref=".cHead"></div>
-      <div class="block">
+      <div class="main">
         <div class="form-grid"><label>Value:</label><span u-text="value"></span></div>
       </div>
     </div>
 
     <div class="card" u-control="switch" id="${id}" u-is="generic" microID="${id}">
       <div u-is="include" ref=".cHead"></div>
-      <div class="block">
+      <div class="main">
         <span class="u-bool ux-value border" u-active="value"></span>
         <div u-is="input">
           <span class="down">off</span>
@@ -76,13 +79,13 @@ <h4><span u-text="description"></span> (<span u-text="room"></span>)</h4>
         <label><input name="mode" u-value="mode" type="radio" value="on">On</label>
         <label><input name="mode" u-value="mode" type="radio" value="timer">Timer</label>
       </fieldset>
-      <div class="block">
+      <div class="main">
         <div class="u-bar">
           <span class="pulse"></span>
           <span class="current"></span>
         </div>
       </div>
-      <div class="block">
+      <div class="main">
         <button u-action="start" value="1">Start</button>
         <button u-action="next" value="1">Next</button>
       </div>
@@ -101,7 +104,7 @@ <h4><span u-text="description"></span> (<span u-text="room"></span>)</h4>
 
     <div class="card" u-control="dht" microID="${id}" u-is="generic">
       <div u-is="include" ref=".cHead"></div>
-      <div class="block" style="display: grid; grid-template-columns: auto auto; grid-column-gap: 5px;">
+      <div class="main" style="display: grid; grid-template-columns: auto auto; grid-column-gap: 5px;">
         <span style="font-size:2em"><span u-text="temperature">__.__</span>&deg;C</span>
         <span style="font-size:2em"><span u-text="humidity">__.__</span>%</span>
         <span>Temperature</span><span>Humidity</span>
@@ -110,15 +113,15 @@ <h4><span u-text="description"></span> (<span u-text="room"></span>)</h4>
 
     <div class="card" u-control="and" id="${id}" u-is="generic" microID="${id}">
       <div u-is="include" ref=".cHead"></div>
-      <div class="block">
+      <div class="main">
         <span class="u-bool ux-value" u-active="value"></span>
         <div class="form-grid"><label>value:</label><output u-text="value"></output></div>
       </div>
     </div>
 
     <div class="card" u-control="bl0937" id="${id}" u-is="bl0937" microID="${id}">
       <div u-is="include" ref=".cHead"></div>
-      <div class="block">
+      <div class="main">
         <table style="width:100%;font-size:2rem">
           <tr>
             <td>
@@ -150,17 +153,18 @@ <h4><span u-text="description"></span> (<span u-text="room"></span>)</h4>
         <label>brightness:</label>
         <div><input type="range" max="100" name="brightness"><output u-text="brightness"></output></div>
       </div>
-      <div class="block footer form-actions">
-        <button u-action="mode" value="fade">fade</button><button u-action="mode" value="fix">fix</button><button u-action="mode" value="pulse">pulse</button><button u-action="mode" value="wheel">wheel</button>
+      <div class="footer form-actions">
+        <button u-action="mode" value="fade">fade</button><button u-action="mode" value="fix">fix</button><button
+          u-action="mode" value="pulse">pulse</button><button u-action="mode" value="wheel">wheel</button>
       </div>
     </div>
 
     <div class="card small" u-control="webbutton" microID="${id}" u-is="button">
-      <div class="block"><button u-text="description">.</button></div>
+      <div class="main"><button u-text="description">.</button></div>
     </div>
 
     <div class="card" u-control="scene" microID="${id}" u-is="scene">
-      <div class="block header">
+      <div class="header">
         <h3>Scenes</h3>
       </div>
       <div class="block form-actions"></div>
@@ -171,9 +175,9 @@ <h3>Scenes</h3>
   <a style="position:absolute;top:1em;right:1em" href="/microide.htm">IDE</a>
 
   <script>
-    (function () { // allows variable names to be packed by minifier
+    (function() { // allows variable names to be packed by minifier
       const REFRESH_INTERVAL = 4000;
-      var panelObj = document.querySelector('.panel');
+      var panelObj = document.querySelector('#panl');
       var timer;
       var _title = undefined;
       var _name = undefined;