redesign cards
This commit is contained in:
Victor Batischev
parent
ad8c975004
commit
53bd5a661d
@ -29,7 +29,7 @@
|
||||
&__info {
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
margin: 12px 0 20px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 805px) {
|
||||
@ -52,13 +52,14 @@
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
row-gap: 5px;
|
||||
}
|
||||
|
||||
.invite-person-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
row-gap: 10px;
|
||||
row-gap: 5px;
|
||||
&__input {
|
||||
margin: 0;
|
||||
min-width: 240px;
|
||||
@ -86,11 +87,10 @@
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
margin: 5px 0;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.invite-person-block {
|
||||
row-gap: 5px;
|
||||
&__btn {
|
||||
margin: 5px auto;
|
||||
}
|
||||
|
||||
@ -406,11 +406,11 @@ export const TrackerModal = ({
|
||||
<div className="select__person">
|
||||
<div className="title-project select-person">
|
||||
<h4>Добавьте участника</h4>
|
||||
<p className="select-person__info">
|
||||
Выберите пользователя в списке или добавьте по e-mail
|
||||
</p>
|
||||
<div className="invite__blocks">
|
||||
<div className="add-person-block">
|
||||
<p className="select-person__info">
|
||||
Выберите пользователя в списке
|
||||
</p>
|
||||
<div
|
||||
className={
|
||||
selectWorkersOpen
|
||||
@ -461,8 +461,8 @@ export const TrackerModal = ({
|
||||
Добавить
|
||||
</BaseButton>
|
||||
</div>
|
||||
<span>или</span>
|
||||
<div className="invite-person-block">
|
||||
<span>или добавьте по e-mail</span>
|
||||
<div className="input-container invite-person-block__input">
|
||||
<input
|
||||
className="name-project"
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
|
||||
import { deleteProject, modalToggle } from "@redux/projectsTrackerSlice";
|
||||
|
||||
import { copyProjectLink } from "@utils/helper";
|
||||
import { copyProjectLink, urlForLocal } from "@utils/helper";
|
||||
|
||||
import { apiRequest } from "@api/request";
|
||||
|
||||
@ -18,7 +18,6 @@ import archiveSet from "assets/icons/archive.svg";
|
||||
import del from "assets/icons/delete.svg";
|
||||
import edit from "assets/icons/edit.svg";
|
||||
import link from "assets/icons/link.svg";
|
||||
import avatarProject from "assets/images/avatarMok.png";
|
||||
|
||||
import "./projectTicket.scss";
|
||||
|
||||
@ -27,8 +26,8 @@ export const ProjectTicket = ({ project, index }) => {
|
||||
const [modalAdd, setModalAdd] = useState(false);
|
||||
const [modalDelete, setModalDelete] = useState(false);
|
||||
const [acceptModalOpen, setAcceptModalOpen] = useState(false);
|
||||
const [path, setPath] = useState("");
|
||||
const dispatch = useDispatch();
|
||||
const navigate = useNavigate();
|
||||
const { showNotification } = useNotification();
|
||||
|
||||
useEffect(() => {
|
||||
@ -84,18 +83,30 @@ export const ProjectTicket = ({ project, index }) => {
|
||||
<div className="project__link">{project.name}</div>
|
||||
|
||||
<div className="project__info">
|
||||
<p>Открытые задачи</p>
|
||||
{/* <p>Открытые задачи</p>
|
||||
<span className="count">
|
||||
{project.columns.reduce(
|
||||
(accumulator, currentValue) =>
|
||||
accumulator + currentValue.tasks.length,
|
||||
0
|
||||
)}
|
||||
</span>
|
||||
<img src={avatarProject} alt="#" className="project__avatar" />
|
||||
</span> */}
|
||||
<img
|
||||
src={urlForLocal(project.owner_info.avatar)}
|
||||
alt="avatar"
|
||||
className="project__avatar"
|
||||
/>
|
||||
<span>{project.owner_info.fio}</span>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* <Link
|
||||
to={`/profile/statistics/${project.id}`}
|
||||
className="project__statistics"
|
||||
>
|
||||
Посмотреть статистику
|
||||
</Link> */}
|
||||
|
||||
<span
|
||||
className="menu-settings"
|
||||
onClick={() => {
|
||||
@ -105,13 +116,6 @@ export const ProjectTicket = ({ project, index }) => {
|
||||
...
|
||||
</span>
|
||||
|
||||
<Link
|
||||
to={`/profile/statistics/${project.id}`}
|
||||
className="project__statistics"
|
||||
>
|
||||
Посмотреть статистику
|
||||
</Link>
|
||||
|
||||
<TrackerModal
|
||||
active={modalAdd}
|
||||
setActive={setModalAdd}
|
||||
@ -131,9 +135,9 @@ export const ProjectTicket = ({ project, index }) => {
|
||||
<img src={edit}></img>
|
||||
<p>редактировать</p>
|
||||
</div>
|
||||
<div>
|
||||
<div onClick={copyProjectLink(project.id)}>
|
||||
<img src={link}></img>
|
||||
<p onClick={copyProjectLink(project.id)}>скопировать ссылку</p>
|
||||
<p>скопировать ссылку</p>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => {
|
||||
@ -144,7 +148,14 @@ export const ProjectTicket = ({ project, index }) => {
|
||||
<img src={archiveSet}></img>
|
||||
<p>в архив</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
onClick={() => {
|
||||
navigate(`/profile/statistics/${project.id}`);
|
||||
}}
|
||||
>
|
||||
<img src={archiveSet}></img>
|
||||
<p>статистика</p>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => {
|
||||
setModalDelete(true);
|
||||
|
||||
@ -40,7 +40,6 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
|
||||
p {
|
||||
color: #6f6f6f;
|
||||
@ -50,6 +49,11 @@
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: blue;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.count {
|
||||
margin-left: 8px;
|
||||
width: 26px;
|
||||
@ -78,16 +82,16 @@
|
||||
|
||||
.menu-settings {
|
||||
position: absolute;
|
||||
font-size: 21px;
|
||||
font-size: 30px;
|
||||
color: #6f6f6f;
|
||||
right: 15px;
|
||||
top: 0px;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-left: 56px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&__open-tracker {
|
||||
|
||||
@ -878,6 +878,7 @@ export const ProjectTracker = () => {
|
||||
"YYYY-MM-DD HH:mm:ss"
|
||||
);
|
||||
const titleColor =
|
||||
task.dead_line &&
|
||||
dateDeadline < new Date(currentDate)
|
||||
? "red"
|
||||
: "#1a1919";
|
||||
|
||||
@ -171,7 +171,7 @@
|
||||
|
||||
.create-project-btn {
|
||||
width: 300px;
|
||||
height: 113px;
|
||||
height: 83px;
|
||||
border-radius: 12px;
|
||||
background: #ecf8e5;
|
||||
color: #000000;
|
||||
@ -224,7 +224,6 @@
|
||||
align-items: center;
|
||||
column-gap: 5px;
|
||||
img {
|
||||
margin-left: -22px;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
@ -564,6 +563,10 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@media (max-width: 900px) {
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.close {
|
||||
cursor: pointer;
|
||||
width: 20px;
|
||||
|
||||
@ -155,7 +155,7 @@ export const ViewReport = () => {
|
||||
: "view-report__bar__delete disable"
|
||||
}
|
||||
>
|
||||
Удалить отчет
|
||||
Удалить
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
@ -201,7 +201,7 @@ export const ViewReport = () => {
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<p>Какие задачи выполнены?</p>
|
||||
<p>Выполненные задачи</p>
|
||||
</th>
|
||||
<th>
|
||||
<p>Время</p>
|
||||
@ -242,7 +242,7 @@ export const ViewReport = () => {
|
||||
</div>
|
||||
{Boolean(difficulties.length) && (
|
||||
<div className="view-report__item">
|
||||
<h3>Какие сложности возникли?</h3>
|
||||
<h3>Возникшие сложности</h3>
|
||||
{difficulties.map((item, index) => {
|
||||
return <p key={index}>{item}</p>;
|
||||
})}
|
||||
|
||||
@ -60,7 +60,7 @@
|
||||
border-radius: 12px;
|
||||
padding: 20px 33px;
|
||||
align-items: center;
|
||||
column-gap: 60px;
|
||||
column-gap: 20px;
|
||||
height: 72px;
|
||||
justify-content: space-between;
|
||||
|
||||
@ -88,9 +88,14 @@
|
||||
}
|
||||
|
||||
&__delete {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
border: 1px dashed #8bcc60;
|
||||
color: #000000;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
padding: 8px 24px;
|
||||
background: whitesmoke;
|
||||
border-radius: 44px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.disable {
|
||||
@ -343,9 +348,8 @@
|
||||
width: 100%;
|
||||
|
||||
@media (max-width: 900px) {
|
||||
max-width: 28px;
|
||||
height: 28px;
|
||||
font-size: 15px;
|
||||
max-width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user