diff --git a/assets/css/app.css b/assets/css/app.css index ad4f353..de68ba4 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -468,14 +468,20 @@ body.page-dashboard .content { height: 11rem; margin-top: 0.95rem; touch-action: pan-y; - transform: translateX(var(--day-strip-offset, 0)); +} + +.dashboard-compare-strip.is-dragging { + cursor: grabbing; +} + +.dashboard-day__hero[data-day-slider] { + transform: translateX(var(--day-slider-offset, 0)); transition: transform 180ms ease; will-change: transform; } -.dashboard-compare-strip.is-dragging { +.dashboard-day__hero[data-day-slider].is-dragging { transition: none; - cursor: grabbing; } .compare-day { diff --git a/assets/js/app.js b/assets/js/app.js index 5a70a45..ba71070 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -1014,6 +1014,7 @@ const unitInput = document.querySelector("[data-event-unit]"); const swipeContainer = document.querySelector("[data-day-swipe]"); const dayStrip = document.querySelector("[data-day-strip]"); + const daySlider = document.querySelector("[data-day-slider]"); const periodRail = document.querySelector(".range-period-rail"); const walkMode = document.body.dataset.walkMode || "time"; @@ -1447,7 +1448,7 @@ typeSelect.addEventListener("change", syncUnit); } - if (swipeContainer && dayStrip) { + if (swipeContainer && dayStrip && daySlider) { let pointerStartX = 0; let pointerStartY = 0; let dragging = false; @@ -1456,7 +1457,8 @@ const resetStrip = () => { dayStrip.classList.remove("is-dragging"); - dayStrip.style.setProperty("--day-strip-offset", "0px"); + daySlider.classList.remove("is-dragging"); + daySlider.style.setProperty("--day-slider-offset", "0px"); }; const handleSwipe = (deltaX, deltaY) => { @@ -1467,11 +1469,11 @@ if (deltaX < 0 && swipeContainer.dataset.nextDate) { didSwipe = true; - dayStrip.style.setProperty("--day-strip-offset", "-120%"); + daySlider.style.setProperty("--day-slider-offset", "-120%"); window.location.href = dashboardDayPath(swipeContainer.dataset.nextDate); } else if (deltaX > 0 && swipeContainer.dataset.prevDate) { didSwipe = true; - dayStrip.style.setProperty("--day-strip-offset", "120%"); + daySlider.style.setProperty("--day-slider-offset", "120%"); window.location.href = dashboardDayPath(swipeContainer.dataset.prevDate); } else { resetStrip(); @@ -1490,6 +1492,7 @@ pointerStartX = event.clientX; pointerStartY = event.clientY; dayStrip.classList.add("is-dragging"); + daySlider.classList.add("is-dragging"); dayStrip.setPointerCapture?.(event.pointerId); }); @@ -1507,7 +1510,7 @@ return; } - dayStrip.style.setProperty("--day-strip-offset", `${Math.max(-120, Math.min(120, deltaX))}px`); + daySlider.style.setProperty("--day-slider-offset", `${Math.max(-120, Math.min(120, deltaX))}px`); }); dayStrip.addEventListener("pointerup", event => { diff --git a/templates/layout.php b/templates/layout.php index 23e2159..3e3ae52 100644 --- a/templates/layout.php +++ b/templates/layout.php @@ -36,6 +36,10 @@ $jsVersion = is_file(base_path('assets/js/app.js')) ? (string) filemtime(base_pa + + + + diff --git a/templates/pages/dashboard.php b/templates/pages/dashboard.php index a7cb2fa..3014fc1 100644 --- a/templates/pages/dashboard.php +++ b/templates/pages/dashboard.php @@ -55,7 +55,7 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string {
= e((string) $dayWeekday) ?>