diff --git a/src/components/TrackerSelectColumn/TrackerSelectColumn.jsx b/src/components/TrackerSelectColumn/TrackerSelectColumn.jsx new file mode 100644 index 00000000..08452e86 --- /dev/null +++ b/src/components/TrackerSelectColumn/TrackerSelectColumn.jsx @@ -0,0 +1,36 @@ +import React, { useState } from "react"; +import { useDispatch } from "react-redux"; + +import { moveProjectTask } from "@redux/projectsTrackerSlice"; + +import arrowDown from "assets/icons/arrows/selectArrow.png"; + +import './trackerSelectColumn.scss' + +export const TrackerSelectColumn = ({columns, task, currentColumn}) => { + const dispatch = useDispatch(); + const [openSelect, setOpenSelect] = useState(false) + return( +
setOpenSelect(!openSelect)}> +

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

+ arrow + {openSelect && +
+ {columns.map((column) => { + return

{ + dispatch(moveProjectTask({ + startWrapperIndex: {index: currentColumn, task}, + columnId: column.id + })) + } + }>{column.title}

+ }) + } +
+ } +
+ ) +}; + +export default TrackerSelectColumn; + diff --git a/src/components/TrackerSelectColumn/trackerSelectColumn.scss b/src/components/TrackerSelectColumn/trackerSelectColumn.scss new file mode 100644 index 00000000..ee83b9cf --- /dev/null +++ b/src/components/TrackerSelectColumn/trackerSelectColumn.scss @@ -0,0 +1,51 @@ +.trackerSelectColumn { + display: none; + + @media (max-width: 900px) { + display: flex; + width: 100%; + margin: 10px 0; + justify-content: space-between; + align-items: center; + padding: 2px 6px; + cursor: pointer; + border: 1px solid #e3e2e2;; + border-radius: 8px; + position: relative; + + p { + color: #252c32; + font-weight: 400; + font-size: 14px; + line-height: 24px; + } + + img { + transition: all 0.3s ease; + } + + .open { + transform: rotate(180deg); + } + } + + &__dropDown { + position: absolute; + top: -110px; + background: white; + border-radius: 8px; + padding: 10px 10px; + display: flex; + flex-direction: column; + row-gap: 5px; + width: 100%; + z-index: 100; + border: 1px solid #c7c7c7; + left: 0; + + p { + font-size: 16px; + font-weight: 500; + } + } +} diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js index 0ab9b422..8eb2fafe 100644 --- a/src/pages/ProjectTracker/ProjectTracker.js +++ b/src/pages/ProjectTracker/ProjectTracker.js @@ -35,6 +35,7 @@ import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal"; import { Navigation } from "@components/Navigation/Navigation"; import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs"; import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader"; +import TrackerSelectColumn from "@components/TrackerSelectColumn/TrackerSelectColumn"; import arrow from "assets/icons/arrows/arrowCalendar.png"; import arrowDown from "assets/icons/arrows/selectArrow.png"; @@ -193,6 +194,9 @@ export const ProjectTracker = () => { } function openTicket(e, task) { + if (window. innerWidth < 900) { + return + } setSelectedTicket(task); setModalActiveTicket(true); } @@ -298,7 +302,7 @@ export const ProjectTracker = () => {
dispatch(setToggleTab(1))} > img @@ -306,7 +310,7 @@ export const ProjectTracker = () => { dispatch(setToggleTab(2))} > img @@ -314,7 +318,7 @@ export const ProjectTracker = () => { dispatch(setToggleTab(3))} > img @@ -682,6 +686,10 @@ export const ProjectTracker = () => {
+ item.id !== column.id)} + currentColumn={column.id} + task={task} /> ); })} diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index 25d2811c..fb9fa487 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -231,6 +231,10 @@ background: #ffffff; border-radius: 12px; flex-direction: column; + + @media (max-width: 650px) { + border-radius: 0; + } } .tasks { @@ -238,6 +242,14 @@ border-bottom: 1px solid #dde2e4; padding: 0 35px 15px; + @media (max-width: 1000px) { + padding: 0 15px 15px; + } + + @media (max-width: 650px) { + background-color: #DFF1FF; + } + &__wrapper { display: flex; max-width: 1280px; @@ -250,6 +262,13 @@ &__fullScreen { max-width: 1160px; } + + @media (max-width: 1350px) { + display: flex; + flex-wrap: wrap; + gap: 10px; + padding: 0px; + } } h5 { @@ -263,6 +282,11 @@ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + + @media (max-width: 1350px) { + width: 100%; + max-width: none; + } } &__add { @@ -287,6 +311,14 @@ display: flex; align-items: center; } + + @media (max-width: 1350px) { + margin-left: 0; + } + + @media (max-width: 700px) { + width: 100%; + } } &__persons { @@ -294,6 +326,14 @@ display: flex; align-items: center; + @media (max-width: 700px) { + right: -15px; + } + + @media (max-width: 465px) { + width: 100%; + } + .projectPersons { display: flex; position: relative; @@ -496,6 +536,10 @@ display: flex; align-items: center; + @media (max-width: 650px) { + margin: 0; + } + span { color: #252c32; font-weight: 400; @@ -533,6 +577,16 @@ max-width: 220px; width: 100%; + @media (max-width: 915px) { + margin-right: 0; + width: 100%; + max-width: none; + } + + @media (max-width: 650px) { + border-color: gray; + } + &Selected { display: flex; align-items: center; @@ -646,6 +700,10 @@ font-weight: 500; } } + + @media (max-width: 1150px) { + display: none; + } } } @@ -673,6 +731,13 @@ background: #c5c0c6; border-radius: 20px; } + + @media (max-width: 900px) { + padding: 15px; + flex-direction: column; + row-gap: 25px; + transform: none; + } } &__board { @@ -690,10 +755,15 @@ height: fit-content; position: relative; transition: all 0.3s ease; - //max-height: 500px; - //overflow-y: auto; transform: scaleY(-1); + @media (max-width: 900px) { + min-width: auto; + width: 100%; + max-width: none; + transform: scaleX(1); + } + &::-webkit-scrollbar { width: 3px; border-radius: 10px; @@ -739,6 +809,14 @@ transition: 0.3s; } + @media (max-width: 900px) { + width: 100%; + + &:hover { + transform: none; + } + } + &__hide { opacity: 0; } @@ -1456,7 +1534,8 @@ @media (max-width: 650px) { &__content { - padding: 28px 0; + padding: 28px 0 0; + background-color: #DFF1FF; .project { background-color: white;