mirrors/movie-web
1
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2025-01-06 07:55:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(popouts): fix touch on scroll areas being weird

Browse source
This commit is contained in:
Jip Fr 2023-04-14 20:03:11 +02:00
parent 0794558338
commit 5dfeeadbb8
2 changed files with 25 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/popout/positions/FloatingCardMobilePosition.tsx
View file

@ -21,8 +21,21 @@ export function FloatingCardMobilePosition(props: MobilePositionProps) {
})); }));
const bind = useDrag( const bind = useDrag(
({ last, velocity: [, vy], direction: [, dy], movement: [, my] }) => { ({
last,
velocity: [, vy],
direction: [, dy],
movement: [, my],
...event
}) => {
if (closing.current) return; if (closing.current) return;
const isInScrollable = (event.target as HTMLDivElement).closest(
".overflow-y-auto"
);
// console.log(my);
if (isInScrollable) return; // Don't attempt to swipe the thing away if it's a scroll area unless the scroll area is at the top and the user is swiping down
const height = cardRect?.height ?? 0; const height = cardRect?.height ?? 0;
if (last) { if (last) {
// if past half height downwards // if past half height downwards
@ -69,7 +82,7 @@ export function FloatingCardMobilePosition(props: MobilePositionProps) {
return ( return (
<div <div
className="absolute inset-x-0 mx-auto max-w-[400px] origin-bottom-left touch-none" className="is-mobile-view absolute inset-x-0 mx-auto max-w-[400px] origin-bottom-left touch-none"
style={{ style={{
transform: `translateY(${ transform: `translateY(${
window.innerHeight - (cardRect?.height ?? 0) + 200 window.innerHeight - (cardRect?.height ?? 0) + 200

13
src/setup/index.css
View file

@ -38,6 +38,7 @@ body[data-no-select] {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
} }
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
@ -55,6 +56,11 @@ body[data-no-select] {
@apply brightness-[500]; @apply brightness-[500];
} }
/* Disable scrolling on mobile view */
.is-mobile-view .overflow-y-auto {
height: 60vh;
}
/*generated with Input range slider CSS style generator (version 20211225) /*generated with Input range slider CSS style generator (version 20211225)
https://toughengineer.github.io/demo/slider-styler*/ https://toughengineer.github.io/demo/slider-styler*/
:root { :root {
@ -62,6 +68,7 @@ https://toughengineer.github.io/demo/slider-styler*/
--slider-border-radius: 1em; --slider-border-radius: 1em;
--slider-progress-background: #8652bb; --slider-progress-background: #8652bb;
} }
input[type=range].styled-slider { input[type=range].styled-slider {
height: var(--slider-height); height: var(--slider-height);
-webkit-appearance: none; -webkit-appearance: none;
@ -101,7 +108,7 @@ input[type=range].styled-slider::-webkit-slider-thumb:hover {
} }
input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track { input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track {
background: linear-gradient(var(--slider-progress-background),var(--slider-progress-background)) 0/var(--sx) 100% no-repeat, #1C161B; background: linear-gradient(var(--slider-progress-background), var(--slider-progress-background)) 0/var(--sx) 100% no-repeat, #1C161B;
} }
/*mozilla*/ /*mozilla*/
@ -127,7 +134,7 @@ input[type=range].styled-slider::-moz-range-thumb:hover {
} }
input[type=range].styled-slider.slider-progress::-moz-range-track { input[type=range].styled-slider.slider-progress::-moz-range-track {
background: linear-gradient(var(--slider-progress-background),var(--slider-progress-background)) 0/var(--sx) 100% no-repeat, #1C161B; background: linear-gradient(var(--slider-progress-background), var(--slider-progress-background)) 0/var(--sx) 100% no-repeat, #1C161B;
} }
/*ms*/ /*ms*/
@ -172,4 +179,4 @@ input[type=range].styled-slider.slider-progress::-ms-fill-lower {
background: var(--slider-progress-background); background: var(--slider-progress-background);
border: none; border: none;
border-right-width: 0; border-right-width: 0;
} }