feat(reader): touch & mobile — tap zones, gesture engine, mobile sheets
Phase 2 of the reader redesign: - Fixed-layout touch engine (foliate-js e9e61d8): pinch-zoom around the midpoint, two-finger pan, single-finger pan while zoomed, horizontal swipe page-turn at fit (RTL-aware via next()/prev()), and double-tap to zoom 2.5x / reset. Touch events forwarded from page iframes with converted coordinates; preventDefault only when the engine consumes the gesture, so PDF text selection and native taps stay intact. touch-action: none on the host and in comic/pdf page documents keeps the browser from fighting the engine. - Tap zones (Kindle-style) for touch devices: tap the outer margins to page, center to toggle chrome. Size configurable (10-50%) via the revived tap_zone_size setting; toggle via new tap_zones_enabled (Behavior section of the settings drawer). Pointer-based + passive so drags/swipes/selection never trigger; attached both to the viewport and inside every page document (iframe events don't bubble); debounced 280ms so double-tap zoom doesn't also page; no zone actions while a fixed-layout page is zoomed. - Drawers become full-width sheets on screens <= 640px.
This commit is contained in:
@@ -859,6 +859,13 @@
|
||||
right: 0;
|
||||
border-left: 1px solid var(--border);
|
||||
}
|
||||
/* Mobile: drawers become full-width sheets */
|
||||
@media (max-width: 640px) {
|
||||
.reader-drawer {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
.reader-drawer-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user