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

Move Sud controls into the header bar next to Connect

Browse Source 
New/Load/Save/Start/Stop now live in #sud-controls inside
#connection-bar, visible regardless of which tab is active, instead of
a standalone panel above the tabs. Drops the now-unused .button-row
rule along with it.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0189FkmyJkY77HqsNomr1DwV
This commit is contained in:
jens
2026-06-25 00:28:03 +02:00
co-authored by Claude Sonnet 4.6
parent 0e343655b7
commit 9b7ef5832e
2 changed files with 18 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/index.html
+8 -13
View File
@@ -11,6 +11,14 @@
<label>Host <input id="host" type="text"></label> <label>Host <input id="host" type="text"></label>
<button id="btn-connect">Connect</button> <button id="btn-connect">Connect</button>
<span id="conn-status" class="status-disconnected">Disconnected</span> <span id="conn-status" class="status-disconnected">Disconnected</span>
<span id="sud-controls">
<button id="btn-sud-new">New</button>
<button id="btn-sud-load">Load&hellip;</button>
<input type="file" id="sud-file-input" accept="application/json" class="hidden">
<button id="btn-sud-save">Save&hellip;</button>
<button id="btn-sud-start">Start</button>
<button id="btn-sud-stop">Stop</button>
</span>
</header> </header>
<div id="lcd-panel"> <div id="lcd-panel">
@@ -43,19 +51,6 @@
<main> <main>
<section id="tab-manual" class="tab-content active"> <section id="tab-manual" class="tab-content active">
<div class="panel">
<h3>Sud</h3>
<div class="button-row">
<button id="btn-sud-new">New</button>
<button id="btn-sud-load">Load&hellip;</button>
<input type="file" id="sud-file-input" accept="application/json" class="hidden">
<button id="btn-sud-save">Save&hellip;</button>
</div>
<div class="button-row">
<button id="btn-sud-start">Start</button>
<button id="btn-sud-stop">Stop</button>
</div>
</div>
<div class="panel"> <div class="panel">
<h3>Controller</h3> <h3>Controller</h3>
<label><input type="checkbox" id="tc-enabled"> Enabled</label> <label><input type="checkbox" id="tc-enabled"> Enabled</label>
web/style.css
+10 -6
View File
@@ -16,6 +16,7 @@ body {
header#connection-bar { header#connection-bar {
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap;
gap: 1em; gap: 1em;
padding-bottom: 0.5em; padding-bottom: 0.5em;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
@@ -24,6 +25,14 @@ header#connection-bar {
.status-connected { color: #2ecc71; font-weight: bold; } .status-connected { color: #2ecc71; font-weight: bold; }
.status-disconnected { color: #999; } .status-disconnected { color: #999; }
#sud-controls {
display: flex;
align-items: center;
gap: 0.5em;
padding-left: 1em;
border-left: 1px solid #ccc;
}
#lcd-panel { #lcd-panel {
display: grid; display: grid;
grid-template-columns: 10em 6em 6em; grid-template-columns: 10em 6em 6em;
@@ -84,12 +93,7 @@ nav#tabs {
.hidden { display: none; } .hidden { display: none; }
.button-row { #sud-controls button:disabled { opacity: 0.5; cursor: default; }
display: flex;
gap: 0.5em;
margin: 0.3em 0;
}
.button-row button:disabled { opacity: 0.5; cursor: default; }
#step-plates { display: flex; flex-direction: column; gap: 0.5em; max-width: 36em; } #step-plates { display: flex; flex-direction: column; gap: 0.5em; max-width: 36em; }