From 34bf7b55dfc96a35770e54743fe443177d46f0f6 Mon Sep 17 00:00:00 2001 From: M1kola Date: Mon, 7 Aug 2023 15:52:58 +0300 Subject: [PATCH] adaptive --- .../Tracker/ModalTicket/modalTicket.scss | 5 + .../TicketFullScreen/TicketFullScreen.jsx | 20 ++-- .../TicketFullScreen/ticketFullScreen.scss | 106 ++++++++++++++++++ .../TrackerSelectColumn.jsx | 4 +- .../trackerSelectColumn.scss | 4 +- src/pages/ProjectTracker/ProjectTracker.js | 10 +- src/pages/Tracker/tracker.scss | 50 ++++++++- 7 files changed, 181 insertions(+), 18 deletions(-) diff --git a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss index 600e219e..902dbb77 100644 --- a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss +++ b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss @@ -746,6 +746,11 @@ top: 10px !important; left: -110px !important; z-index: 10; + + @media (max-width: 880px) { + left: 0 !important; + top: -15px !important; + } } .react-datepicker__current-month { diff --git a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx index 2b5dbce3..8dd5ce99 100644 --- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx +++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx @@ -479,7 +479,7 @@ export const TicketFullScreen = () => {
toggleTabs(1)} > img @@ -487,7 +487,7 @@ export const TicketFullScreen = () => { toggleTabs(2)} > img @@ -495,7 +495,7 @@ export const TicketFullScreen = () => { toggleTabs(3)} > img @@ -626,7 +626,7 @@ export const TicketFullScreen = () => { }} /> ) : ( -
{inputsValue.title}
+
{inputsValue.title}
)}
{editOpen ? ( @@ -657,7 +657,7 @@ export const TicketFullScreen = () => { /> ) : (

{ )}

{Boolean(taskFiles.length) && ( -
+
{taskFiles.map((file) => { return (
@@ -742,7 +742,7 @@ export const TicketFullScreen = () => { {caseOfNum(taskFiles.length, "files")}
-
+
{
-
+

- Создатель :
- {taskInfo.user?.fio} + Создатель : +

 {taskInfo.user?.fio}

{taskInfo.executor ? ( diff --git a/src/components/Modal/Tracker/TicketFullScreen/ticketFullScreen.scss b/src/components/Modal/Tracker/TicketFullScreen/ticketFullScreen.scss index d84f8b65..deda6c7f 100644 --- a/src/components/Modal/Tracker/TicketFullScreen/ticketFullScreen.scss +++ b/src/components/Modal/Tracker/TicketFullScreen/ticketFullScreen.scss @@ -8,6 +8,112 @@ &-whith { width: 850px !important; + + @media (max-width: 1190px) { + width: auto !important; + margin: 0 !important; + } + } + + @media (max-width: 880px) { + flex-direction: column !important; + } +} + +.fullScreenWorkers { + @media (max-width: 880px) { + background: #DFF1FF; + + .workers_box { + @media (max-width: 880px) { + flex-direction: inherit !important; + align-items: center; + flex-wrap: wrap; + gap: 10px; + padding: 10px 18px !important; + + .workers__creator { + margin-bottom: 0 !important; + display: flex; + + } + + .add-worker { + margin: 0 !important; + } + + .executor { + p { + max-width: none !important; + } + } + } + } + + .workers_box-middle { + padding: 0 10px !important; + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 20px; + border-bottom: none !important; + + .deadLine { + width: 100%; + } + + .start { + margin-top: 0 !important; + order: 2; + } + + .time { + margin-top: 0; + order: 3; + } + } + + .workers_box-bottom { + display: flex; + flex-wrap: wrap; + gap: 10px; + padding: 10px !important; + + div { + width: 145px; + } + } + } +} + +.commentFullScreen { + @media (max-width: 520px) { + width: auto !important; + } +} + +.filesFullScreen { + @media (max-width: 520px) { + justify-content: space-evenly; + max-height: 400px !important; + } +} + +.comments__list__item { + @media (max-width: 520px) { + padding: 0 !important; + } +} + +.nameFullScreen { + @media (max-width: 520px) { + white-space: inherit !important; + } +} + +.fullScreenDescription { + @media (max-width: 1190px) { + white-space: inherit !important; } } diff --git a/src/components/TrackerSelectColumn/TrackerSelectColumn.jsx b/src/components/TrackerSelectColumn/TrackerSelectColumn.jsx index 3fd9fcab..bba1e559 100644 --- a/src/components/TrackerSelectColumn/TrackerSelectColumn.jsx +++ b/src/components/TrackerSelectColumn/TrackerSelectColumn.jsx @@ -15,7 +15,7 @@ export const TrackerSelectColumn = ({ columns, task, currentColumn }) => { className="trackerSelectColumn" onClick={() => setOpenSelect(!openSelect)} > -

Выберите колонку

+

{currentColumn.title}

arrow {openSelect && (
@@ -26,7 +26,7 @@ export const TrackerSelectColumn = ({ columns, task, currentColumn }) => { onClick={() => { dispatch( moveProjectTask({ - startWrapperIndex: { index: currentColumn, task }, + startWrapperIndex: { index: currentColumn.id, task }, columnId: column.id, }) ); diff --git a/src/components/TrackerSelectColumn/trackerSelectColumn.scss b/src/components/TrackerSelectColumn/trackerSelectColumn.scss index ee83b9cf..95a302e8 100644 --- a/src/components/TrackerSelectColumn/trackerSelectColumn.scss +++ b/src/components/TrackerSelectColumn/trackerSelectColumn.scss @@ -15,8 +15,8 @@ p { color: #252c32; - font-weight: 400; - font-size: 14px; + font-weight: 500; + font-size: 16px; line-height: 24px; } diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js index ff2374de..e245b81c 100644 --- a/src/pages/ProjectTracker/ProjectTracker.js +++ b/src/pages/ProjectTracker/ProjectTracker.js @@ -194,7 +194,7 @@ export const ProjectTracker = () => { } function openTicket(e, task) { - if (window.innerWidth < 900) { + if (window.innerWidth < 985) { return; } setSelectedTicket(task); @@ -634,7 +634,11 @@ export const ProjectTracker = () => { } onClick={(e) => openTicket(e, task)} > -
+
{ + if (window.innerWidth < 985) { + window.location.replace(`/tracker/task/${task.id}`) + } + }}>

{task.title}

@@ -690,7 +694,7 @@ export const ProjectTracker = () => { columns={projectBoard.columns.filter( (item) => item.id !== column.id )} - currentColumn={column.id} + currentColumn={column} task={task} />
diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index fb9fa487..cf9ed5dc 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -402,7 +402,7 @@ .persons__list { position: absolute; - z-index: 2; + z-index: 20; display: flex; flex-direction: column; background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%); @@ -527,6 +527,33 @@ max-width: none; } } + + @media (max-width: 1000px) { + width: 390px; + padding: 15px 30px; + .persons__list__info { + margin: 10px; + } + + .persons__list__items { + flex-direction: column; + margin-bottom: 20px; + row-gap: 15px; + + .persons__list__item { + max-width: none; + span { + max-width: none; + width: 100%; + } + } + } + } + + @media (max-width: 440px) { + width: 290px; + padding: 15px 20px; + } } } @@ -620,6 +647,17 @@ width: 20px; height: 20px; } + + @media (max-width: 915px) { + width: 100%; + max-width: none; + justify-content: start; + + p { + font-size: 16px; + max-width: none; + } + } } p { color: #252c32; @@ -659,6 +697,11 @@ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + + + @media (max-width: 915px) { + max-width: none; + } } img { @@ -811,6 +854,7 @@ @media (max-width: 900px) { width: 100%; + max-height: none; &:hover { transform: none; @@ -1025,6 +1069,10 @@ font-size: 14px; line-height: 22px; } + + @media (max-width: 900px) { + transform: none; + } } }