+26

src/calendar/main.ts

reviewed

··· 914 914 }, { passive: false }); 915 915 916 916 // --------------------------------------------------------------------------- 917 917 + // Touch swipe navigation — month view swipe left/right to change months 918 918 + // --------------------------------------------------------------------------- 919 919 + 920 920 + let touchStartX = 0; 921 921 + let touchStartY = 0; 922 922 + 923 923 + calendarGrid.addEventListener('touchstart', (e) => { 924 924 + if (state.view !== 'month') return; 925 925 + touchStartX = e.touches[0]!.clientX; 926 926 + touchStartY = e.touches[0]!.clientY; 927 927 + }, { passive: true }); 928 928 + 929 929 + calendarGrid.addEventListener('touchend', (e) => { 930 930 + if (state.view !== 'month') return; 931 931 + const touch = e.changedTouches[0]!; 932 932 + const dx = touch.clientX - touchStartX; 933 933 + const dy = touch.clientY - touchStartY; 934 934 + 935 935 + // Only trigger if horizontal swipe is dominant and large enough 936 936 + if (Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy) * 1.5) { 937 937 + if (dx < 0) navigateNext(); 938 938 + else navigatePrev(); 939 939 + } 940 940 + }, { passive: true }); 941 941 + 942 942 + // --------------------------------------------------------------------------- 917 943 // iCal import 918 944 // --------------------------------------------------------------------------- 919 945

+9 -1

src/css/app.css

reviewed

··· 9320 9320 .calendar-app { 9321 9321 display: flex; 9322 9322 flex-direction: column; 9323 9323 - height: 100vh; 9323 9323 + height: 100dvh; 9324 9324 overflow: hidden; 9325 9325 + overscroll-behavior: none; /* prevent pull-to-refresh / rubber-band on mobile */ 9325 9326 } 9326 9327 9327 9328 .calendar-main { ··· 9457 9458 grid-auto-rows: 1fr; 9458 9459 flex: 1; 9459 9460 overflow: hidden; 9461 9461 + touch-action: pan-x; /* let horizontal swipes through, block vertical scroll */ 9460 9462 } 9461 9463 9462 9464 .cal-month-header { ··· 9676 9678 display: grid; 9677 9679 grid-template-columns: var(--cal-gutter-width) repeat(7, 1fr); 9678 9680 overflow-y: auto; 9681 9681 + overscroll-behavior: contain; /* prevent scroll chaining to body */ 9682 9682 + -webkit-overflow-scrolling: touch; 9679 9683 scrollbar-width: thin; 9680 9684 scrollbar-color: var(--color-border) transparent; 9681 9685 } ··· 9861 9865 display: grid; 9862 9866 grid-template-columns: var(--cal-gutter-width) 1fr; 9863 9867 overflow-y: auto; 9868 9868 + overscroll-behavior: contain; 9869 9869 + -webkit-overflow-scrolling: touch; 9864 9870 scrollbar-width: thin; 9865 9871 scrollbar-color: var(--color-border) transparent; 9866 9872 } ··· 9875 9881 .cal-agenda { 9876 9882 flex: 1; 9877 9883 overflow-y: auto; 9884 9884 + overscroll-behavior: contain; 9885 9885 + -webkit-overflow-scrolling: touch; 9878 9886 padding: var(--space-md) var(--space-lg); 9879 9887 scrollbar-width: thin; 9880 9888 scrollbar-color: var(--color-border) transparent;