From 8cdb36bb49f366e20ff4cb5d310bb4493a8da986 Mon Sep 17 00:00:00 2001 From: Ihor Smyk Date: Thu, 29 Jun 2023 17:49:09 +0300 Subject: [PATCH 1/5] bugfix --- src/components/MainBoard/MainBoard.styled.jsx | 2 +- src/components/TaskCard/TaskCard.module.scss | 1 + src/components/TaskColumn/TaskColumn.module.scss | 14 ++++++++++---- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/components/MainBoard/MainBoard.styled.jsx b/src/components/MainBoard/MainBoard.styled.jsx index de9b0f1..a1cdcf5 100644 --- a/src/components/MainBoard/MainBoard.styled.jsx +++ b/src/components/MainBoard/MainBoard.styled.jsx @@ -7,7 +7,7 @@ export const Wrapper = styled.div` background-size: cover; background-position: center center; background-color: ${props => props.colorbg}; - height: calc(100vh - 61px); + height: calc(100vh - 60px); @media screen and (min-width: 375px) { background-image: url(${props => props.imgurl.mobileUrl_1x}); diff --git a/src/components/TaskCard/TaskCard.module.scss b/src/components/TaskCard/TaskCard.module.scss index 3549b6e..3268ef3 100644 --- a/src/components/TaskCard/TaskCard.module.scss +++ b/src/components/TaskCard/TaskCard.module.scss @@ -1,6 +1,7 @@ @import '../../assets/styles/vars'; .cardWrapper { + scroll-snap-align: start; position: relative; padding: 14px 21px; width: 335px; diff --git a/src/components/TaskColumn/TaskColumn.module.scss b/src/components/TaskColumn/TaskColumn.module.scss index ded93c0..c3a73b5 100644 --- a/src/components/TaskColumn/TaskColumn.module.scss +++ b/src/components/TaskColumn/TaskColumn.module.scss @@ -2,8 +2,10 @@ @import '../../assets/styles/mixins'; .taskCardListLight { - margin-bottom: 14px; + margin-bottom: 10px; overflow-y: auto; + overflow-x: hidden; + scroll-snap-type: y mandatory; max-height: calc(100vh - 280px); &::-webkit-scrollbar { @@ -24,7 +26,7 @@ } @include tablet { - max-height: calc(100vh - 290px); + max-height: calc(100vh - 303px); } @include desktop { @@ -34,6 +36,8 @@ .taskCardListDark { margin-bottom: 10px; overflow-y: auto; + overflow-x: hidden; + scroll-snap-type: y mandatory; max-height: calc(100vh - 280px); &::-webkit-scrollbar { @@ -54,7 +58,7 @@ } @include tablet { - max-height: calc(100vh - 290px); + max-height: calc(100vh - 303px); } @include desktop { @@ -64,6 +68,8 @@ .taskCardListColorful { margin-bottom: 10px; overflow-y: auto; + overflow-x: hidden; + scroll-snap-type: y mandatory; max-height: calc(100vh - 280px); &::-webkit-scrollbar { @@ -84,7 +90,7 @@ } @include tablet { - max-height: calc(100vh - 290px); + max-height: calc(100vh - 303px); } @include desktop { From f2f71ff120efe25a26b1c515eaf3a37a5d40ab5f Mon Sep 17 00:00:00 2001 From: Ihor Smyk Date: Thu, 29 Jun 2023 20:37:04 +0300 Subject: [PATCH 2/5] fix --- src/components/Loader/Loader.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Loader/Loader.module.scss b/src/components/Loader/Loader.module.scss index 03e9f46..0149099 100644 --- a/src/components/Loader/Loader.module.scss +++ b/src/components/Loader/Loader.module.scss @@ -7,6 +7,7 @@ position: absolute; left: 50%; top: 50%; + z-index: 2023; .tri { position: absolute; From f2f00a8fe9f7eaa7f178001438abd6c1fbd7aeb0 Mon Sep 17 00:00:00 2001 From: Ihor Smyk Date: Thu, 29 Jun 2023 20:49:11 +0300 Subject: [PATCH 3/5] fix --- src/components/MainBoard/MainBoard.styled.jsx | 139 ------------------ 1 file changed, 139 deletions(-) diff --git a/src/components/MainBoard/MainBoard.styled.jsx b/src/components/MainBoard/MainBoard.styled.jsx index 226b64c..f074364 100644 --- a/src/components/MainBoard/MainBoard.styled.jsx +++ b/src/components/MainBoard/MainBoard.styled.jsx @@ -1,142 +1,3 @@ -// import styled from 'styled-components'; - -// export const Wrapper = styled.div(props => { -// const expandedStyles = ` -// padding-left: 20px; -// padding-right: 20px; -// height: calc(100vh - 61px); -// height: calc(100vh - 61px); -// background-color: ${props.colorbg}; -// `; -// const notExpandedStyles = ` -// background-repeat: no-repeat; -// background-size: cover; -// background-position: center; -// height: calc(100vh - 61px); - -// @media screen and (min-width: 375px) { -// padding-left: 0px; -// background-image: url(${props.imgurl?.mobileUrl_1x}); -// } - -// @media screen and (min-width: 375px) and (-webkit-min-device-pixel-ratio: 2), -// (min-resolution: 192dpi) { -// background-image: url(${props.imgurl?.mobileUrl_2x}); -// } - -// @media screen and (min-width: 768px) { -// padding-left: 32px; -// padding-right: 32px; -// height: calc(100vh - 68px); -// background-image: url(${props.imgurl?.tabletUrl_1x}); -// } - -// @media screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2), -// (min-resolution: 192dpi) { -// background-image: url(${props.imgurl?.tabletUrl_2x}); -// } - -// @media screen and (min-width: 1280px) { -// width: calc(100vw - 260px); -// height: calc(100% - 76px); -// padding-left: 24px; -// padding-right: 24px; -// background-image: url(${props.imgurl?.desktopUrl_1x}); -// } - -// @media screen and (min-width: 1280px) and (-webkit-min-device-pixel-ratio: 2), -// (min-resolution: 192dpi) { -// background-image: url(${props.imgurl?.desktopUrl_2x}); -// } -// `; - -// if (props.isExpanded) { -// return notExpandedStyles; -// } else { -// return expandedStyles; -// } -// }); - -// export const Wrappers = styled.div` -// padding-left: 20px; -// padding-right: 20px; -// <<<<<<< HEAD -// background-repeat: no-repeat; -// background-size: cover; -// background-position: center center; -// background-color: ${props => props.colorbg}; -// height: calc(100vh - 60px); -// ======= -// height: calc(100vh - 61px); -// >>>>>>> main - -// background-color: ${props => props.colorbg}; - -// background-repeat: no-repeat; -// background-size: cover; -// background-position: center; - -// ${props => props.imgurl !== null && `background-image: url(${props.imgurl});`} - -// @media screen and (min-width: 375px) { -// padding-left: 0px; -// ${props => -// props.imgurl !== null && -// `background-image: url(${props.imgurl.mobileUrl_1x});`} -// } - -// @media screen and (min-width: 375px) and (-webkit-min-device-pixel-ratio: 2), -// (min-resolution: 192dpi) { -// ${props => -// props.imgurl !== null && -// `background-image: url(${props.imgurl.mobileUrl_2x});`} -// } - -// @media screen and (min-width: 768px) { -// padding-left: 32px; -// padding-right: 32px; -// height: calc(100vh - 68px); -// ${props => -// props.imgurl !== null && -// `background-image: url(${props.imgurl.tabletUrl_1x});`} -// } - -// @media screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2), -// (min-resolution: 192dpi) { -// ${props => -// props.imgurl !== null && -// `background-image: url(${props.imgurl.tabletUrl_2x});`} -// } - -// @media screen and (min-width: 1280px) { -// width: calc(100vw - 260px); -// height: calc(100vh - 76px); -// padding-left: 24px; -// padding-right: 24px; -// ${props => -// props.imgurl !== null && -// `background-image: url(${props.imgurl.desktopUrl_1x});`} -// height: calc(100vh - 68px); -// } - -// @media screen and (min-width: 1280px) and (-webkit-min-device-pixel-ratio: 2), -// (min-resolution: 192dpi) { -// ${props => -// props.imgurl !== null && -// `background-image: url(${props.imgurl.desktopUrl_2x});`} -// } -// `; - -// export const ColumnsList = styled.ul` -// display: flex; -// `; -// export const ContentBoard = styled.div` -// display: flex; -// wrap: nowrap; -// overflow: auto; -// `; - - import styled from 'styled-components'; export const Wrapper = styled.div(props => { From 7f656da4831b5f80fd4fcf0df5263b7ff7e94d09 Mon Sep 17 00:00:00 2001 From: Ihor Smyk Date: Thu, 29 Jun 2023 21:30:20 +0300 Subject: [PATCH 4/5] fix --- src/components/BoardItem/BoardItem.module.scss | 1 + src/components/BoardList/BoardList.module.scss | 8 ++++++-- .../BoxRadioBackgroundGroup.jsx | 4 ++-- .../HeaderDashBoard/HeaderDashBoard.jsx | 16 ++++++++-------- src/components/MainBoard/MainBoard.styled.jsx | 4 +--- 5 files changed, 18 insertions(+), 15 deletions(-) diff --git a/src/components/BoardItem/BoardItem.module.scss b/src/components/BoardItem/BoardItem.module.scss index 4ae51d1..3a53a3a 100644 --- a/src/components/BoardItem/BoardItem.module.scss +++ b/src/components/BoardItem/BoardItem.module.scss @@ -7,6 +7,7 @@ cursor: pointer; display: flex; align-items: center; + scroll-snap-align: start; &:hover .iconProject { transform: rotate(1turn); diff --git a/src/components/BoardList/BoardList.module.scss b/src/components/BoardList/BoardList.module.scss index d3dacf0..f48900d 100644 --- a/src/components/BoardList/BoardList.module.scss +++ b/src/components/BoardList/BoardList.module.scss @@ -8,10 +8,10 @@ width: 100%; margin-top: 40px; margin-bottom: 40px; - overflow-x: auto; - scrollbar-width: thin; + overflow-y: auto; display: flex; flex-direction: column; + scroll-snap-type: y mandatory; @include tablet { max-height: calc(100vh - 655px); @@ -19,4 +19,8 @@ @include desktop { max-height: calc(100vh - 654px); } + + &::-webkit-scrollbar{ + width: 0; + } } diff --git a/src/components/BoxRadioBackgroundGroup/BoxRadioBackgroundGroup.jsx b/src/components/BoxRadioBackgroundGroup/BoxRadioBackgroundGroup.jsx index 048aa9f..4c4f81c 100644 --- a/src/components/BoxRadioBackgroundGroup/BoxRadioBackgroundGroup.jsx +++ b/src/components/BoxRadioBackgroundGroup/BoxRadioBackgroundGroup.jsx @@ -30,7 +30,7 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => { useEffect(() => { dispatch(getListOfThumbnails()); }, [dispatch]); - + return (

Background

@@ -38,7 +38,7 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => { {/* Default Background */}
{ }, [color]); useEffect(() => { - const updateBoardAndFetch = async () => { - if (showModalWindow && icon) { - await dispatch(updateBoard({ back: icon, board })); - dispatch(getBoardById(board._id)); - } - }; + const updateBoardAndFetch = async () => { + if (showModalWindow && icon) { + await dispatch(updateBoard({ back: icon, board })); + dispatch(getBoardById(board._id)); + } + }; - updateBoardAndFetch(); -}, [icon, showModalWindow]); + updateBoardAndFetch(); + }, [icon, showModalWindow]); return ( <> diff --git a/src/components/MainBoard/MainBoard.styled.jsx b/src/components/MainBoard/MainBoard.styled.jsx index f074364..fe81d37 100644 --- a/src/components/MainBoard/MainBoard.styled.jsx +++ b/src/components/MainBoard/MainBoard.styled.jsx @@ -5,7 +5,6 @@ export const Wrapper = styled.div(props => { padding-left: 20px; padding-right: 20px; height: calc(100vh - 61px); - height: calc(100vh - 61px); background-color: ${props.colorbg}; `; const notExpandedStyles = ` @@ -38,7 +37,7 @@ export const Wrapper = styled.div(props => { @media screen and (min-width: 1280px) { width: calc(100vw - 260px); - height: calc(100% - 76px); + height: calc(100% - 68px); padding-left: 24px; padding-right: 24px; background-image: url(${props.imgurl?.desktopUrl_1x}); @@ -102,7 +101,6 @@ export const Wrappers = styled.div` @media screen and (min-width: 1280px) { width: calc(100vw - 260px); - height: calc(100vh - 76px); padding-left: 24px; padding-right: 24px; ${props => From 3663154e7777158ea4f249942194a6e4f494d171 Mon Sep 17 00:00:00 2001 From: Ihor Smyk Date: Thu, 29 Jun 2023 21:31:48 +0300 Subject: [PATCH 5/5] fix --- src/components/BoardList/BoardList.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/BoardList/BoardList.module.scss b/src/components/BoardList/BoardList.module.scss index f48900d..f1d2563 100644 --- a/src/components/BoardList/BoardList.module.scss +++ b/src/components/BoardList/BoardList.module.scss @@ -20,7 +20,7 @@ max-height: calc(100vh - 654px); } - &::-webkit-scrollbar{ + &::-webkit-scrollbar { width: 0; } }