From d0d0c7d3ee4c9a0577643caa9a9e36379b29695c Mon Sep 17 00:00:00 2001 From: Jens Ahrensfeld Date: Sun, 28 Jun 2026 16:31:43 +0200 Subject: [PATCH] Add collapsible manual panel to give progress pane more room Toggle button (top-left of column, always same position) collapses the manual panel from 16em to 2em with a CSS transition; state persists in localStorage across reloads. Co-Authored-By: Claude Sonnet 4.6 Claude-Session: https://claude.ai/code/session_01SH2D4LRuCnhLSzoYerAfJX --- web/app.js | 12 +++++++ web/index.html | 87 ++++++++++++++++++++++++++------------------------ web/style.css | 27 ++++++++++++++++ 3 files changed, 84 insertions(+), 42 deletions(-) diff --git a/web/app.js b/web/app.js index f451723..c0a2666 100644 --- a/web/app.js +++ b/web/app.js @@ -937,4 +937,16 @@ setInterval(() => { stepPlates.forEach(applyLedColor); }, 500); +const btnManualToggle = document.getElementById('btn-manual-toggle'); +function setManualCollapsed(collapsed) { + document.getElementById('layout').classList.toggle('manual-collapsed', collapsed); + btnManualToggle.textContent = collapsed ? '▶' : '◄'; + btnManualToggle.title = collapsed ? 'Expand manual panel' : 'Collapse manual panel'; + localStorage.setItem('manualCollapsed', collapsed ? '1' : '0'); +} +btnManualToggle.addEventListener('click', () => { + setManualCollapsed(!document.getElementById('layout').classList.contains('manual-collapsed')); +}); +setManualCollapsed(localStorage.getItem('manualCollapsed') === '1'); + updateSudActions(); diff --git a/web/index.html b/web/index.html index ba7f91a..cb6a15e 100644 --- a/web/index.html +++ b/web/index.html @@ -35,49 +35,52 @@
-
-

Controller

- - -
-
-

Heater

- - -
-
-

Stirrer

- -
-
-

Environment

- -
diff --git a/web/style.css b/web/style.css index a04369a..0f41457 100644 --- a/web/style.css +++ b/web/style.css @@ -182,6 +182,33 @@ header#connection-bar { gap: 1.5em; align-items: start; margin-top: 1em; + transition: grid-template-columns 0.2s ease; +} +#layout.manual-collapsed { + grid-template-columns: 2em auto 1fr; +} + +/* --- Manual column collapse --- */ + +#col-manual { + display: flex; + flex-direction: column; + overflow: hidden; +} +#btn-manual-toggle { + align-self: flex-start; + width: 2em; + height: 2em; + padding: 0; + font-size: 0.9em; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + margin-bottom: 0.4em; +} +#layout.manual-collapsed #manual-panels { + display: none; } #col-progress { overflow-y: auto; }