Plant operation page: work on phones and tablets held sideways
Deploy test site / deploy (push) Successful in 37s

The header no longer forces a 1,600 px layout: it wraps on tablets and
narrow desktops (all nine KPIs now fit at 1,600 px, one was clipped
before), and on short screens (max-height 560 px, i.e. phones in
landscape) it collapses to one row with a scrolling KPI strip. There the
detail, event log and legend move into a side sheet (Info button, opens
by itself when a station is tapped), so the drawing gets the full height.

The drawing pans and zooms by viewBox, so the sim coordinates are
untouched: pinch and drag on touch, wheel and drag with a mouse, plus
zoom buttons and +/-/0 keys. A drag or pinch never selects the station
under the finger. Uses 100dvh and disables iOS landscape text inflation.
Upright phones get a hint to turn sideways.

Checked in Chrome device emulation at 667x375, 740x360, 844x390,
932x430, 1024x768, 1180x820, 1366x1024, 1258x800, 1600x900, 1920x1080
(no horizontal overflow, zoom controls clear of every station) with real
touch input (tap, tab switching, pinch, drag) and a 10x sim run without
errors.
This commit is contained in:
grabowski committed 2026-10-02 21:33:04 +02:00
1 parent 52bf35f183
commit e23be20b13
3 files changed
+135 -15

No files matched your search

+3 -1
View File
@@ -118,7 +118,9 @@ The detail lives in dedicated documents:
animating the whole plant as a simulated SCADA overview, from PVC intake
and the material lab through extruder, press, trim, optical inspection,
finishing, packaging and fulfillment, with the metal path, utilities and
energy alongside; open it in a browser, every station is clickable
energy alongside; open it in a browser, every station is clickable;
on phones and tablets held sideways it pinch-zooms and opens station
details in a side sheet
- [Test site](site/README.md): `site/` builds https://cnxvinyl.lol/, the
internal test site with demo pages from `docs/` (the plant operation
page first) and any static site we want to share by link; Gitea Actions