Fixed tracker pages

This commit is contained in:
MaxOvs19 2023-11-27 17:32:38 +03:00
parent 28a282c586
commit 5dc5b75f9e
6 changed files with 54 additions and 10 deletions

View File

@ -12,7 +12,7 @@
.acceptModal { .acceptModal {
border-radius: 20px; border-radius: 20px;
background: linear-gradient(180deg, #FFF 0%, #EBEBEB 100%); background: linear-gradient(180deg, #fff 0%, #ebebeb 100%);
padding: 50px 34px 25px; padding: 50px 34px 25px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -43,16 +43,18 @@
} }
.agree { .agree {
background: #52B709; background: #52b709;
} }
.cancel { .cancel {
background: #B0BABF; background: #b0babf;
} }
} }
&__close { &__close {
position: absolute; position: absolute;
width: 14px;
height: 14px;
top: 15px; top: 15px;
right: 22px; right: 22px;
cursor: pointer; cursor: pointer;

View File

@ -7,11 +7,11 @@
border: 1px solid #dde2e4; border: 1px solid #dde2e4;
border-radius: 8px; border-radius: 8px;
width: 1088px; width: 1088px;
height: 529px; height: 515px;
&-body { &-body {
&__left { &__left {
padding: 60px 0 30px 77px; padding: 33px 0 30px 77px;
h2 { h2 {
font-weight: 500; font-weight: 500;
@ -114,12 +114,13 @@
&__right { &__right {
border-left: 1px solid #f1f1f1; border-left: 1px solid #f1f1f1;
padding: 80px 32px 46px 25px; padding: 30px 32px 46px 25px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
h4 { h4 {
margin: 22px 0 22px 0;
font-weight: 900; font-weight: 900;
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
@ -140,7 +141,7 @@
} }
img { img {
margin: 0 18px 20px 0; margin: 0 18px 0 0;
} }
} }
} }

View File

@ -1060,7 +1060,7 @@
height: 42px; height: 42px;
cursor: pointer; cursor: pointer;
column-gap: 8px; column-gap: 8px;
padding: 5px; padding: 5px 5px 5px 14px;
border-radius: 8px; border-radius: 8px;
background: #fff; background: #fff;
@ -1138,9 +1138,13 @@
z-index: 10; z-index: 10;
&__item { &__item {
width: 66px;
font-size: 15px;
transition: 0.4s;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
transition: 0.4s;
font-weight: 700; font-weight: 700;
} }
} }

View File

@ -25,6 +25,7 @@ import "./projectTiket.scss";
export const ProjectTiket = ({ project, index }) => { export const ProjectTiket = ({ project, index }) => {
const [modalSelect, setModalSelect] = useState(false); const [modalSelect, setModalSelect] = useState(false);
const [modalAdd, setModalAdd] = useState(false); const [modalAdd, setModalAdd] = useState(false);
const [modalDelete, setModalDelete] = useState(false);
const [acceptModalOpen, setAcceptModalOpen] = useState(false); const [acceptModalOpen, setAcceptModalOpen] = useState(false);
const [path, setPath] = useState(""); const [path, setPath] = useState("");
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -71,6 +72,7 @@ export const ProjectTiket = ({ project, index }) => {
function closeAcceptModal() { function closeAcceptModal() {
setAcceptModalOpen(false); setAcceptModalOpen(false);
setModalDelete(false);
} }
function linkProject() {} function linkProject() {}
@ -144,7 +146,13 @@ export const ProjectTiket = ({ project, index }) => {
<img src={archiveSet}></img> <img src={archiveSet}></img>
<p>в архив</p> <p>в архив</p>
</div> </div>
<div onClick={removeProject}>
<div
onClick={() => {
setModalDelete(true);
setModalSelect(false);
}}
>
<img src={del}></img> <img src={del}></img>
<p>удалить</p> <p>удалить</p>
</div> </div>
@ -152,6 +160,15 @@ export const ProjectTiket = ({ project, index }) => {
</ModalSelect> </ModalSelect>
{acceptModalOpen && ( {acceptModalOpen && (
<AcceptModal <AcceptModal
title={"Вы точно хотите переместить проект в архив?"}
closeModal={closeAcceptModal}
agreeHandler={removeProject}
/>
)}
{modalDelete && (
<AcceptModal
title={"Вы точно хотите удалить?"}
closeModal={closeAcceptModal} closeModal={closeAcceptModal}
agreeHandler={removeProject} agreeHandler={removeProject}
/> />

View File

@ -531,7 +531,13 @@ export const ProjectTracker = () => {
} }
> >
{Boolean(projectBoard.projectUsers?.length) && ( {Boolean(projectBoard.projectUsers?.length) && (
<div className="projectPersons"> <div
className={
projectBoard.projectUsers?.length == 1
? "onePerson"
: "projectPersons"
}
>
{projectBoard.projectUsers.slice(0, 3).map((person) => { {projectBoard.projectUsers.slice(0, 3).map((person) => {
return ( return (
<img <img

View File

@ -322,6 +322,7 @@
display: flex; display: flex;
position: relative; position: relative;
left: 5px; left: 5px;
img { img {
position: relative; position: relative;
display: flex; display: flex;
@ -341,6 +342,19 @@
} }
} }
.onePerson {
display: flex;
position: relative;
left: -15px;
img {
position: relative;
display: flex;
width: 32px;
height: 32px;
}
}
span { span {
width: 32px; width: 32px;
height: 32px; height: 32px;