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

fix: move heater/stirrer connection status next to the panel heading

Browse Source 
The Connected/Disconnected badge, F/W version text, and both Connect/
Disconnect buttons were crammed into one row, clipping the Disconnect
button off-panel. Move the status badge into the h3 heading itself
(right-aligned) so the row below has room for the F/W text and both
buttons.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01YaPLuRPpyjWcwhMvCvpHCL
This commit is contained in:
jens
2026-07-03 20:03:52 +02:00
co-authored by Claude Sonnet 5
parent 069fc352bc
commit 7377fe3b6b
3 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app.js
+1 -1
View File
@@ -543,7 +543,7 @@ function updateSudActions() {
function updateDeviceStatus(prefix, isConnected, firmware, simulated) { function updateDeviceStatus(prefix, isConnected, firmware, simulated) {
const statusEl = document.getElementById(`${prefix}-status`); const statusEl = document.getElementById(`${prefix}-status`);
statusEl.textContent = isConnected ? 'Connected' : 'Disconnected'; statusEl.textContent = isConnected ? 'Connected' : 'Disconnected';
statusEl.className = isConnected ? 'status-connected' : 'status-disconnected'; statusEl.className = `panel-status ${isConnected ? 'status-connected' : 'status-disconnected'}`;
document.getElementById(`${prefix}-firmware`).textContent = firmware ? `F/W ${firmware}` : ''; document.getElementById(`${prefix}-firmware`).textContent = firmware ? `F/W ${firmware}` : '';
const connectBtn = document.getElementById(`btn-${prefix}-connect`); const connectBtn = document.getElementById(`btn-${prefix}-connect`);
const disconnectBtn = document.getElementById(`btn-${prefix}-disconnect`); const disconnectBtn = document.getElementById(`btn-${prefix}-disconnect`);
web/index.html
+2 -4
View File
@@ -50,9 +50,8 @@
</label> </label>
</div> </div>
<div class="panel"> <div class="panel">
<h3>Heater</h3> <h3>Heater <span id="heater-status" class="panel-status status-disconnected">Disconnected</span></h3>
<div class="device-status-row"> <div class="device-status-row">
<span id="heater-status" class="status-disconnected">Disconnected</span>
<span id="heater-firmware" class="device-firmware"></span> <span id="heater-firmware" class="device-firmware"></span>
<button id="btn-heater-connect">Connect</button> <button id="btn-heater-connect">Connect</button>
<button id="btn-heater-disconnect" disabled>Disconnect</button> <button id="btn-heater-disconnect" disabled>Disconnect</button>
@@ -68,9 +67,8 @@
</label> </label>
</div> </div>
<div class="panel"> <div class="panel">
<h3>Stirrer</h3> <h3>Stirrer <span id="stirrer-status" class="panel-status status-disconnected">Disconnected</span></h3>
<div class="device-status-row"> <div class="device-status-row">
<span id="stirrer-status" class="status-disconnected">Disconnected</span>
<span id="stirrer-firmware" class="device-firmware"></span> <span id="stirrer-firmware" class="device-firmware"></span>
<button id="btn-stirrer-connect">Connect</button> <button id="btn-stirrer-connect">Connect</button>
<button id="btn-stirrer-disconnect" disabled>Disconnect</button> <button id="btn-stirrer-disconnect" disabled>Disconnect</button>
web/style.css
+9
View File
@@ -307,6 +307,9 @@ header#connection-bar {
box-shadow: 0 2px 8px rgba(0,0,0,0.45); box-shadow: 0 2px 8px rgba(0,0,0,0.45);
} }
.panel h3 { .panel h3 {
display: flex;
justify-content: space-between;
align-items: baseline;
margin: 0 0 0.5em 0; margin: 0 0 0.5em 0;
font-size: 0.85em; font-size: 0.85em;
text-transform: uppercase; text-transform: uppercase;
@@ -315,6 +318,11 @@ header#connection-bar {
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
padding-bottom: 0.35em; padding-bottom: 0.35em;
} }
.panel-status {
text-transform: none;
letter-spacing: normal;
font-size: 1rem;
}
.panel label { .panel label {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -336,6 +344,7 @@ header#connection-bar {
.device-status-row { .device-status-row {
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap;
gap: 0.6em; gap: 0.6em;
margin: 0.4em 0; margin: 0.4em 0;
font-size: 0.9em; font-size: 0.9em;