Fix dragging issues

This commit is contained in:
Philip Peterson 2026-06-03 02:31:16 -07:00
parent 84d47728f9
commit e9bce5aac8
3 changed files with 5 additions and 6 deletions

View file

@ -8,7 +8,7 @@
@media (min-width: 640px) { @media (min-width: 640px) {
.riverside-booking-wrap { .riverside-booking-wrap {
flex-direction: row; flex-direction: row;
gap: 3rem; gap: 2rem;
} }
} }

View file

@ -81,9 +81,7 @@ function Testimonials() {
var onPointerMove = function (e) { var onPointerMove = function (e) {
if (!drag.current) return; if (!drag.current) return;
var delta = e.clientX - drag.current.x; setLeft(drag.current.left + (e.clientX - drag.current.x));
var max = measureMax();
setLeft(Math.min(0, Math.max(-max, drag.current.left + delta)));
}; };
var onPointerUp = function (e) { var onPointerUp = function (e) {
@ -132,7 +130,8 @@ function Testimonials() {
onPointerDown=${onPointerDown} onPointerDown=${onPointerDown}
onPointerMove=${onPointerMove} onPointerMove=${onPointerMove}
onPointerUp=${onPointerUp} onPointerUp=${onPointerUp}
style=${{ position: "relative", top: 0, left: left + "px", transition: "left 0.5s ease", display: "flex", gap: GAP + "px", paddingBottom: "2px", width: TOTAL_W + "px" }} onPointerCancel=${onPointerUp}
style=${{ position: "relative", top: 0, left: left + "px", transition: "left 0.5s ease", display: "flex", gap: GAP + "px", paddingBottom: "2px", width: TOTAL_W + "px", touchAction: "pan-y" }}
> >
${TESTIMONIALS.map(function (t, i) { return html` ${TESTIMONIALS.map(function (t, i) { return html`
<div key=${i} style=${{ width: CARD_W + "px", flexShrink: 0 }} class="border border-gray-200 rounded-lg p-6 flex flex-col gap-5 bg-white"> <div key=${i} style=${{ width: CARD_W + "px", flexShrink: 0 }} class="border border-gray-200 rounded-lg p-6 flex flex-col gap-5 bg-white">

View file

@ -116,7 +116,7 @@
</section> </section>
<section class="py-24 px-6 bg-white"> <section class="py-24 px-6 bg-white">
<div class="max-w-[900px] mx-auto"> <div class="max-w-[700px] mx-auto">
<h2 class="text-[clamp(2.5rem,5vw,4rem)] font-serif font-light text-gray-800 mb-10 text-center">Book An Appointment</h2> <h2 class="text-[clamp(2.5rem,5vw,4rem)] font-serif font-light text-gray-800 mb-10 text-center">Book An Appointment</h2>
<rpt-appt-type class="block mb-10"></rpt-appt-type> <rpt-appt-type class="block mb-10"></rpt-appt-type>
<div class="riverside-booking-wrap"> <div class="riverside-booking-wrap">