adaptive
This commit is contained in:
parent
d62d321c93
commit
3db87fca20
36
src/components/TrackerSelectColumn/TrackerSelectColumn.jsx
Normal file
36
src/components/TrackerSelectColumn/TrackerSelectColumn.jsx
Normal file
@ -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(
|
||||
<div className='trackerSelectColumn' onClick={() => setOpenSelect(!openSelect)}>
|
||||
<p>Выберите колонку</p>
|
||||
<img className={openSelect ? 'open' : ''} src={arrowDown} alt='arrow' />
|
||||
{openSelect &&
|
||||
<div className='trackerSelectColumn__dropDown'>
|
||||
{columns.map((column) => {
|
||||
return <p key={column.id} onClick={() => {
|
||||
dispatch(moveProjectTask({
|
||||
startWrapperIndex: {index: currentColumn, task},
|
||||
columnId: column.id
|
||||
}))
|
||||
}
|
||||
}>{column.title}</p>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
export default TrackerSelectColumn;
|
||||
|
||||
51
src/components/TrackerSelectColumn/trackerSelectColumn.scss
Normal file
51
src/components/TrackerSelectColumn/trackerSelectColumn.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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 = () => {
|
||||
<div className="tracker__tabs__head">
|
||||
<Link
|
||||
to="/profile/tracker"
|
||||
className="tab active-tab tab"
|
||||
className="tab active-tab tab projectsTab"
|
||||
onClick={() => dispatch(setToggleTab(1))}
|
||||
>
|
||||
<img src={project} alt="img" />
|
||||
@ -306,7 +310,7 @@ export const ProjectTracker = () => {
|
||||
</Link>
|
||||
<Link
|
||||
to="/profile/tracker"
|
||||
className="tab"
|
||||
className="tab tasksTab"
|
||||
onClick={() => dispatch(setToggleTab(2))}
|
||||
>
|
||||
<img src={tasks} alt="img" />
|
||||
@ -314,7 +318,7 @@ export const ProjectTracker = () => {
|
||||
</Link>
|
||||
<Link
|
||||
to="/profile/tracker"
|
||||
className="tab"
|
||||
className="tab archiveTab"
|
||||
onClick={() => dispatch(setToggleTab(3))}
|
||||
>
|
||||
<img src={archive} alt="img" />
|
||||
@ -682,6 +686,10 @@ export const ProjectTracker = () => {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<TrackerSelectColumn
|
||||
columns={projectBoard.columns.filter((item) => item.id !== column.id)}
|
||||
currentColumn={column.id}
|
||||
task={task} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user