From 5f5c653a5d0ca5bb7c673b82ce20f193f532b5c6 Mon Sep 17 00:00:00 2001
From: Rahix <rahix@rahix.de>
Date: Sun, 10 Nov 2024 01:38:32 +0100
Subject: [PATCH] succd: Improve styling of temperature values

HMI design goes brrrr...
---
 succbone/succd/index.html | 73 +++++++++++++++++++++------------------
 1 file changed, 40 insertions(+), 33 deletions(-)

diff --git a/succbone/succd/index.html b/succbone/succd/index.html
index c598f0c..d700e1e 100644
--- a/succbone/succd/index.html
+++ b/succbone/succd/index.html
@@ -9,19 +9,19 @@ body {
     padding: 2em;
 }
 table {
-    font-size: 40px;
+    font-size: 30px;
 }
 table.status td {
     width: 2em;
 }
 th, td {
     background-color: #e8e8e8;
-    padding: 0.4em;
+    padding: 0.3em;
 }
 th {
     font-weight: 100;
     text-align: right;
-    font-size: 30px;
+    font-size: 25px;
 }
 td {
     text-align: left;
@@ -34,7 +34,7 @@ h2 {
     font-weight: 100;
 }
 button {
-    height: 4.5em;
+    height: 3.3em;
     padding-left: 1.5em;
     padding-right: 1.5em;
 }
@@ -76,6 +76,7 @@ td > span {
 
 .has-hidden:hover .hidden-text {
     display: block;
+}
 
 @media only screen and (max-width: 700px) {
     body {
@@ -111,22 +112,6 @@ td > span {
             <th>DP</th>
             <td id="dp">{{ if .Pumps.DPOn }}ON{{ else }}OFF{{ end }}</td>
         </tr>
-        <tr>
-            <th>Temperatures</th>
-            <th>SEM</th>
-            <td id="temp-sem">{{ .Temperatures.SEM }}</td>
-            <th>DPBottom</th>
-            <td id="temp-dp-bottom">{{ .Temperatures.DPBottom }}</td>
-            <th>DPTop</th>
-            <td id="temp-dp-top">{{ .Temperatures.DPTop }}</td>
-            <th>DPInlet</th>
-            <td id="temp-dp-inlet">{{ .Temperatures.DPInlet }}</td>
-        </tr>
-        <tr>
-            <th>Humidity</th>
-            <th>SEM</th>
-            <td id="humidity-sem">{{ .Humidity.SEM }}</td>
-        </tr>
         <tr>
             <th>Safety</th>
             <th style="font-size: 0.7em;">Pirani<br />Failsafe</th>
@@ -136,19 +121,6 @@ td > span {
         </tr>
     </table>
 
-    <table>
-        <tr>
-            <th>Pirani Pressure</th>
-            <td class="has-hidden">
-                <div id="mbar">{{ .Pirani.Mbar }}</div>
-                <div class="hidden-text" style="color: #606060;">
-                    <span>Voltage: </span><span id="volts">{{ .Pirani.Volts }}</span>
-                </div>
-            </td>
-        </tr>
-    </table>
-
-
     <table>
         <tr>
             <th rowspan="3">Control</th>
@@ -179,6 +151,41 @@ td > span {
         </tr>
     </table>
 
+    <table>
+        <tr>
+            <th>Pirani Pressure</th>
+            <td colspan="2" class="has-hidden">
+                <div id="mbar">{{ .Pirani.Mbar }}</div>
+                <div class="hidden-text" style="color: #606060;">
+                    <span>Voltage: </span><span id="volts">{{ .Pirani.Volts }}</span>
+                </div>
+            </td>
+        </tr>
+        <tr>
+            <th rowspan="4">Temperatures</th>
+            <th>DP Bottom</th>
+            <td id="temp-dp-bottom">{{ .Temperatures.DPBottom }}</td>
+        </tr>
+        <tr>
+            <th>DP Top</th>
+            <td id="temp-dp-top">{{ .Temperatures.DPTop }}</td>
+        </tr>
+        <tr>
+            <th>DP Inlet</th>
+            <td id="temp-dp-inlet">{{ .Temperatures.DPInlet }}</td>
+        </tr>
+        <tr>
+            <th>SEM Environment</th>
+            <td id="temp-sem">{{ .Temperatures.SEM }}</td>
+        </tr>
+        <tr>
+            <th>Humidity</th>
+            <th>SEM Environment</th>
+            <td id="humidity-sem">{{ .Humidity.SEM }}</td>
+        </tr>
+    </table>
+
+
     <div class="graph-container">
         <canvas id="graph" width="1024" height="512" style="max-width: 100%;"></canvas>
     </div>