ux(fab): float above the on-screen keyboard
Two-pronged fix so the Translate + Scan FABs stay reachable when
the mobile soft keyboard is open:
- Add `interactive-widget=resizes-content` to the viewport meta —
Chrome on Android then shrinks the layout viewport when the
keyboard opens, so `position: fixed; bottom: ...` is naturally
above it. iOS Safari ignores this directive, hence:
- VisualViewport listener computes
inset = innerHeight - vv.height - vv.offsetTop
and writes it to a `--kb-inset` CSS custom property. The FAB
bottom calc uses `max(var(--kb-inset), safe-area-inset-bottom)`
so the keyboard inset wins when it's open and the home-indicator
inset wins when it isn't.
Net: tap the editor on iOS → keyboard slides up → Translate /
Scan FABs rise with it, no manual minimise required.
This commit is contained in:
@@ -17,6 +17,7 @@ Versioning: [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||
### Changed
|
||||
- "Scan image" button replaced with a floating action button at the bottom-right of the viewport, using a Material Symbols Outlined camera glyph (`photo_camera`) for consistent rendering across platforms (was a small text button in the input pane header).
|
||||
- "Translate" inline button replaced with a primary FAB using the `translate` Material Symbols icon, stacked directly under the camera FAB at the bottom-right corner (closest to the thumb on phones). The camera FAB is now the *secondary* in the stack, just above. Both 56 × 56 px, same accent fill. The translate FAB gains a pulsing-ring `busy` animation during a running translation; `goBtn.textContent` swap is gone (was meaningless for an icon-only button). `body` got `~9 rem` of bottom padding so content scrolls clear of the stack.
|
||||
- FAB stack rides above the on-screen keyboard on mobile. Added `interactive-widget=resizes-content` to the viewport meta (handles Chrome on Android) and a `VisualViewport` listener that exposes the keyboard's intrusion as a `--kb-inset` CSS custom property (handles iOS Safari). The FAB `bottom` uses `max(--kb-inset, env(safe-area-inset-bottom))` so the keyboard inset wins when it's open and the home-indicator inset wins when it isn't.
|
||||
- Crop modal:
|
||||
- No default crop box. User drags on the image to draw the region; falls back to full image if they confirm without drawing.
|
||||
- Buttons are now Material Symbols icons: `rotate_left`, `rotate_right`, `invert_colors` (new — see below), `check`. Cancel kept as text. The `check` (Use this) button is larger and more prominent. The Reset button was removed (rarely useful with no default box).
|
||||
|
||||
Reference in New Issue
Block a user