diff --git a/client/src/components/graphs/CircularProgress/circular-progress.scss b/client/src/components/graphs/CircularProgress/circular-progress.scss index 272a16284b892907e8744676e30e5fc7d9ae2568..9919e0d64dacbc5c4c4bac17b312541c548da340 100644 --- a/client/src/components/graphs/CircularProgress/circular-progress.scss +++ b/client/src/components/graphs/CircularProgress/circular-progress.scss @@ -1,5 +1,6 @@ -@use 'styles/settings.scss'as s; -@use 'styles/functions.scss'as fn; + +@use 'styles/settings.scss' as s; +@use 'styles/functions.scss' as fn; .circular-progress { position: relative; @@ -60,4 +61,4 @@ display: flex; margin: 0 !important; } -} \ No newline at end of file +} diff --git a/client/src/components/navigation/Tabs/tabs.scss b/client/src/components/navigation/Tabs/tabs.scss index 644e1d641cefa3b9e06830846aebbca4e376e456..474899a150b15723f1a7d06a6b75c79dc66c85a5 100644 --- a/client/src/components/navigation/Tabs/tabs.scss +++ b/client/src/components/navigation/Tabs/tabs.scss @@ -1,4 +1,5 @@ -@use 'styles/settings.scss'as s; + +@use 'styles/settings.scss' as s; .tabs-container { display: flex; @@ -71,4 +72,4 @@ box-shadow: 0 0 5px rgba(s.$black, 0.05); transition: left 300ms ease; } -} \ No newline at end of file +} diff --git a/client/src/components/ui/Popup/index.tsx b/client/src/components/ui/Popup/index.tsx index ee009141ebfe3a288c6f84ceb0d7033b8c86dd20..d820a6b9215e68d21f51e8752ea893efe1566bc2 100644 --- a/client/src/components/ui/Popup/index.tsx +++ b/client/src/components/ui/Popup/index.tsx @@ -1,23 +1,17 @@ -import { ReactNode, useEffect } from 'react'; +import { ReactNode, useEffect, useRef } from 'react'; import { createPortal } from 'react-dom'; import './popup.scss'; -const body = document.getElementsByTagName('body')[0]; - interface Props { children: ReactNode onClose: Function } export default function Popup({ children, onClose }: Props) { - useEffect(() => { - body.style.overflow = 'hidden'; - return () => { - body.style.overflow = ''; - } - }, []); + const body = document.getElementsByTagName('body')[0]; + const root = useRef<HTMLDivElement>(null); useEffect(() => { const onKeyDown = (e: KeyboardEvent) => { @@ -31,8 +25,33 @@ export default function Popup({ children, onClose }: Props) { } }, [onClose]); + useEffect(() => { + const ignoreEvent = (e: Event) => { + e.preventDefault(); + return false; + }; + const elements = [ root.current, body ]; + const events = [ + 'scroll', 'wheel', 'mousewheel', 'DOMMouseScroll', + 'keydown', 'keypress', 'keyup', 'touchmove', + 'touchstart', 'touchend', 'focus', 'click' + ]; + for (const elem of elements) { + for (const event of events) { + elem?.addEventListener(event, ignoreEvent); + } + } + return () => { + for (const elem of elements) { + for (const event of events) { + elem?.removeEventListener(event, ignoreEvent); + } + } + } + }); + return createPortal( - <div className="popup-container"> + <div className="popup-container" ref={root}> <div className="popup"> {children} </div> diff --git a/client/src/components/ui/Popup/popup.scss b/client/src/components/ui/Popup/popup.scss index 6222ba9138e06775d73e876d41ccc727fd127ddb..ec41fcd62b1a65f26ed64540589509a4e37bfa67 100644 --- a/client/src/components/ui/Popup/popup.scss +++ b/client/src/components/ui/Popup/popup.scss @@ -12,10 +12,10 @@ justify-content: center; z-index: 2000; align-items: center; + & ~ div { overflow: hidden; } - .popup { will-change: transform; diff --git a/client/src/components/ui/Task/task.scss b/client/src/components/ui/Task/task.scss index eabdf8dfe05e22073341cdd12770019e9a6a37b5..9b690a7af094c261d5cbd8a1d21e004d396f1d7f 100644 --- a/client/src/components/ui/Task/task.scss +++ b/client/src/components/ui/Task/task.scss @@ -1,5 +1,6 @@ -@use 'styles/settings.scss'as s; -@use 'styles/mixins.scss'as mx; + +@use 'styles/settings.scss' as s; +@use 'styles/mixins.scss' as mx; .task { padding: 30px; @@ -78,4 +79,4 @@ right: -15px; bottom: -20px; } -} \ No newline at end of file +}