refactor: reworked layout and styles of the portal

data/index.html

@@ -117,14 +117,16 @@
       </article>
 
       <article>
-        <div>
+        <div class="vars-busy" aria-busy="true"></div>
+        <div class="vars-table hidden">
           <hgroup>
-            <h2>States and sensors</h2>
-            <p>More information and settings can be found in your home assistant after setting up network and MQTT</p>
+            <h2>Info</h2>
+            <p>More information and settings can be found in your Home Assistant after setting up network and MQTT</p>
           </hgroup>
 
-          <div class="ot-busy" aria-busy="true"></div>
-          <table class="ot-table hidden">
+          <details>
+            <summary role="button" class="secondary">States and sensors</summary>
+            <table>
               <tbody>
                 <tr>
                   <th scope="row">OpenTherm connected:</th>
@@ -206,11 +208,12 @@
                   <th scope="row">Exhaust temp:</th>
                   <td><b class="exhaust-temp"></b> <span class="temp-unit"></span></td>
                 </tr>
+              </tbody>
+            </table>
+          </details>
 
-              <!-- Diag -->
-              <tr>
-                <th scope="row">Slave parameters:</th>
-                <td>
+          <details>
+            <summary role="button" class="secondary">OpenTherm diagnostic</summary>
             <pre><b>Vendor:</b>          <span class="slave-vendor"></span>
 <b>Member ID:</b>       <span class="slave-member-id"></span>
 <b>Flags:</b>           <span class="slave-flags"></span>
@@ -219,10 +222,7 @@
 <b>OT version:</b>      <span class="slave-ot-version"></span>
 <b>Heating limits:</b>  <span class="heating-min-temp"></span>...<span class="heating-max-temp"></span> <span class="temp-unit"></span>
 <b>DHW limits:</b>      <span class="dhw-min-temp"></span>...<span class="dhw-max-temp"></span> <span class="temp-unit"></span></pre>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+          </details>
         </div>
       </article>
     </main>

data/settings.html

@@ -23,12 +23,14 @@
 
   <main class="container">
     <article>
-      <div>
       <hgroup>
-          <h2>Portal settings</h2>
+        <h2>Settings</h2>
         <p></p>
       </hgroup>
 
+      <details>
+        <summary role="button" class="secondary">Portal settings</summary>
+        <div>
           <div id="portal-settings-busy" aria-busy="true"></div>
           <form action="/api/settings" id="portal-settings" class="hidden">
             <div class="grid">
@@ -51,15 +53,52 @@
             <button type="submit">Save</button>
           </form>
         </div>
-    </article>
+      </details>
 
-    <article>
+      <details>
+        <summary role="button" class="secondary">System settings</summary>
         <div>
-        <hgroup>
-          <h2>OpenTherm settings</h2>
-          <p></p>
-        </hgroup>
+          <div id="system-settings-busy" aria-busy="true"></div>
+          <form action="/api/settings" id="system-settings" class="hidden">
+            <fieldset>
+              <legend>Unit system</legend>
+              <label>
+                <input type="radio" class="system-unit-system" name="system[unitSystem]" value="0" />
+                Metric (celsius)
+              </label>
+              <label>
+                <input type="radio" class="system-unit-system" name="system[unitSystem]" value="1" />
+                Imperial (fahrenheit)
+              </label>
+            </fieldset>
   
+            <fieldset>
+              <label for="system-debug">
+                <input type="checkbox" class="system-debug" name="system[debug]" value="true">
+                Debug mode
+              </label>
+              <label for="system-use-serial">
+                <input type="checkbox" class="system-use-serial" name="system[useSerial]" value="true">
+                Enable serial port
+              </label>
+              <label for="system-use-telnet">
+                <input type="checkbox" class="system-use-telnet" name="system[useTelnet]" value="true">
+                Enable telnet
+              </label>
+            </fieldset>
+  
+            <fieldset>
+              <mark>After changing this settings, the ESP must be restarted for the changes to take effect.</mark>
+            </fieldset>
+  
+            <button type="submit">Save</button>
+          </form>
+        </div>
+      </details>
+
+      <details>
+        <summary role="button" class="secondary">OpenTherm settings</summary>
+        <div>
           <div id="opentherm-settings-busy" aria-busy="true"></div>
           <form action="/api/settings" id="opentherm-settings" class="hidden">
             <fieldset>
@@ -128,15 +167,11 @@
             <button type="submit">Save</button>
           </form>
         </div>
-    </article>
+      </details>
 
-    <article>
+      <details>
+        <summary role="button" class="secondary">MQTT settings</summary>
         <div>
-        <hgroup>
-          <h2>MQTT settings</h2>
-          <p></p>
-        </hgroup>
-
           <div id="mqtt-settings-busy" aria-busy="true"></div>
           <form action="/api/settings" id="mqtt-settings" class="hidden">
             <div class="grid">
@@ -175,15 +210,11 @@
             <button type="submit">Save</button>
           </form>
         </div>
-    </article>
+      </details>
 
-    <article>
+      <details>
+        <summary role="button" class="secondary">Outdoor sensor settings</summary>
         <div>
-        <hgroup>
-          <h2>Outdoor sensor settings</h2>
-          <p></p>
-        </hgroup>
-
           <div id="outdoor-sensor-settings-busy" aria-busy="true"></div>
           <form action="/api/settings" id="outdoor-sensor-settings" class="hidden">
             <fieldset>
@@ -214,15 +245,11 @@
             <button type="submit">Save</button>
           </form>
         </div>
-    </article>
+      </details>
 
-    <article>
+      <details>
+        <summary role="button" class="secondary">Indoor sensor settings</summary>
         <div>
-        <hgroup>
-          <h2>Indoor sensor settings</h2>
-          <p></p>
-        </hgroup>
-
           <div id="indoor-sensor-settings-busy" aria-busy="true"></div>
           <form action="/api/settings" id="indoor-sensor-settings" class="hidden">
             <fieldset>
@@ -261,15 +288,11 @@
             <button type="submit">Save</button>
           </form>
         </div>
-    </article>
+      </details>
 
-    <article>
+      <details>
+        <summary role="button" class="secondary">External pump settings</summary>
         <div>
-        <hgroup>
-          <h2>External pump settings</h2>
-          <p></p>
-        </hgroup>
-
           <div id="extpump-settings-busy" aria-busy="true"></div>
           <form action="/api/settings" id="extpump-settings" class="hidden">
             <label for="extpump-use">
@@ -303,51 +326,7 @@
             <button type="submit">Save</button>
           </form>
         </div>
-    </article>
-
-    <article>
-      <div>
-        <hgroup>
-          <h2>System settings</h2>
-          <p></p>
-        </hgroup>
-
-        <div id="system-settings-busy" aria-busy="true"></div>
-        <form action="/api/settings" id="system-settings" class="hidden">
-          <fieldset>
-            <legend>Unit system</legend>
-            <label>
-              <input type="radio" class="system-unit-system" name="system[unitSystem]" value="0" />
-              Metric (celsius)
-            </label>
-            <label>
-              <input type="radio" class="system-unit-system" name="system[unitSystem]" value="1" />
-              Imperial (fahrenheit)
-            </label>
-          </fieldset>
-
-          <fieldset>
-            <label for="system-debug">
-              <input type="checkbox" class="system-debug" name="system[debug]" value="true">
-              Debug mode
-            </label>
-            <label for="system-use-serial">
-              <input type="checkbox" class="system-use-serial" name="system[useSerial]" value="true">
-              Enable serial port
-            </label>
-            <label for="system-use-telnet">
-              <input type="checkbox" class="system-use-telnet" name="system[useTelnet]" value="true">
-              Enable telnet
-            </label>
-          </fieldset>
-
-          <fieldset>
-            <mark>After changing this settings, the ESP must be restarted for the changes to take effect.</mark>
-          </fieldset>
-
-          <button type="submit">Save</button>
-        </form>
-      </div>
+      </details>
     </article>
   </main>
 

src_data/static/app.css

@@ -1,15 +1,41 @@
-:root {
-	--pico-block-spacing-horizontal: calc(1rem * 2.25);
-	--pico-block-spacing-vertical: calc(1rem * 2.25)
+@media (min-width: 576px) {
+  article {
+    --pico-block-spacing-vertical: calc(var(--pico-spacing) * 0.75);
+    --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 0.75);
+  }
+}
+
+@media (min-width: 768px) {
+  article {
+    --pico-block-spacing-vertical: var(--pico-spacing);
+    --pico-block-spacing-horizontal: var(--pico-spacing);
+  }
+}
+
+@media (min-width: 1024px) {
+  article {
+    --pico-block-spacing-vertical: calc(var(--pico-spacing) * 1.25);
+    --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.25);
+  }
 }
 
 @media (min-width: 1280px) {
+  article {
+    --pico-block-spacing-vertical: calc(var(--pico-spacing) * 1.5);
+    --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.5);
+  }
+
 	.container {
 		max-width: 1000px;
 	}
 }
 
 @media (min-width: 1536px) {
+  article {
+    --pico-block-spacing-vertical: calc(var(--pico-spacing) * 1.75);
+    --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.75);
+  }
+
 	.container {
 		max-width: 1000px;
 	}
@@ -83,3 +109,11 @@ tr.network:hover {
 nav li a:has(> div.logo) {
 	margin-bottom: 0;
 }
+
+details > div {
+	padding: 0 var(--pico-form-element-spacing-horizontal);
+}
+
+pre {
+	padding: 0.5rem;
+}

src_data/static/app.js

@@ -593,7 +593,7 @@ async function loadVars() {
   setValue('.slave-version', result.parameters.slaveVersion);
   setValue('.slave-ot-version', result.parameters.slaveOtVersion);
 
-  setBusy('.ot-busy', '.ot-table', false);
+  setBusy('.vars-busy', '.vars-table', false);
 
   setValue('.temp-unit', tempUnitStr);
   setValue('.pressure-unit', pressureUnitStr);