diff --git a/android/capawesome.json b/android/capawesome.json index 530bc57b..874d4fcc 100644 --- a/android/capawesome.json +++ b/android/capawesome.json @@ -1,3 +1,3 @@ { - "version": 18 + "version": 19 } \ No newline at end of file diff --git a/web/components/nav/bottom-nav-bar.tsx b/web/components/nav/bottom-nav-bar.tsx index 9a1d3b94..dd48bfd6 100644 --- a/web/components/nav/bottom-nav-bar.tsx +++ b/web/components/nav/bottom-nav-bar.tsx @@ -225,12 +225,14 @@ export function MobileSidebar(props: { // console.log("checking opening") // Open gesture: swipe right starting from the very left edge if (deltaX > HORIZONTAL_THRESHOLD) { + e.preventDefault() gestureHandled.current = true setSidebarOpen(true) } } else { // Close gesture: swipe left anywhere if (deltaX < -HORIZONTAL_THRESHOLD) { + e.preventDefault() gestureHandled.current = true setSidebarOpen(false) } @@ -244,14 +246,16 @@ export function MobileSidebar(props: { gestureHandled.current = false } - window.addEventListener('pointerdown', onPointerDown, {passive: true}) - window.addEventListener('pointermove', onPointerMove, {passive: true}) - window.addEventListener('pointerup', onPointerUp, {passive: true}) + const target = document.body + target.addEventListener('pointerdown', onPointerDown, { passive: false }) + target.addEventListener('pointermove', onPointerMove, { passive: false }) + target.addEventListener('pointerup', onPointerUp, { passive: false }) + return () => { - window.removeEventListener('pointerdown', onPointerDown) - window.removeEventListener('pointermove', onPointerMove) - window.removeEventListener('pointerup', onPointerUp) + target.removeEventListener('pointerdown', onPointerDown) + target.removeEventListener('pointermove', onPointerMove) + target.removeEventListener('pointerup', onPointerUp) } }, [isMobile, sidebarOpen]) diff --git a/web/styles/globals.css b/web/styles/globals.css index e4d0f397..b5b48be5 100644 --- a/web/styles/globals.css +++ b/web/styles/globals.css @@ -8,6 +8,7 @@ --bnh: env(safe-area-inset-bottom); /* native bottom nav height */ --tnh: env(safe-area-inset-top); /* native top nav height */ --hloss: calc(var(--bnh) + var(--tnh)); /* mobile height loss due to native top and bottom bars */ + touch-action: pan-y; } .safe-top { @@ -64,6 +65,7 @@ @layer base { body { font-family: var(--font-main), serif; + touch-action: pan-y; } button, input, label { @@ -75,6 +77,7 @@ } :root { + touch-action: pan-y; /* Text / Ink Grey Scale */ /* High Contrast */ --color-ink-0: 255 255 255; /* white */ @@ -312,6 +315,7 @@ --color-red-900: 127 29 29; --color-red-950: 69 10 10; /* darkest red */ + touch-action: pan-y; } }