jens/brewpi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Optimize browser GUI layout for iPad Air 4 / Safari

Browse Source 
- Add viewport meta tag so Safari uses device CSS pixels
- Move LCD units to a dedicated right-hand column; strip them from labels
- Tighten LCD grid: 4-column layout, narrower gap, font-size 1.9em

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SH2D4LRuCnhLSzoYerAfJX
This commit is contained in:
jens
2026-06-28 15:18:54 +02:00
co-authored by Claude Sonnet 4.6
parent 95bc7dbaf0
commit d44601fee1
2 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/index.html
+8 -3
View File
@@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BrewPi</title> <title>BrewPi</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
@@ -88,21 +89,25 @@
<div class="lcd-label"></div> <div class="lcd-label"></div>
<div>Ist</div> <div>Ist</div>
<div>Soll</div> <div>Soll</div>
<div></div>
</div> </div>
<div class="lcd-row"> <div class="lcd-row">
<div class="lcd-label">Temperature [&deg;C]</div> <div class="lcd-label">Temperature</div>
<div class="lcd" id="lcd-temp-ist">--</div> <div class="lcd" id="lcd-temp-ist">--</div>
<div class="lcd" id="lcd-temp-soll">--</div> <div class="lcd" id="lcd-temp-soll">--</div>
<div class="lcd-unit">&deg;C</div>
</div> </div>
<div class="lcd-row"> <div class="lcd-row">
<div class="lcd-label">Heat rate [&deg;C/min]</div> <div class="lcd-label">Heat rate</div>
<div class="lcd" id="lcd-rate-ist">--</div> <div class="lcd" id="lcd-rate-ist">--</div>
<div class="lcd" id="lcd-rate-soll">--</div> <div class="lcd" id="lcd-rate-soll">--</div>
<div class="lcd-unit">&deg;C/min</div>
</div> </div>
<div class="lcd-row"> <div class="lcd-row">
<div class="lcd-label">Power [W]</div> <div class="lcd-label">Power</div>
<div class="lcd" id="lcd-power-ist">--</div> <div class="lcd" id="lcd-power-ist">--</div>
<div class="lcd" id="lcd-power-soll">--</div> <div class="lcd" id="lcd-power-soll">--</div>
<div class="lcd-unit">W</div>
</div> </div>
</div> </div>
web/style.css
+4 -3
View File
@@ -154,13 +154,14 @@ header#connection-bar {
#lcd-panel { #lcd-panel {
display: grid; display: grid;
grid-template-columns: 9em 4em 4em; grid-template-columns: 7em 4em 4em auto;
gap: 0.25em 0.5em; gap: 0.2em 0.3em;
font-size: 2.2em; font-size: 1.9em;
} }
.lcd-row { display: contents; } .lcd-row { display: contents; }
.lcd-header { font-weight: bold; color: var(--text-muted); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.06em; } .lcd-header { font-weight: bold; color: var(--text-muted); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.06em; }
.lcd-label { color: var(--text-muted); font-size: 0.9em; align-self: center; } .lcd-label { color: var(--text-muted); font-size: 0.9em; align-self: center; }
.lcd-unit { color: var(--text-muted); font-size: 0.7em; align-self: center; white-space: nowrap; }
.lcd { .lcd {
font-family: 'Courier New', 'Lucida Console', monospace; font-family: 'Courier New', 'Lucida Console', monospace;
font-size: 1.1em; font-size: 1.1em;