Fix dragging issues
This commit is contained in:
parent
84d47728f9
commit
e9bce5aac8
3 changed files with 5 additions and 6 deletions
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue