mirrors/smov
mirrors/smov
1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-29 16:07:40 +01:00
Code Issues 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(
({ last, velocity: [, vy], direction: [, dy], movement: [, my] }) => {
({
last,
velocity: [, vy],
direction: [, dy],
movement: [, my],
...event
}) => {
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;
if (last) {
// if past half height downwards
@ -69,7 +82,7 @@ export function FloatingCardMobilePosition(props: MobilePositionProps) {
return (
<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={{
transform: `translateY(${
window.innerHeight - (cardRect?.height ?? 0) + 200

13
src/setup/index.css
View file

@ -38,6 +38,7 @@ body[data-no-select] {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
@ -55,6 +56,11 @@ body[data-no-select] {
@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)
https://toughengineer.github.io/demo/slider-styler*/
:root {
@ -62,6 +68,7 @@ https://toughengineer.github.io/demo/slider-styler*/
--slider-border-radius: 1em;
--slider-progress-background: #8652bb;
}
input[type=range].styled-slider {
height: var(--slider-height);
-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 {
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*/
@ -127,7 +134,7 @@ input[type=range].styled-slider::-moz-range-thumb:hover {
}
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*/
@ -172,4 +179,4 @@ input[type=range].styled-slider.slider-progress::-ms-fill-lower {
background: var(--slider-progress-background);
border: none;
border-right-width: 0;
}
}