technicalkiwi/led-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile UX polish: scrollable column, menu workspace section, pin tap fixes

Browse Source 
The phone layout had three problems that compounded when running ADC /
Pin / Serial demos: the editor refused to shrink past 42vh so panels
spilled over a clipped console, the workspace badge was crammed full of
buttons, and the IN-pin toggle button was unreliable to tap.

- styles.css: on `<= 768px`, make `.main-content` scroll vertically and
  give the editor a fixed 50vh height (drops to 32vh via `:has()` when a
  simulator panel is open). All panels + console pin to `flex: 0 0 auto`
  so flexbox stops squashing them. Inner panel scroll caps tightened to
  22vh so two stacked panels don't push the console below the fold.
  `.pin-toggle` gets `touch-action: manipulation` + `user-select: none`
  to fix iOS taps inside scrollable parents.

- script.js: pin button now has a `pointerup` backup with a 300 ms
  debounce alongside `click` (Safari sometimes drops `click` on small
  buttons inside scroll containers). The `⋮` workspace menu auto-closes
  on outside `pointerdown` as well as `click`, so the open dropdown
  can't sit on top of the Pin panel and absorb taps.

- script.js / index.html / styles.css: move every Workspace action
  (Export, Import, Reset demos, plus the local-mode-only Folder…,
  Reconnect, IndexedDB swap, Exit) out of the badge and into a new
  "Workspace" section in the `⋮` menu. Badge keeps just the storage
  label. Adds `.menu-separator`, `.menu-section-label`, `.menu-note`,
  and `.menu-action` styles; removes the now-unused
  `.workspace-badge-action` / `-exit` / `-note` rules.

- bundled-demos/pin_demo.py: pin 4 is now driven exclusively by the
  IRQ handler, so it stays steady until the IN button is pressed —
  previously it auto-flashed via on/off in the loop, which made the
  IRQ effect indistinguishable from the existing animation. The IRQ
  handler also no longer prints on every press (the panel indicator
  is the feedback).

Cache busters: styles.css 32 -> 36, script.js 57 -> 59.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Jimmy
2026-05-10 07:16:45 +12:00
parent 7ee15f8eac
commit d355174f5a
4 changed files with 278 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
src/static/styles.css
View File

@@ -113,7 +113,8 @@ button,
border-radius: 8px;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
z-index: 60;
min-width: 220px;
min-width: 240px;
max-width: min(85vw, 320px);
padding: 0.35rem;
display: flex;
flex-direction: column;
@@ -141,6 +142,54 @@ button,
margin: 0;
}
.menu-separator {
height: 1px;
background: #e2e8f0;
margin: 0.35rem 0.2rem;
}
.menu-section-label {
padding: 0.35rem 0.7rem 0.2rem;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #94a3b8;
}
.menu-note {
padding: 0.4rem 0.7rem;
font-size: 0.78rem;
color: #94a3b8;
font-style: italic;
}
/* Buttons styled as menu items (Workspace actions, etc.). */
.menu-action {
appearance: none;
background: transparent;
border: none;
width: 100%;
text-align: left;
font: inherit;
color: #2d3748;
}
.menu-action:hover,
.menu-action:focus-visible {
background: #f1f5f9;
outline: none;
}
.menu-action-danger {
color: #b91c1c;
}
.menu-action-danger:hover,
.menu-action-danger:focus-visible {
background: #fee2e2;
}
/* Sidebar */
.sidebar {
width: 300px;
@@ -277,40 +326,7 @@ button,
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 220px;
}
.workspace-badge-exit,
.workspace-badge-action {
appearance: none;
border: 1px solid #cbd5e1;
background: transparent;
color: #475569;
border-radius: 4px;
padding: 0.05rem 0.4rem;
font-size: 0.7rem;
cursor: pointer;
line-height: 1.4;
}
.workspace-badge-exit:hover,
.workspace-badge-action:hover {
background: #e2e8f0;
}
.workspace-badge-action {
border-color: #93c5fd;
color: #1d4ed8;
}
.workspace-badge-action:hover {
background: #dbeafe;
}
.workspace-badge-note {
font-size: 0.7rem;
color: #94a3b8;
font-style: italic;
max-width: 240px;
}
#current-file {
@@ -685,6 +701,12 @@ button,
font-size: 0.85rem;
cursor: pointer;
text-align: center;
/* iOS Safari swallows taps on small buttons inside scrollable parents
* unless `touch-action: manipulation` is set (kills the 300ms double-tap
* zoom delay and the "is this a scroll start?" hesitation). */
touch-action: manipulation;
-webkit-tap-highlight-color: rgba(56, 189, 248, 0.25);
user-select: none;
}
.pin-toggle.on {
@@ -1172,6 +1194,12 @@ button,
.main-content {
width: 100%;
min-height: 0;
/* Let the right column scroll as a whole on phones. With ADC + Pins +
* Serial all open at once, their combined intrinsic heights exceed the
* viewport; without this the console (last child) gets clipped. */
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
.editor-header {
@@ -1244,9 +1272,31 @@ button,
}
.editor-container {
/* Pin the editor at a usable height; the rest of the column scrolls. */
flex: 0 0 auto;
height: 50vh;
min-height: 42vh;
}
/* When any of the live simulator panels (Pins / ADC / Serial / LED grid)
* is visible, give the editor less screen real estate so the panels and
* console don't get pushed below the fold. The whole column is still
* scrollable, this just biases space toward the panels. */
.main-content:has(.pin-panel:not(.hidden), .adc-panel:not(.hidden), .serial-panel:not(.hidden), .led-sim-panel:not(.hidden)) .editor-container {
height: 32vh;
min-height: 26vh;
}
/* Stop the editor / panels / console from being squashed by flexbox —
* each keeps its natural (or capped) height and the column scrolls. */
.led-sim-panel,
.pin-panel,
.adc-panel,
.serial-panel,
.console-container {
flex: 0 0 auto;
}
.cm-editor {
font-size: 14px; /* >=16px would prevent iOS zoom but feels too large here; CM is contenteditable so no zoom anyway. */
}
@@ -1306,6 +1356,21 @@ button,
-webkit-tap-highlight-color: transparent;
}
/* Cap each panel's scroll region tighter on mobile so two or three of them
* stacked don't push the console far below the fold. The whole column is
* already scrollable; this just keeps individual panels compact. */
.pin-rows {
max-height: 22vh;
}
.adc-sliders {
max-height: 22vh;
}
.serial-output {
max-height: 22vh;
}
.adc-slider {
min-height: 2.75rem;
padding: 0.75rem 0;