technicalkiwi/python-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

7
src/static/index.html
View File

@@ -6,7 +6,7 @@
<meta name="theme-color" content="#2d3748">
<title>LED Editor</title>
<link rel="icon" href="data:,">
<link rel="stylesheet" href="/static/styles.css?v=32">
<link rel="stylesheet" href="/static/styles.css?v=36">
</head>
<body>
<div class="container">
@@ -48,6 +48,9 @@
<input type="checkbox" id="panel-16x16-checkbox" />
16×16 panel
</label>
<div class="menu-separator" role="separator"></div>
<div class="menu-section-label" id="workspace-menu-label">Workspace</div>
<div id="workspace-menu-actions" role="group"></div>
</div>
</details>
</div>
@@ -118,6 +121,6 @@
</div>
</div>
<script type="module" src="/static/script.js?v=57"></script>
<script type="module" src="/static/script.js?v=59"></script>
</body>
</html>