diff --git a/src/assets/icons/archiveTrackerProjects.svg b/src/assets/icons/archiveTrackerProjects.svg new file mode 100644 index 00000000..b260054f --- /dev/null +++ b/src/assets/icons/archiveTrackerProjects.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.jsx similarity index 92% rename from src/pages/Tracker/Tracker.js rename to src/pages/Tracker/Tracker.jsx index e0dbdbb8..fe2eb23c 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.jsx @@ -24,11 +24,13 @@ import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader"; 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 search from "assets/icons/serchIcon.png"; import project from "assets/icons/trackerProject.svg"; import tasks from "assets/icons/trackerTasks.svg"; import archive from "assets/images/archiveIcon.png"; +import mockAvatar from "assets/images/avatarMok.png"; import avatarMok from "assets/images/avatarMok.png"; import noProjects from "assets/images/noProjects.png"; @@ -327,6 +329,13 @@ export const Tracker = () => { /> + +
+

Задача

+

Потраченное время

+

Дата окончания

+
+
{loader && } {!loader && ( @@ -347,14 +356,6 @@ export const Tracker = () => { />
- avatar
{/*Проект*/}

{getCorrectDate(task.updated_at)}

@@ -365,7 +366,7 @@ export const Tracker = () => { }) ) : (
-

В архиве задач нет

+

В данном месяце у вас не было задач

)} @@ -373,7 +374,7 @@ export const Tracker = () => {
-
+

Архив проектов:

{`${ @@ -392,18 +393,29 @@ export const Tracker = () => { ) ? ( projects.map((project, index) => { return project.status === 10 ? ( -

+

{project.name}

{project.date}

+
+ # +
+

Создатель проекта:

+

{"Василий Тарасов"}

+
+
) : ( "" ); }) ) : ( -
+
+ #

В архиве проектов нет

)} diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index 85e593ff..8d15c699 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -1401,14 +1401,29 @@ @media (max-width: 450px) { flex-wrap: wrap; } + + &-table { + margin: 29px 0 0 0; + height: 67px; + display: flex; + align-items: center; + justify-content: space-between; + background: #f1f1f1; + color: #5b6871; + font-size: 14px; + font-weight: 400; + border-radius: 12px; + padding-left: 15px; + padding-right: 15px; + margin-right: -6px; + } } &__tasksWrapper { - margin-top: 10px; + margin-top: 20px; display: flex; flex-direction: column; row-gap: 15px; - // max-height: 400px; overflow-y: auto; margin-right: -16px; padding-right: 10px; @@ -1443,7 +1458,7 @@ transition: all 0.3s ease; background: #f1f1f1; border-radius: 12px; - padding: 12px 42px 7px 32px; + padding: 12px 15px 7px 16px; &:hover { transform: scale(0.99); @@ -1462,7 +1477,7 @@ .completeTask__title { font-weight: 700; - font-size: 20px; + font-size: 18px; line-height: 32px; } @@ -1472,7 +1487,7 @@ .date { font-weight: 500; - font-size: 16px; + font-size: 14px; line-height: 24px; color: #6f6f6f; } @@ -1504,6 +1519,15 @@ } } + &-project { + background: #f1f1f1; + width: 328px; + border-radius: 8px; + display: flex; + flex-direction: column; + padding: 23px; + } + @media (max-width: 740px) { flex-direction: column; padding: 10px 20px; @@ -1515,10 +1539,7 @@ } &__tasks { - // min-height: 400px; - // max-height: 450px; padding-right: 15px; - // width: 65%; @media (max-width: 1100px) { width: 100%; @@ -1617,35 +1638,75 @@ } &__projects { - display: none; + display: flex; flex-direction: column; - width: 33%; - min-height: 400px; - max-height: 450px; - padding-right: 15px; @media (max-width: 1100px) { width: 100%; min-height: auto; } + + &-title { + background: #e1fccf; + display: flex; + align-items: center; + height: 66px; + border-radius: 12px; + margin: 25px 0 0 0; + padding-left: 15px; + color: #000; + font-style: normal; + + h3 { + font-size: 16px; + font-weight: 700; + margin: 0 5px 0 0; + } + + p { + font-size: 16px; + font-weight: 300; + } + } } &__noItem { - background: #f1f1f1; - border-radius: 12px; padding: 23px 0 19px; + color: #6f6f6f; p { + font-size: 17px; + font-style: normal; font-weight: 700; - font-size: 22px; - line-height: 32px; - color: #111112; - text-align: center; + padding-left: 15px; } @media (max-width: 650px) { background-color: white; } + + &-project { + background: #f1f1f1; + width: 328px; + height: 108px; + border-radius: 8px; + display: flex; + gap: 21px; + padding: 23px; + align-items: center; + + p { + width: 105px; + color: #6f6f6f; + font-size: 16px; + font-style: normal; + font-weight: 700; + } + + img { + margin-left: 10px; + } + } } } }