Skip to content

feat: ultimate touch and phone support - #151

Open
professionalarduino-max wants to merge 4 commits into
DashBlocks:developfrom
professionalarduino-max:feature/mobile-friendly-editor
Open

feat: ultimate touch and phone support#151
professionalarduino-max wants to merge 4 commits into
DashBlocks:developfrom
professionalarduino-max:feature/mobile-friendly-editor

Conversation

@professionalarduino-max

@professionalarduino-max professionalarduino-max commented Oct 16, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

What

Ultimate touch and phone support for Dash — the editor becomes genuinely usable on phones, tablets and touch screens, plus an installable offline PWA shell.

Round 1 — layouts, touch targets, UX

  • Phone layout (<600px): panels go full width with a 40/60 split; editor modes become full-screen sheets with a back button; safe-area insets for notched phones
  • Landscape phones (max-height 520px): horizontal row layout
  • Sticky bottom tab bar on phones (≤599px) with icons + labels
  • Keyboard-aware layout: visualViewport tracks the on-screen keyboard and sets --dash-keyboard-height so inputs and modals stay visible
  • Full-screen modals on phones (library, costumes, sounds, alerts, settings)
  • Touch-sized controls: 44px+ targets across 18 stylesheets (menu-bar, sprite selector, sprite info, close buttons, action menu, asset panel, backpack, sound editor, stage selector, context menus…)
  • 16px inputs on phones (prevents iOS zoom-on-focus)
  • overscroll-behavior so pulling down does not reload the page
  • Swipe between editor tabs (code/costumes/sounds) with edge guards, reduced-motion respected
  • Long-press context menus: holdToDisplay 400ms so tap-vs-hold is reliable
  • Haptic feedback (Vibration API) on taps and drag start

Round 2 — PWA, gestures, settings

  • PWA: web app manifest improvements (scope, orientation, maskable icon), service worker with network-first navigation + cache-first static assets (cross-origin/API traffic never cached), install prompt button ("Install app") that appears when the browser offers installation
  • Pinch-to-zoom workspace (hammerjs): pinch zoom around fingers, two-finger pan, double-tap to toggle 1x ↔ default scale; block drags are ignored so gestures never fight the editor; scale clamped 0.25–4x
  • Readable default zoom on phones (blocks start at 0.9 scale)
  • Touch & phone settings panel in the menu bar: haptic feedback toggle, "Keep screen on" (Screen Wake Lock API with automatic re-acquire on tab focus), "Compact interface" toggle (html.dash-compact shrinks controls)
  • Wake lock while running: green flag keeps the screen awake for presentations/kiosks
  • Service worker path is derived from the manifest URL so sub-path deploys keep working

Testing

  • npm ci && npm start — desktop editor unchanged; phone layout kicks in below 600px
  • DevTools device emulation: portrait phone, landscape phone, notched phone (safe areas), on-screen keyboard
  • Chrome/Edge: install button appears (menu bar → 📱 → Install app); app opens standalone
  • Touch device: pinch the code area to zoom, two fingers to pan, double-tap empty canvas to reset
  • Settings panel: toggle haptics/compact/keep-awake; compact mode shrinks the UI

Depends on hammerjs (pinned 2.0.8, added to package.json + package-lock.json).

@professionalarduino-max
feat: fit the editor for phones and touch screens
5201c73 
- Stack the stage above the editor on windows narrower than 1024px and
  let the page scroll vertically
- Shrink the stage to fit narrow windows instead of overflowing
  (same approach as the existing fullscreen branch in screen-utils)
- Larger tab and menu item tap targets on coarse pointers
- touch-action: manipulation on buttons to avoid the double-tap zoom delay
- Menu bar scrolls horizontally on narrow screens
@professionalarduino-max
feat: ultimate touch and phone support
4ae20d8 
Layout:
- Phone portrait (<600px): compact stage menu and tabs, wider sprite pane,
  scrollable sprite-info row and menu bar, safe-area insets for notched
  screens
- Phone landscape (short windows): keep the side-by-side layout so the
  editor is not squeezed under the stage
- Full-screen modals on phones; library/sprite tiles grow on touch
- On-screen keyboard: visualViewport tracking keeps the focused input
  visible (body padding via --dash-keyboard-height)

Touch:
- Swipe the tab bar to switch Code/Costumes/Sounds
- Long-press (400ms) opens sprite context menus on touch
- Haptic feedback on green flag, stop and when a drag starts
- Larger tap targets for stage controls, tabs, menu items, context menus,
  modals, sound editor, backpack, close buttons (pointer: coarse)
- No double-tap zoom delay; 16px form fields so iOS does not auto-zoom
- prefers-reduced-motion support
@professionalarduino-max professionalarduino-max changed the title feat: fit the editor for phones and touch screens feat: ultimate touch and phone support Oct 16, 2026
@professionalarduino-max
feat: pwa install, pinch zoom and touch settings
36a9136 
- PWA: webmanifest improvements (maskable icon, scope), service worker for
  offline static assets and navigation, install prompt button
- Mobile settings panel in the menu bar: haptics, keep-screen-on (Wake Lock),
  compact interface mode
- Workspace gestures with hammerjs: pinch-to-zoom, two-finger pan,
  double-tap reset zoom (ignores blocks to avoid accidental drags)
- Readable default block zoom on phones
- Green flag requests a screen wake lock while a project runs
@professionalarduino-max
fix: review fixes for touch gestures, wake lock and service worker
7422ad6 
- workspace gestures: touch-action none so the browser never steals the
  pinch gesture for native page zoom
- wake lock: respect the keep-awake setting, release the previous sentinel
  before requesting a new one, release when the setting is turned off
- green flag: guard against a missing onClick prop
- service worker: cacheable path matching also works in sub-path deploys

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@professionalarduino-max