fafo/jeol-t330a
11
0
Fork 0
Code Issues 5 Pull requests 2 Actions Packages Projects Releases Wiki Activity

succd: Use grid layout to show all info on a single screen

Browse source 
Use CSS grids to all information on a single screen if possible.  There
is a breakpoint for smaller screens.
This commit is contained in:
Rahix 2024-10-04 23:08:29 +02:00
parent 102393a689
commit 313569e1dc
1 changed files with 30 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
succbone/succd/index.html
View file

@ -5,12 +5,11 @@
<link rel="shortcut icon" type="image/png" href="/favicon.png"> <link rel="shortcut icon" type="image/png" href="/favicon.png">
<style> <style>
body { body {
font-size: 14px; font-size: 12px;
padding: 2em; padding: 2em;
} }
table { table {
font-size: 40px; font-size: 40px;
margin-top: 1em;
} }
table.status td { table.status td {
width: 2em; width: 2em;
@ -52,6 +51,16 @@ td > span {
.logo > img { .logo > img {
height: 10em; 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> </style>
<div class="logo"><img src="/favicon.png" /></div> <div class="logo"><img src="/favicon.png" /></div>
@ -59,19 +68,7 @@ td > span {
<h1>succd</h1> <h1>succd</h1>
<h2>nothing more permanent than a temporary solution</h2> <h2>nothing more permanent than a temporary solution</h2>
<p style="margin-top: 2em; clear: both;"> <div class="main-grid">
<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 class="status"> <table class="status">
<tr> <tr>
<th>Thresholds</th> <th>Thresholds</th>
@ -96,6 +93,19 @@ td > span {
</tr> </tr>
</table> </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> <table>
<tr> <tr>
<th rowspan="3">Control</th> <th rowspan="3">Control</th>
@ -125,10 +135,11 @@ td > span {
<td id="load" colspan="1">...</td> <td id="load" colspan="1">...</td>
</tr> </tr>
</table> </table>
</p>
<p style="margin-top: 2em;"> <p>
<canvas id="graph" width="1024" height="512" style="max-width: 100%;"></canvas> <canvas id="graph" width="1024" height="512" style="max-width: 100%;"></canvas>
</p> </p>
</div>
<p style="font-style: italic; font-size: 12px; margin-top: 5em;"> <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> {{ .System.Hostname }} | load: {{ .System.Load }} | <a href="/debug/pprof">pprof</a> | <a href="/metrics">metrics</a> | ws ping: <span id="ping">…</span>