From 1687a71d8b370b638463ad47211a1f722fec2613 Mon Sep 17 00:00:00 2001 From: M1kola Date: Thu, 10 Aug 2023 18:56:50 +0300 Subject: [PATCH] fixes --- .../Common/ModalLayout/modalLayout.scss | 37 ++++++++++++++++- .../Modal/ModalSelect/modalSelect.scss | 10 +++++ .../Tracker/ModalTicket/modalTicket.scss | 3 +- .../TicketFullScreen/ticketFullScreen.scss | 10 +++++ .../Tracker/TrackerModal/trackerModal.scss | 4 ++ src/pages/ProjectTracker/ProjectTracker.js | 36 +++++++++-------- src/pages/Tracker/tracker.scss | 40 ++++++++++++++++--- 7 files changed, 114 insertions(+), 26 deletions(-) diff --git a/src/components/Common/ModalLayout/modalLayout.scss b/src/components/Common/ModalLayout/modalLayout.scss index 3382e64e..8e775681 100644 --- a/src/components/Common/ModalLayout/modalLayout.scss +++ b/src/components/Common/ModalLayout/modalLayout.scss @@ -15,7 +15,7 @@ position: relative; background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%); border-radius: 24px; - padding: 35px 15px 15px 15px; + padding: 25px; display: flex; flex-direction: column; align-items: center; @@ -29,6 +29,10 @@ font-weight: 300; margin: 12px 0 20px; } + + @media (max-width: 805px) { + row-gap: 0; + } } .invite__blocks { @@ -53,6 +57,10 @@ input { height: 42px; } + + @media (max-width: 500px) { + min-width: auto; + } } &__btn { @@ -61,6 +69,27 @@ width: 100%; } } + + @media (max-width: 805px) { + flex-direction: column; + width: 100%; + + span { + text-align: center; + margin: 5px 0; + } + + .invitePersonBlock { + row-gap: 5px; + &__btn { + margin: 5px auto; + } + } + + .addPersonBtn { + margin: 10px auto 0; + } + } } .select__person { @@ -68,11 +97,15 @@ flex-direction: column; row-gap: 10px; padding: 39px 10px 29px 10px; + + @media (max-width: 500px) { + padding: 10px; + } } } .ck-editor { - width: 100%; + width: 100% !important; } } diff --git a/src/components/Modal/ModalSelect/modalSelect.scss b/src/components/Modal/ModalSelect/modalSelect.scss index 156d37ee..35981774 100644 --- a/src/components/Modal/ModalSelect/modalSelect.scss +++ b/src/components/Modal/ModalSelect/modalSelect.scss @@ -8,6 +8,12 @@ bottom: -148px; right: -120px; + @media (max-width: 1050px) { + right: 10px; + padding-top: 10px; + bottom: -160px; + } + &-menu { font-size: 14px; line-height: 38px; @@ -32,6 +38,10 @@ left: 10px; font-size: 21px; color: #6f6f6f; + + @media (max-width: 1050px) { + display: none; + } } } diff --git a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss index 902dbb77..cabdc30f 100644 --- a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss +++ b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss @@ -356,7 +356,7 @@ flex-wrap: wrap; column-gap: 25px; row-gap: 20px; - margin-top: 10px; + margin-top: 33px; max-height: 350px; overflow-y: auto; @@ -767,6 +767,7 @@ display: flex; justify-content: center; align-items: center; + font-size: 0; &:hover { background-color: white; diff --git a/src/components/Modal/Tracker/TicketFullScreen/ticketFullScreen.scss b/src/components/Modal/Tracker/TicketFullScreen/ticketFullScreen.scss index deda6c7f..37eac4c8 100644 --- a/src/components/Modal/Tracker/TicketFullScreen/ticketFullScreen.scss +++ b/src/components/Modal/Tracker/TicketFullScreen/ticketFullScreen.scss @@ -84,6 +84,16 @@ } } } + + @media (max-width: 450px) { + .workers_box { + .executor { + p { + max-width: 210px !important; + } + } + } + } } .commentFullScreen { diff --git a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss index ec1af836..a4f54347 100644 --- a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss +++ b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss @@ -190,6 +190,10 @@ font-size: 22px; line-height: 26px; color: #263238 !important; + + @media (max-width: 450px) { + font-size: 18px; + } } &__decs { diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js index 7cd8b73b..5c8a3b66 100644 --- a/src/pages/ProjectTracker/ProjectTracker.js +++ b/src/pages/ProjectTracker/ProjectTracker.js @@ -361,26 +361,28 @@ export const ProjectTracker = () => { */}

добавить колонку

-
+
{projectBoard.projectUsers?.length > 3 && ( +1... )} -
- {projectBoard.projectUsers?.length && - projectBoard.projectUsers.slice(0, 3).map((person) => { - return ( - avatar - ); - })} -
+ {Boolean(projectBoard.projectUsers?.length) && +
+ { + projectBoard.projectUsers.slice(0, 3).map((person) => { + return ( + avatar + ); + })} +
+ } { diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index cf9ed5dc..6a5b48b9 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -48,7 +48,6 @@ height: 60px; @media (max-width: 650px) { - padding: 0 15px; background: none; justify-content: space-between; position: relative; @@ -149,10 +148,7 @@ @media (max-width: 785px) { row-gap: 25px; justify-content: center; - } - - @media (max-width: 460px) { - padding: 0 15px; + padding: 0 15px 20px; } .no-projects { @@ -557,6 +553,21 @@ } } + .noProjectUsers { + @media (max-width: 900px) { + position: inherit; + + .addPerson { + position: inherit; + } + + p { + position: inherit; + margin-left: 14px; + } + } + } + &__checkBox { margin: 0 15px 0 0; cursor: pointer; @@ -678,6 +689,7 @@ &Dropdown { position: absolute; top: 33px; + left: 0; background: white; border-radius: 8px; z-index: 5; @@ -1023,6 +1035,11 @@ display: flex; flex-direction: column; + @media (max-width: 910px) { + right: 10px; + top: 40px; + } + &__item { cursor: pointer; display: flex; @@ -1041,6 +1058,10 @@ font-weight: 500; font-size: 25px; transform: scaleY(-1); + + @media (max-width: 900px) { + transform: none; + } } &__noTasks { @@ -1328,6 +1349,10 @@ } } } + + @media (max-width: 650px) { + padding-bottom: 20px; + } } &__archive { @@ -1342,6 +1367,10 @@ row-gap: 20px; } + @media (max-width: 650px) { + padding-bottom: 20px; + } + .archive { &__title { padding-bottom: 8px; @@ -1492,7 +1521,6 @@ max-height: 450px; padding-right: 15px; width: 65%; - overflow: hidden; @media (max-width: 1100px) { width: 100%;