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

style: move user-confirm control under the header's hold-time display

Browse Source 
Repositions #user-confirm-row from the header's own row to directly
under #header-countdown's "hold" row, sharing a new #countdown-confirm-
col column so header-countdown's 'hidden' toggle (only shown once a
step is active) doesn't hide the confirm control along with it - a
WAIT_USER confirm can happen before that countdown is visible.

Kept the max-width + wrap safety (now min(60vw, 20em)) so a long
confirmation message still wraps instead of pushing the header sideways
on an iPad's narrower viewport, per the earlier upper-right-corner
placement this replaces.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01M2ierBoxW3v7nUbDw3M2pE
This commit is contained in:
jens
2026-07-06 12:19:04 +02:00
co-authored by Claude Sonnet 5
parent 3b34f52bb0
commit 07c3f0a7d1
2 changed files with 26 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/index.html
+10 -8
View File
@@ -17,10 +17,16 @@
<button id="btn-sud-start" class="transport-btn transport-start" title="Start / Resume">&#9654;</button> <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-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> <button id="btn-sud-stop" class="transport-btn transport-stop" title="Stop">&#9632;</button>
<span id="header-countdown" class="hidden"> <span id="countdown-confirm-col">
<span class="hdr-cdown-row"><span class="hdr-cdown-lbl">total</span><span id="hdr-total-remaining">-:--:--</span></span> <span id="header-countdown" class="hidden">
<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">total</span><span id="hdr-total-remaining">-:--:--</span></span>
<span class="hdr-cdown-row"><span class="hdr-cdown-lbl">hold</span><span id="hdr-hold-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>
<div id="user-confirm-row">
<span id="user-confirm-text"></span>
<button id="btn-user-confirm" type="button" disabled>Confirm</button>
</div>
</span> </span>
</span> </span>
</div> </div>
@@ -30,10 +36,6 @@
<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>
</div> </div>
<div id="user-confirm-row">
<span id="user-confirm-text"></span>
<button id="btn-user-confirm" type="button" disabled>Confirm</button>
</div>
</header> </header>
<main id="layout"> <main id="layout">
web/style.css
+16 -1
View File
@@ -83,14 +83,29 @@ header#connection-bar {
/* --- User-confirm control (replaces a modal OK dialog) --- */ /* --- User-confirm control (replaces a modal OK dialog) --- */
/* Sits directly under the hold-time row of #header-countdown (the two
share this column so #header-countdown's own 'hidden' toggle doesn't
hide the confirm row along with it - a WAIT_USER confirm can happen
before the countdown ever becomes visible). max-width + wrapping keeps
a long message from overflowing off-screen on an iPad's tighter
viewport (~768-834 CSS px in portrait) instead of just widening the
whole header sideways. */
#countdown-confirm-col {
display: flex;
flex-direction: column;
gap: 0.3em;
}
#user-confirm-row { #user-confirm-row {
display: flex; display: flex;
flex-wrap: wrap;
align-items: center; align-items: center;
gap: 0.6em; gap: 0.4em;
max-width: min(60vw, 20em);
} }
#user-confirm-text { #user-confirm-text {
color: var(--yellow); color: var(--yellow);
font-weight: bold; font-weight: bold;
font-size: 0.9em;
} }
#btn-user-confirm { #btn-user-confirm {
font-weight: bold; font-weight: bold;