apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new design tasks

Browse Source
This commit is contained in:
MaxOvs19
2023-10-20 19:15:04 +03:00
parent 533e765581
commit 8b170fe43d
3 changed files with 234 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/pages/Tracker/Tracker.jsx
View File

@ -26,6 +26,7 @@ import ProjectTiket from "@components/ProjectTiket/ProjectTiket";
import addProjectImg from "assets/icons/addProjectImg.svg";
import archiveTrackerProjects from "assets/icons/archiveTrackerProjects.svg";
import arrowViewReport from "assets/icons/arrows/arrowViewReport.svg";
import filterIcon from "assets/icons/filterIcon.svg";
import search from "assets/icons/serchIcon.png";
import project from "assets/icons/trackerProject.svg";
import tasks from "assets/icons/trackerTasks.svg";
@ -246,7 +247,25 @@ export const Tracker = () => {
}
>
<div className="taskList__head">
<h3>Список всех задач</h3>
<div className="taskList__tasks-period">
<div className="month-period">
<p>
{25} - {35}
</p>
<h2>Сентября,</h2>
<h3>2023</h3>
</div>
<div className="buttons-month">
<button>
<img src={arrowViewReport} alt="<"></img>
</button>
<button>
<img src={arrowViewReport} alt=">"></img>
</button>
</div>
</div>
<div className="taskList__head__search">
<img src={search} alt="search" />
<input
@ -255,7 +274,68 @@ export const Tracker = () => {
onChange={(event) => filterAllTask(event)}
/>
</div>
<div className="taskList__filters">
<BaseButton styles={"taskList__filters-filter"}>
<img src={filterIcon} alt="#" />
<p>Фильтр</p>
</BaseButton>
<BaseButton styles={"taskList__filters-clear"}>
<p> Очистить фильтр</p>
</BaseButton>
</div>
</div>
<table className="taskList__table">
<thead>
<tr>
<th>Задача</th>
<th>Статус</th>
<th>Потраченное время</th>
<th>Дата начала</th>
<th>Дедлайн</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div className="taskList__table__title-task">
Разработка трекера <img src="#" alt="#" />
</div>
<div className="taskList__table__name-project">
<h4>Проект:</h4>
<p>Туман</p>
</div>
</td>
<td>
<div className="task-status">In Progress</div>
</td>
<td>14ч 25 мин</td>
<td>13.09.2020</td>
<td>20.09.2020</td>
</tr>
<tr>
<td>
<div className="taskList__table__title-task">
Разработка трекера <img src="#" alt="#" />
</div>
<div className="taskList__table__name-project">
<h4>Проект:</h4>
<p>Туман</p>
</div>
</td>
<td>
<div className="task-status">In Progress</div>
</td>
<td>14ч 25 мин</td>
<td>13.09.2020</td>
<td>20.09.2020</td>
</tr>
</tbody>
</table>
{loader && <Loader style="green" />}
{!loader && (
<div className="taskList__wrapper">

152
src/pages/Tracker/tracker.scss
View File

@ -1184,7 +1184,7 @@
}
&__search {
margin-left: auto;
// margin-left: auto;
padding: 6px 12px;
display: flex;
align-items: center;
@ -1192,7 +1192,7 @@
border: 1px solid #dde2e4;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
border-radius: 6px;
max-width: 450px;
max-width: 300px;
width: 100%;
&:focus-within {
@ -1224,6 +1224,154 @@
}
}
&__tasks-period {
display: flex;
align-items: center;
gap: 25px;
.buttons-month {
display: flex;
gap: 34px;
button {
width: 30px;
height: 30px;
background-color: #8dc63f;
border-radius: 15px;
border: none;
img {
width: 14px;
height: 14px;
}
&:first-child {
transform: rotate(-180deg);
}
}
}
.month-period {
display: flex;
flex-direction: row;
align-items: center;
p {
color: #1458dd;
font-size: 33px;
font-style: normal;
font-weight: 700;
line-height: 32px;
margin-right: 50px;
}
h3 {
color: #252c32;
font-size: 18px;
font-weight: 700;
margin-left: 5px;
}
}
}
&__filters {
display: flex;
gap: 10px;
font-size: 12px;
&-filter {
width: 116px;
height: 40px;
img {
margin-right: 14px;
}
}
&-clear {
width: 151px;
height: 40px;
background: #b0babf;
}
}
&__table {
margin-top: 20px;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 32px;
thead {
height: 65px;
background: #f1f1f1;
color: #5b6871;
th {
&:first-child {
padding-left: 10px;
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
}
&:last-child {
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}
}
}
tbody {
color: #000;
td {
height: 65px;
border-bottom: 1px solid rgba(241, 241, 241, 1);
&:first-child {
max-width: 275px;
color: #111112;
font-size: 17px;
font-weight: 700;
}
}
.task-status {
width: 130px;
border: 1px solid #52b709;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
color: #000;
font-size: 14px;
font-weight: 400;
}
}
&__title-task {
}
&__name-project {
display: none;
flex-direction: column;
h4 {
margin: 0;
color: #807777;
font-size: 10px;
font-weight: 500;
line-height: 24px;
}
p {
color: #000;
font-size: 14px;
font-weight: 400;
line-height: 32px;
}
}
}
&__wrapper {
margin-top: 10px;
display: flex;