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

Redesign browser GUI: drop tabs, 3-column layout, labels above sliders

Browse Source 
- Remove tab system (nav#tabs, tab-btn, tab-content) from HTML/CSS/JS
- Permanent 3-column grid: manual controls (left, 16em) | LCD+pot (center) | progress (right, fills remaining)
- LCD panel stacks above pot SVG in center column, both hidden until connected
- Step plates no longer max-width capped, fill the right column
- Slider labels moved above the slider+readout row via flex-direction: column

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DF16nV2ispNw1C9SbvqbRQ
This commit is contained in:
jens
2026-06-27 21:35:25 +02:00
co-authored by Claude Sonnet 4.6
parent b4e7007c4a
commit 5c2a301f1f
3 changed files with 80 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/style.css
+28 -43
View File
@@ -114,9 +114,9 @@ header#connection-bar {
#lcd-panel {
display: grid;
grid-template-columns: 11em 6em 6em;
gap: 0.25em 1em;
max-width: 32em;
grid-template-columns: 9em 4em 4em;
gap: 0.25em 0.5em;
font-size: 1.1em;
}
.lcd-row { display: contents; }
.lcd-header { font-weight: bold; color: var(--text-muted); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.06em; }
@@ -133,16 +133,27 @@ header#connection-bar {
border-radius: 3px;
}
/* --- LCD + pot row --- */
/* --- 3-column layout --- */
#layout {
display: grid;
grid-template-columns: 16em auto 1fr;
gap: 1.5em;
align-items: start;
margin-top: 1em;
}
#col-progress { overflow-y: auto; }
/* --- LCD + pot (center column) --- */
#sud-status-line, #env-status-line { visibility: hidden; }
#lcd-pot-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5em;
margin: 1em 0;
font-size: 2em;
gap: 1em;
visibility: hidden;
}
@@ -217,37 +228,7 @@ header#connection-bar {
transition: opacity 0.4s;
}
/* --- Tabs --- */
nav#tabs {
margin-top: 1em;
border-bottom: 1px solid var(--border);
}
.tab-btn {
background: none;
border: 1px solid transparent;
border-bottom: none;
color: var(--text-muted);
padding: 0.4em 1.1em;
cursor: pointer;
position: relative;
top: 1px;
border-radius: 4px 4px 0 0;
transition: color 0.15s;
}
.tab-btn:hover:not(.active) { color: var(--text); border-color: var(--border); }
.tab-btn.active {
background: var(--surface);
color: var(--text);
font-weight: bold;
border-color: var(--border);
border-bottom: 1px solid var(--surface);
}
.tab-content { display: none; padding: 1em 0; }
.tab-content.active { display: block; }
/* --- Manual tab panels --- */
/* --- Manual panels --- */
.panel {
background: var(--surface);
@@ -255,7 +236,6 @@ nav#tabs {
border-radius: 6px;
padding: 0.8em 1.1em;
margin-bottom: 0.8em;
max-width: 30em;
box-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
.panel h3 {
@@ -269,11 +249,16 @@ nav#tabs {
}
.panel label {
display: flex;
align-items: center;
gap: 0.6em;
flex-direction: column;
gap: 0.2em;
margin: 0.4em 0;
}
.panel input[type="range"] { flex: 1; accent-color: var(--accent); }
.slider-row {
display: flex;
align-items: center;
gap: 0.6em;
}
.slider-row input[type="range"] { flex: 1; accent-color: var(--accent); }
.panel input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; }
.panel input[type="number"] { width: 6em; }
@@ -284,7 +269,7 @@ nav#tabs {
/* --- Progress tab: step plates --- */
#step-plates { display: flex; flex-direction: column; gap: 0.5em; max-width: 38em; }
#step-plates { display: flex; flex-direction: column; gap: 0.5em; }
.step-plate {
background: var(--surface);