From 313569e1dcff4fd16ab112c3d3e257cc704515de Mon Sep 17 00:00:00 2001
From: Rahix <rahix@rahix.de>
Date: Fri, 4 Oct 2024 23:08:29 +0200
Subject: [PATCH] succd: Use grid layout to show all info on a single screen

Use CSS grids to all information on a single screen if possible.  There
is a breakpoint for smaller screens.
---
 succbone/succd/index.html | 49 ++++++++++++++++++++++++---------------
 1 file changed, 30 insertions(+), 19 deletions(-)

diff --git a/succbone/succd/index.html b/succbone/succd/index.html
index a26db5d..a8eaf00 100644
--- a/succbone/succd/index.html
+++ b/succbone/succd/index.html
@@ -5,12 +5,11 @@
 <link rel="shortcut icon" type="image/png" href="/favicon.png">
 <style>
 body {
-    font-size: 14px;
+    font-size: 12px;
     padding: 2em;
 }
 table {
     font-size: 40px;
-    margin-top: 1em;
 }
 table.status td {
     width: 2em;
@@ -52,6 +51,16 @@ td > span {
 .logo > img {
     height: 10em;
 }
+
+.main-grid {
+    margin: 2em;
+    clear: both;
+
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(50em, 1fr));
+    column-gap: 2em;
+    row-gap: 2em;
+}
 </style>
 
 <div class="logo"><img src="/favicon.png" /></div>
@@ -59,19 +68,7 @@ td > span {
 <h1>succd</h1>
 <h2>nothing more permanent than a temporary solution</h2>
 
-<p style="margin-top: 2em; clear: both;">
-    <table>
-        <tr>
-            <th rowspan="2">Pirani Gauge</th>
-            <th>Voltage</th>
-            <td id="volts">{{ .Pirani.Volts }}</td>
-        </tr>
-        <tr>
-            <th>Pressure</th>
-            <td id="mbar">{{ .Pirani.Mbar }}</td>
-        </tr>
-    </table>
-
+<div class="main-grid">
     <table class="status">
         <tr>
             <th>Thresholds</th>
@@ -96,6 +93,19 @@ td > span {
         </tr>
     </table>
 
+    <table>
+        <tr>
+            <th rowspan="2">Pirani Gauge</th>
+            <th>Voltage</th>
+            <td id="volts">{{ .Pirani.Volts }}</td>
+        </tr>
+        <tr>
+            <th>Pressure</th>
+            <td id="mbar">{{ .Pirani.Mbar }}</td>
+        </tr>
+    </table>
+
+
     <table>
         <tr>
             <th rowspan="3">Control</th>
@@ -125,10 +135,11 @@ td > span {
             <td id="load" colspan="1">...</td>
         </tr>
     </table>
-</p>
-<p style="margin-top: 2em;">
-    <canvas id="graph" width="1024" height="512" style="max-width: 100%;"></canvas>
-</p>
+
+    <p>
+        <canvas id="graph" width="1024" height="512" style="max-width: 100%;"></canvas>
+    </p>
+</div>
 
 <p style="font-style: italic; font-size: 12px; margin-top: 5em;">
     {{ .System.Hostname }} | load: {{ .System.Load }} | <a href="/debug/pprof">pprof</a> | <a href="/metrics">metrics</a> | ws ping: <span id="ping">…</span>