Close Modal & Sidepage by swipe (#118)

* Close Modal & Sidepage by swipe * Remove hovers from touchscreens
ekaterinburgdev · Aug 26, 2024 · 8582d10 · 8582d10
1 parent 07d006a
commit 8582d10
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 46 deletions.
diff --git a/client/components/MainPage/Card/Card.module.css b/client/components/MainPage/Card/Card.module.css
@@ -24,10 +24,7 @@
     text-decoration: none;
     transition: .15s ease background-color, .15s ease background-image, .15s ease filter;
     overflow: hidden;
-}
-
-.Card:hover {
-    background-image: var(--CardBgImageHover, var(--CardBgImage));
+    position: relative;
 }
 
 /* Preload hover images */
@@ -36,10 +33,8 @@
     background-image: var(--CardBgImageHover);
 }
 
-@media (hover: hover) {
-    .Card:active {
-        filter: brightness(0.95);
-    }
+.Card:active {
+    filter: brightness(0.95);
 }
 
 .Card_Size-small {
@@ -63,11 +58,6 @@
     text-decoration-color: rgba(4, 72, 21, .15);
 }
 
-.Card_Public:hover {
-    background-color: var(--cards-public-bg-hover);
-    color: white;
-}
-
 .Card_Pedestrian {
     background-color: var(--cards-pedestrian-bg);
     color: var(--cards-pedestrian-text);
@@ -77,11 +67,6 @@
     text-decoration-color: rgba(76, 63, 0, .15);
 }
 
-.Card_Pedestrian:hover {
-    background-color: var(--cards-pedestrian-bg-hover);
-    color: white;
-}
-
 .Card_Car {
     background-color: var(--cards-car-bg);
     color: var(--cards-car-text);
@@ -91,11 +76,6 @@
     text-decoration-color: rgba(92, 17, 10, .15);
 }
 
-.Card_Car:hover {
-    background-color: var(--cards-car-bg-hover);
-    color: white;
-}
-
 .Card_Other {
     background-color: var(--cards-other-bg);
     color: var(--cards-other-text);
@@ -105,11 +85,6 @@
     text-decoration-color: rgba(12, 27, 39, .15);
 }
 
-.Card_Other:hover {
-    background-color: var(--cards-other-bg-hover);
-    color: white;
-}
-
 .CardTitle {
     --smooth-corners: 0.8;
     border-radius: 8px;
@@ -151,19 +126,45 @@
     font-weight: 500;
 }
 
-.Card:hover .CardTitle {
-    text-decoration-color: rgba(255, 255, 255, 0.6);
-}
-
 .CardHeaderCaption {
     margin-top: 15px;
     font-size: 13px;
     line-height: 1.35;
 }
 
 .CardExternalLink {
-    margin-left: 16px;
     flex-shrink: 0;
+    margin-left: 16px;
+}
+
+@media (hover: hover) {
+    .Card:hover {
+        background-image: var(--CardBgImageHover, var(--CardBgImage));
+    }
+
+    .Card_Public:hover {
+        background-color: var(--cards-public-bg-hover);
+        color: white;
+    }
+
+    .Card_Pedestrian:hover {
+        background-color: var(--cards-pedestrian-bg-hover);
+        color: white;
+    }
+
+    .Card_Car:hover {
+        background-color: var(--cards-car-bg-hover);
+        color: white;
+    }
+
+    .Card_Other:hover {
+        background-color: var(--cards-other-bg-hover);
+        color: white;
+    }
+
+    .Card:hover .CardTitle {
+        text-decoration-color: rgba(255, 255, 255, 0.6);
+    }
 }
 
 @media screen and (min-width: 375px) {

diff --git a/client/components/UI/Modal/Modal.module.css b/client/components/UI/Modal/Modal.module.css
@@ -14,8 +14,9 @@ html:has(.Modal) {
     padding: 0;
     border: 0;
     background: transparent;
-    transition: .15s ease-out;
+    transition: height .15s ease-out, opacity .15s ease-out;
     animation: .15s ease fadeIn;
+    touch-action: none;
 }
 
 .Modal:not([open]) {
@@ -35,11 +36,17 @@ html:has(.Modal) {
     height: 50%;
 }
 
-.Modal_Position-hidden {
+.Modal_Position-tinyOpen {
     overflow: hidden;
     height: 15%;
 }
 
+.Modal_Position-hidden {
+    transition: .1s ease;
+    height: 0;
+    opacity: 0;
+}
+
 .ModalTitle {
     margin: 0;
     padding: 32px 56px 0 24px;

diff --git a/client/components/UI/Modal/Modal.tsx b/client/components/UI/Modal/Modal.tsx
@@ -26,13 +26,14 @@ export function Modal({
 
     const [currentPosition, onDragEnd, onDrag] = useSwipeableCard(mobilePosition);
 
-    const close = () => {
-        ref.current.close();
+    const handleClose = () => {
+        setTimeout(() => ref.current?.close());
+        setTimeout(() => onClose());
     };
 
     const handleClickOutside = (e) => {
         if (e.target === ref.current) {
-            close();
+            handleClose();
         }
     };
 
@@ -44,6 +45,12 @@ export function Modal({
         (document.activeElement as HTMLElement).blur();
     }, []);
 
+    useEffect(() => {
+        if (currentPosition === CardPosition.Hidden) {
+            setTimeout(() => handleClose(), 100);
+        }
+    }, [currentPosition]);
+
     return (
         <dialog
             className={cn(styles.Modal, {
@@ -52,7 +59,7 @@ export function Modal({
             })}
             style={{ maxWidth }}
             onClick={handleClickOutside}
-            onClose={onClose}
+            onClose={handleClose}
             ref={ref}
         >
             <div className={cn(styles.ModalInner)} ref={refInner}>
@@ -65,7 +72,7 @@ export function Modal({
                 <div className={cn(styles.ModalContent)}>{children}</div>
             </div>
 
-            <button className={cn(styles.ModalClose)} onClick={() => close()} aria-label="Закрыть">
+            <button className={cn(styles.ModalClose)} onClick={handleClose} aria-label="Закрыть">
                 <Close />
             </button>
         </dialog>

diff --git a/client/components/UI/Sidepage/Sidepage.module.css b/client/components/UI/Sidepage/Sidepage.module.css
@@ -104,7 +104,7 @@
         left: 8px !important;
         bottom: 0;
         top: initial !important;
-        transition: height 150ms ease-out;
+        transition: height .15s ease-out, opacity .15s ease-out;
         will-change: height;
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
@@ -131,11 +131,16 @@
         height: 50%;
     }
 
-    .Sidepage_hidden {
+    .Sidepage_tinyOpen {
         overflow: hidden;
         height: 15%;
     }
 
+    .Sidepage_hidden {
+        height: 0;
+        opacity: 0;
+    }
+
     .SidepageDragArea {
         display: block;
     }

diff --git a/client/components/UI/Sidepage/Sidepage.tsx b/client/components/UI/Sidepage/Sidepage.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import classNames from 'classnames/bind';
 
 import { sidebarService } from 'services/sidebar/sidebar';
@@ -18,6 +18,14 @@ export function Sidepage({ children }: React.PropsWithChildren) {
 
     const [currentPosition, onDragEnd, onDrag] = useSwipeableCard(CardPosition.HalfOpen);
 
+    useEffect(() => {
+        if (currentPosition === CardPosition.Hidden) {
+            setTimeout(() => {
+                sidebarService.close();
+            }, 100)
+        }
+    }, [currentPosition]);
+
     return (
         <div
             ref={ref}

diff --git a/client/hooks/useSwipeableCard.ts b/client/hooks/useSwipeableCard.ts
@@ -3,12 +3,14 @@ import React, { useState } from 'react';
 export enum CardPosition {
     FullOpen = 'fullOpen',
     HalfOpen = 'halfOpen',
+    TinyOpen = 'tinyOpen',
     Hidden = 'hidden',
 }
 
 export const CARD_POSITIONS = [
     CardPosition.FullOpen,
     CardPosition.HalfOpen,
+    CardPosition.TinyOpen,
     CardPosition.Hidden,
 ];
 export const CHANGE_POSITION_DELTA = 60;
@@ -42,16 +44,13 @@ export function useSwipeableCard(
     }
 
     function onDragEnd(event: React.TouchEvent) {
-        event.preventDefault();
         event.stopPropagation();
 
         isDragFinished = false;
         dragStartPosition = null;
     }
 
     function onDrag(event: React.TouchEvent) {
-        event.preventDefault();
-
         if (isDragFinished) {
             return;
         }