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

Move New/Load/Save below host input; double transport button size

Browse Source 
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 12:56:22 +02:00
co-authored by Claude Sonnet 4.6
parent 6640d99e4f
commit 95bc7dbaf0
2 changed files with 32 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/index.html
+17 -13
View File
@@ -8,23 +8,27 @@
<body> <body>
<header id="connection-bar"> <header id="connection-bar">
<label>Host <input id="host" type="text"></label> <div id="conn-row">
<button id="btn-connect">Connect</button> <label>Host <input id="host" type="text"></label>
<span id="conn-status" class="status-disconnected">Disconnected</span> <button id="btn-connect">Connect</button>
<span id="sud-controls"> <span id="conn-status" class="status-disconnected">Disconnected</span>
<span id="sud-controls">
<button id="btn-sud-start" class="transport-btn transport-start" title="Start / Resume">&#9654;</button>
<button id="btn-sud-pause" class="transport-btn transport-pause" title="Pause">&#9646;&#9646;</button>
<button id="btn-sud-stop" class="transport-btn transport-stop" title="Stop">&#9632;</button>
<span id="header-countdown" class="hidden">
<span class="hdr-cdown-row"><span class="hdr-cdown-lbl">total</span><span id="hdr-total-remaining">-:--:--</span></span>
<span class="hdr-cdown-row"><span class="hdr-cdown-lbl">ramp</span><span id="hdr-step-remaining">-:--:--</span></span>
<span class="hdr-cdown-row"><span class="hdr-cdown-lbl">hold</span><span id="hdr-hold-remaining">-:--:--</span></span>
</span>
</span>
</div>
<div id="file-row">
<button id="btn-sud-new">New</button> <button id="btn-sud-new">New</button>
<button id="btn-sud-load">Load&hellip;</button> <button id="btn-sud-load">Load&hellip;</button>
<input type="file" id="sud-file-input" accept="application/json" class="hidden"> <input type="file" id="sud-file-input" accept="application/json" class="hidden">
<button id="btn-sud-save">Save&hellip;</button> <button id="btn-sud-save">Save&hellip;</button>
<button id="btn-sud-start" class="transport-btn transport-start" title="Start / Resume">&#9654;</button> </div>
<button id="btn-sud-pause" class="transport-btn transport-pause" title="Pause">&#9646;&#9646;</button>
<button id="btn-sud-stop" class="transport-btn transport-stop" title="Stop">&#9632;</button>
<span id="header-countdown" class="hidden">
<span class="hdr-cdown-row"><span class="hdr-cdown-lbl">total</span><span id="hdr-total-remaining">-:--:--</span></span>
<span class="hdr-cdown-row"><span class="hdr-cdown-lbl">ramp</span><span id="hdr-step-remaining">-:--:--</span></span>
<span class="hdr-cdown-row"><span class="hdr-cdown-lbl">hold</span><span id="hdr-hold-remaining">-:--:--</span></span>
</span>
</span>
</header> </header>
<main id="layout"> <main id="layout">
web/style.css
+15 -6
View File
@@ -63,12 +63,21 @@ button:disabled { opacity: 0.4; cursor: default; }
header#connection-bar { header#connection-bar {
display: flex; display: flex;
align-items: center; flex-direction: column;
flex-wrap: wrap; gap: 0.4em;
gap: 1em;
padding: 0.6em 0; padding: 0.6em 0;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
} }
#conn-row {
display: flex;
align-items: center;
gap: 1em;
}
#file-row {
display: flex;
align-items: center;
gap: 0.4em;
}
#host { width: 18em; } #host { width: 18em; }
.status-connected { color: var(--green); font-weight: bold; } .status-connected { color: var(--green); font-weight: bold; }
@@ -118,11 +127,11 @@ header#connection-bar {
/* --- Transport buttons (circular, coloured) --- */ /* --- Transport buttons (circular, coloured) --- */
.transport-btn { .transport-btn {
width: 38px; width: 76px;
height: 38px; height: 76px;
border-radius: 50%; border-radius: 50%;
border: none; border: none;
font-size: 15px; font-size: 30px;
cursor: pointer; cursor: pointer;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;