From 615606d3e63433397cc44f4d503aa3f8792dafe7 Mon Sep 17 00:00:00 2001 From: M1kola Date: Thu, 30 Mar 2023 15:07:05 +0300 Subject: [PATCH] new tracker --- src/images/noProjects.png | Bin 0 -> 475 bytes src/images/serchIcon.png | Bin 0 -> 408 bytes src/index.css | 4 + src/pages/Tracker/Tracker.js | 669 ++++++++++++++++++++++----------- src/pages/Tracker/tracker.scss | 630 +++++++++++++++++++++++++------ 5 files changed, 960 insertions(+), 343 deletions(-) create mode 100644 src/images/noProjects.png create mode 100644 src/images/serchIcon.png diff --git a/src/images/noProjects.png b/src/images/noProjects.png new file mode 100644 index 0000000000000000000000000000000000000000..87579da23f1db333331dd4219ce3d89fa32f5399 GIT binary patch literal 475 zcmV<10VMv3P)?qa2yeh6xQUY+j`R^s7?sG1cIa%d$8+0? zwdu80ZW9K+0HvIpe4KMnZVy3dw4YpHrw_0T>#!&9fj>I%sDAN$MvCrHIbo|tO7+AH z5CVj_iLN#wx&pH!U;4FG=@>)*t~r2Z8l9PlAVNA;s2WZxMR2N@rP#`>P%{ONPIf1< zxo&Qd;Y}YFt=x5~SQc|;%yVPt=S^UYWiVzo9lv(v(nSH&@!}jM*^E7_cV*G21$nUxi3nB_Psfw_$GZ&BJ-ZmqG5eq5Hq()@+ZXpsL9J@HwcvYha%ALY@a z8^Ee;ul=&WL^zSX)~|08k$ldrm2pX-v3s@X1Me+sGD*PsO%#j{=an`{TBPq)D&oK* zS&>E>guGcV!8E3ezi62cO%_oXzld?m6 R{-OW?002ovPDHLkV1kAY%bfrK literal 0 HcmV?d00001 diff --git a/src/images/serchIcon.png b/src/images/serchIcon.png new file mode 100644 index 0000000000000000000000000000000000000000..66fb7d5d2eef1d2021862d74fc6be9f7e28390b1 GIT binary patch literal 408 zcmV;J0cZY+P)HK~#7FjgsF@ z!!QuWzjG>t$_s4J5$FPKEI}n+XtF_>fNnyW05O5pr;0z4(+S838KE!mhOf3`r)iW* z{a$iD`*(M_J3^3B`WizlNzfF`Y3-%bo>%j`={q_i4{h{_5@>6V(65UBA@c`WMThWo zgcy}TlJYNZvY8~JBy&D@=id0LBB(y~B0~I!@#Ac=&2zbPm-G9{nlCVpuo#Nx1|)(% zkVuvhXe*a;#{y5zW-{raRK{(Lj#C<-3|0#aYS-VFwd)hMuZ6cR>&$&p-#QCs*? { const [toggleTab, setToggleTab] = useState(1); - const [tabTaskMok, setTabTaskMok] = useState([ { name: "Открытые", @@ -132,102 +133,224 @@ export const Tracker = () => { }, ]); + const [allTasks] = useState([ + { + name: "PR - 2245", + description: "Сверстать часть таблицы. Сверстать часть таблицы", + dateComplete: "7 марта 2023 г", + avatarDo: avatarTest, + project: "Будущее России" + }, + { + name: "PR - 2245", + description: "Сверстать часть таблицы. Сверстать часть таблицы", + dateComplete: "7 марта 2023 г", + avatarDo: avatarTest, + project: "Будущее России" + }, + { + name: "PR - 2245", + description: "Сверстать часть таблицы. Сверстать часть таблицы", + dateComplete: "7 марта 2023 г", + avatarDo: avatarTest, + project: "Будущее России" + }, + { + name: "PR - 2245", + description: "Сверстать часть таблицы. Сверстать часть таблицы", + dateComplete: "7 марта 2023 г", + avatarDo: avatarTest, + project: "Будущее России" + }, + { + name: "PR - 2245", + description: "Сверстать часть таблицы. Сверстать часть таблицы", + dateComplete: "7 марта 2023 г", + avatarDo: avatarTest, + project: "Будущее России" + }, + { + name: "PR - 2245", + description: "Сверстать часть таблицы. Сверстать часть таблицы", + dateComplete: "7 марта 2023 г", + avatarDo: avatarTest, + project: "Будущее России" + }, + { + name: "PR - 2245", + description: "Сверстать часть таблицы. Сверстать часть таблицы", + dateComplete: "7 марта 2023 г", + avatarDo: avatarTest, + project: "Будущее России" + }, + { + name: "PR - 2245", + description: "Сверстать часть таблицы. Сверстать часть таблицы", + dateComplete: "7 марта 2023 г", + avatarDo: avatarTest, + project: "Будущее России" + }, + { + name: "PR - 2245", + description: "Сверстать часть таблицы. Сверстать часть таблицы", + dateComplete: "7 марта 2023 г", + avatarDo: avatarTest, + project: "Будущее России" + }, + ]) + + const [archiveProjects] = useState([ + { + name: "Будущее России", + date: "7 марта 2023 г" + }, + { + name: "Будущее России", + date: "7 марта 2023 г" + }, + { + name: "Будущее России", + date: "7 марта 2023 г" + }, + { + name: "Будущее России", + date: "7 марта 2023 г" + }, + { + name: "Будущее России", + date: "7 марта 2023 г" + }, + { + name: "Будущее России", + date: "7 марта 2023 г" + }, + { + name: "Будущее России", + date: "7 марта 2023 г" + }, + { + name: "Будущее России", + date: "7 марта 2023 г" + }, + { + name: "Будущее России", + date: "7 марта 2023 г" + }, + ] + ) + const [completeTasks] = useState([ { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", - dateComplete: "07/мар/23", + dateComplete: "7 марта 2023 г", avatarDo: avatarTest, + project: "Будущее России" }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", - dateComplete: "07/мар/23", + dateComplete: "7 марта 2023 г", avatarDo: avatarTest, + project: "Будущее России" }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", - dateComplete: "07/мар/23", + dateComplete: "7 марта 2023 г", avatarDo: avatarTest, + project: "Будущее России" }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", - dateComplete: "07/мар/23", + dateComplete: "7 марта 2023 г", avatarDo: avatarTest, + project: "Будущее России" }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", - dateComplete: "07/мар/23", + dateComplete: "7 марта 2023 г", avatarDo: avatarTest, + project: "Будущее России" }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", - dateComplete: "07/мар/23", + dateComplete: "7 марта 2023 г", avatarDo: avatarTest, + project: "Будущее России" }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", - dateComplete: "07/мар/23", + dateComplete: "7 марта 2023 г", avatarDo: avatarTest, + project: "Будущее России" }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", - dateComplete: "07/мар/23", + dateComplete: "7 марта 2023 г", avatarDo: avatarTest, + project: "Будущее России" }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", - dateComplete: "07/мар/23", + dateComplete: "7 марта 2023 г", avatarDo: avatarTest, + project: "Будущее России" }, { - name: "PK - 2245", + name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", - dateComplete: "07/мар/23", + dateComplete: "7 марта 2023 г", avatarDo: avatarTest, + project: "Будущее России" }, { - name: "PE - 2245", + name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", - dateComplete: "07/мар/23", + dateComplete: "7 марта 2023 г", avatarDo: avatarTest, + project: "Будущее России" }, { - name: "PA - 2245", + name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", - dateComplete: "07/мар/23", + dateComplete: "7 марта 2023 г", avatarDo: avatarTest, + project: "Будущее России" }, { - name: "PB - 2245", - description: "Верстать часть таблицы. Сверстать часть таблицы", - dateComplete: "07/мар/23", - avatarDo: avatarTest, - }, - { - name: "PC - 2245", + name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", - dateComplete: "07/мар/23", + dateComplete: "7 марта 2023 г", avatarDo: avatarTest, + project: "Будущее России" }, { - name: "PD - 2245", + name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", - dateComplete: "07/мар/23", + dateComplete: "7 марта 2023 г", avatarDo: avatarTest, + project: "Будущее России" }, { - name: "PA - 2245", + name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", - dateComplete: "07/мар/23", + dateComplete: "7 марта 2023 г", avatarDo: avatarTest, + project: "Будущее России" + }, + { + name: "PR - 2245", + description: "Сверстать часть таблицы. Сверстать часть таблицы", + dateComplete: "7 марта 2023 г", + avatarDo: avatarTest, + project: "Будущее России" }, ]); @@ -242,6 +365,8 @@ export const Tracker = () => { const [valueColl, setValueColl] = useState(""); // + const [projectTasksOpen, setProjectTasksOpen] = useState(false) + const [selectedTab, setSelectedTab] = useState({ name: "", indexTab: 0, @@ -259,6 +384,9 @@ export const Tracker = () => { const projects = useSelector(getProjects); const toggleTabs = (index) => { + if (projectTasksOpen) { + setProjectTasksOpen(false) + } setToggleTab(index); }; @@ -403,42 +531,50 @@ export const Tracker = () => { {name: 'Трекер', link: '/profile/tracker'} ]} /> -

Трекер

-
-
-
toggleTabs(1)} - > - img -

Проекты

-
-
toggleTabs(2)} - > - img -

Задачи

-
-
toggleTabs(3)} - > - img -

Архив

-
-
-
-
- {projects.map((project, index) => { - return ( -
+

Управление проектами с трекером

+
+
+
+
+
toggleTabs(1)} + > + img +

Проекты

+
+
toggleTabs(2)} + > + img +

Все мои задачи

+
+
toggleTabs(3)} + > + img +

Архив

+
+
+
+
+ + {Boolean(projects.length) && !projectTasksOpen && + projects.map((project, index) => { + return ( +
setProjectTasksOpen(true)}>

{project.name}

Открытые задачи

@@ -446,158 +582,180 @@ export const Tracker = () => { +
- ); - })} - - +
+

Ставьте задачи, следите за прогрессом, ведите учёт рабочего времени

+
+ } + {Boolean(projects.length) && !projectTasksOpen && +
+ +

Ставьте задачи, следите за прогрессом, ведите учёт рабочего времени

-
+
-
-

Проект : Разработка трекера

-
+
+
+

Проект : Разработка трекера

+
setModalCreateColl(false)} - > -
e.stopPropagation()} - > -
-

Введите название карточки

-
- setValueColl(e.target.value)} - > -
-
- -
-
- setModalCreateColl(true)} - > - + - -
- avatar - avatar - avatar - avatar - +9 -
-
- Учавствую - arrow -
-
- Мои - arrow -
-
- - - -
setModalCreateTiket(false)} >
e.stopPropagation()} + className="modal-project__content" + onClick={(e) => e.stopPropagation()} >

Введите название карточки

setValueTiket(e.target.value)} + className="name-project" + value={valueColl} + onChange={(e) => setValueColl(e.target.value)} >
-
+
+ setModalCreateColl(true)} + > + + + +

добавить задачу в проект

+
+
+ avatar + avatar + +9 + + +

добавить участника в проект

+
+
+ Учавствую + arrow +
+
+ Мои + arrow +
+
setProjectTasksOpen(false)}> +

Вернуться на проекты

+ arrow +
+
+
-
- {tabTaskMok.map((section, wrapperIndex) => { - return ( -
+ +
setModalCreateTiket(false)} + > +
e.stopPropagation()} + > +
+

Введите название карточки

+
+ setValueTiket(e.target.value)} + > +
+
+ +
+
+ +
+ {tabTaskMok.map((section, wrapperIndex) => { + return ( +
dragOverHandler(e)} onDragEnter={(e) => dragEnterHandler(wrapperIndex)} onDrop={(e) => dragDropHandler(e, wrapperIndex)} className={`tasks__board ${ - section.tasks.length >= 3 ? "tasks__board__more" : "" + section.tasks.length >= 3 ? "tasks__board__more" : "" } ${ - wrapperHover[wrapperIndex] - ? "tasks__board__hover" - : "" + wrapperHover[wrapperIndex] + ? "tasks__board__hover" + : "" }`} - > -
+ > +
{section.name} -
+
- selectedTabTask( - e, - wrapperIndex, - section.name, - section.tasks - ) - } + className="add" + onClick={(e) => + selectedTabTask( + e, + wrapperIndex, + section.name, + section.tasks + ) + } > + - ... -
+ ...
- {section.tasks.map((task, index) => { - if (index > 2) { - if (!section.open) { - return; - } +
+ {section.tasks.map((task, index) => { + if (index > 2) { + if (!section.open) { + return; } - return ( + } + return (
- dragStartHandler(e, task, wrapperIndex) - } - onDragEnd={(e) => dragEndHandler(e)} - onClick={() => setModalActiveTicket(true)} + key={index} + className="tasks__board__item" + draggable={true} + onDragStart={(e) => + dragStartHandler(e, task, wrapperIndex) + } + onDragEnd={(e) => dragEndHandler(e)} + onClick={() => setModalActiveTicket(true)} >

{task.task}

@@ -620,59 +778,132 @@ export const Tracker = () => {
- ); - })} - {section.tasks.length > 3 && ( + ); + })} + {section.tasks.length > 3 && ( toggleMoreTasks(wrapperIndex)} + className={ + section.open + ? "lessItems openItems" + : "moreItems openItems" + } + onClick={() => toggleMoreTasks(wrapperIndex)} > {section.open ? "-" : "+"} - )} + )} +
+ ); + })} +
+
+
+
+

Список всех задач

+
+ search + filterArchiveTasks(event)} + /> +
+
+
+ {allTasks.map((task, index) => { + return( +
+
+
{task.name}
+

{task.description}

+
+
+ avatar +
+

{task.project}

+ {task.dateComplete} +
+
- ); - })} + ) + }) + } +
+
+
+
+
+

Архив задач:

+

{filterCompleteTasks.length} задач(а)

+
+ search + filterArchiveTasks(event)} + />
-
-
-

Архив:

-

{filterCompleteTasks.length} задач(а)

-
- filterArchiveTasks(event)} - /> - search -
-
-
- {filterCompleteTasks.map((task, index) => { +
+ {Boolean(filterCompleteTasks.length) ? + filterCompleteTasks.map((task, index) => { return ( -
-
-

{task.description}

-

{task.dateComplete}

+
+
+

{task.description}

+

{task.dateComplete}

+
+
+ avatar +
+ Проект +

{task.project}

+
+
-
- avatar -

{task.name}

-
-
); - })} -
+ }) + : +
+

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

+
+ } +
+
+
+
+

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

+

{archiveProjects.length} проект(ов)

+
+
+ {Boolean(archiveProjects) ? + archiveProjects.map((project, index) => { + return ( +
+
+

{project.name}

+

{project.date}

+
+
+ ) + }) + : +
+

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

+
+ }
diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index 29793249..e587fd55 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -30,46 +30,81 @@ font-weight: 700; font-size: 22px; line-height: 32px; - margin-bottom: 15px; + margin-bottom: 27px; } &__tabs { display: flex; + flex-direction: column; &__head { - width: 150px; + display: flex; + max-width: 1160px; + width: 100%; + background: #E1FCCF; + border-radius: 12px; + margin: 0 auto; + position: relative; + height: 60px; } .tab { display: flex; padding: 12px 40px 15px 19px; cursor: pointer; + align-items: center; + + @media (max-width: 490px) { + padding: 8px 20px 8px 14px; + } + + @media (max-width: 370px) { + padding: 5px 15px 5px 10px; + } p { - margin: 0 0 0 15px; font-weight: 400; font-size: 16px; line-height: 32px; - color: #000000; + margin: 0 0 0 14px; + + @media (max-width: 490px) { + font-size: 13px; + white-space: nowrap; + } } } .active-tab { background: white; - border-radius: 15px 0 0 15px; + border-radius: 12px 12px 5px 5px; + position: relative; + height: 70px; + display: flex; + top: -10px; + align-items: center; + + p { + font-weight: 600; + } + + img { + filter: invert(0%) sepia(0%) saturate(2411%) hue-rotate(-25deg) brightness(118%) contrast(119%); + } } &__content { - width: calc(132% - 150px); + width: 100%; + background: #ffffff; + padding: 27px 0 29px; - @media (max-width: 1890px) { - width: calc(100% - 150px); + &__wrapper { + max-width: 1160px; + width: 100%; + margin: 0 auto; } &__projects { - background: #ffffff; - border-radius: 0 12px 12px 12px; - padding: 26px 24px 40px; flex-wrap: wrap; column-gap: 34px; row-gap: 30px; @@ -90,6 +125,7 @@ border-radius: 12px; padding: 17px 26px 16px; cursor: pointer; + max-width: 440px; @media (max-width: 1068px) { width: 47%; @@ -168,25 +204,83 @@ } } - button { - background: #52b709; - border-radius: 44px; - max-width: 188px; - height: 50px; + .no-projects { + display: flex; + flex-direction: column; + padding: 20px; width: 100%; - border: none; - font-weight: 400; - font-size: 15px; - line-height: 32px; - color: #ffffff; + + &__createNew { + display: flex; + div { + display: flex; + align-items: center; + margin-right: 35px; + + p { + font-weight: 700; + font-size: 22px; + line-height: 32px; + color: #000000; + margin-left: 17px; + } + } + button { + + } + } + + &__info { + margin-top: 27px; + font-weight: 400; + font-size: 14px; + line-height: 22px; + } + } + + .createProjectBtn { + background: #52b709; + border-radius: 44px; + max-width: 188px; + height: 50px; + width: 100%; + border: none; + font-weight: 400; + font-size: 15px; + line-height: 32px; + color: #ffffff; + display: flex; + align-items: center; + justify-content: center; + + span { + margin-right: 9px; + font-weight: 700; + font-size: 18px; + } + } + + .create-newProject { display: flex; align-items: center; - justify-content: center; - span { - margin-right: 9px; - font-weight: 700; - font-size: 18px; + @media (max-width: 450px) { + flex-direction: column; + row-gap: 15px; + } + + p { + margin-left: 32px; + font-weight: 400; + font-size: 14px; + line-height: 22px; + max-width: 214px; + + @media (max-width: 450px) { + max-width: none; + margin-left: 0; + text-align: center; + } } } } @@ -195,61 +289,60 @@ display: none; background: #ffffff; border-radius: 12px; - padding: 13px 23px 65px; flex-direction: column; - overflow-x: scroll; - - &::-webkit-scrollbar { - width: 2px; - border-radius: 10px; - height: 8px; - } - - &::-webkit-scrollbar-track { - background: #d9e1e9; - } - - &::-webkit-scrollbar-thumb { - background: #d6d3d3; - border-radius: 40px; - } } .tasks { &__head { - display: flex; border-bottom: 1px solid #dde2e4; - padding: 0 25px 15px; - align-items: center; - width: 1525px; + padding: 0 35px 15px; + + &__wrapper { + display: flex; + max-width: 1160px; + margin: 0 auto; + justify-content: space-between; + padding: 0 10px; + align-items: center; + } h4 { - color: #111112; + color: #1458DD; font-weight: 700; - font-size: 18px; + font-size: 22px; line-height: 32px; margin-bottom: 0; } &__add { - width: 33px; - height: 33px; - background: #52b709; - border-radius: 44px; - color: whitesmoke; - cursor: pointer; - font-size: 15px; display: flex; - align-items: center; - justify-content: center; - margin: 0 100px 0 55px; + span { + width: 33px; + height: 33px; + background: #52b709; + border-radius: 44px; + color: whitesmoke; + cursor: pointer; + font-size: 15px; + display: flex; + align-items: center; + justify-content: center; + } + + p { + margin-left: 14px; + font-weight: 300; + font-size: 14px; + line-height: 17px; + max-width: 120px; + } } &__persons { position: relative; display: flex; cursor: pointer; - margin-right: 57px; + align-items: center; img { position: relative; @@ -257,40 +350,51 @@ height: 32px; } - img:nth-child(1) { - right: -32px; - } - img:nth-child(2) { - right: -24px; - } - - img:nth-child(3) { - right: -16px; - } - - img:nth-child(4) { - right: -8px; + right: 12px; } span { - color: #252c32; + width: 32px; + height: 32px; font-weight: 500; font-size: 12px; line-height: 16px; - display: flex; - width: 32px; - height: 32px; - border: 1px solid #dde2e4; border-radius: 50px; align-items: center; justify-content: center; + position: relative; + display: flex; + } + + .countPersons { + color: #252c32; + border: 1px solid #dde2e4; + background: white; + left: -25px; + z-index: 2; + } + + .addPerson { + background: #00C5A8; + color: white; + font-size: 14px; + left: -35px; + z-index: 1; + } + + p { + position: relative; + left: -25px; + font-weight: 300; + font-size: 14px; + line-height: 17px; + max-width: 125px; } } &__select { cursor: pointer; - margin-right: 40px; img { margin-left: 18px; @@ -302,13 +406,47 @@ line-height: 24px; } } + + &__back { + cursor: pointer; + display: flex; + align-items: center; + + p { + font-weight: 400; + font-size: 14px; + line-height: 17px; + } + + img { + margin-left: 10px; + width: 20px; + } + } } &__container { - padding: 30px 25px 0; + padding: 30px 25px 30px; display: flex; column-gap: 25px; - width: 1525px; + margin: 0 auto; + overflow: auto; + max-width: 100%; + + &::-webkit-scrollbar { + height: 8px; + border-radius: 10px; + } + + &::-webkit-scrollbar-thumb { + background: #cbd9f9; + border-radius: 20px; + } + + &::-webkit-scrollbar-track { + background: #c5c0c6; + border-radius: 20px; + } } &__board { @@ -479,54 +617,203 @@ display: flex; } - &__archive { - background: white; - border-radius: 12px; - padding: 26px 24px 40px; - min-height: 774px; + &__allTasks { + max-width: 1160px; + padding: 0 20px; + margin: 0 auto; display: flex; flex-direction: column; + .taskList { + &__head { + display: flex; + justify-content: space-between; + width: 100%; + align-items: center; + padding-bottom: 8px; + + @media (max-width: 550px) { + flex-direction: column; + row-gap: 10px; + align-items: start; + } + h3 { + font-weight: 700; + font-size: 18px; + line-height: 32px; + margin-bottom: 0; + color: #1458DD; + + @media (max-width: 590px) { + font-size: 15px; + } + } + + &__search { + margin-left: auto; + padding: 6px 12px; + display: flex; + align-items: center; + background: #FFFFFF; + border: 1px solid #DDE2E4; + box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); + border-radius: 6px; + max-width: 450px; + width: 100%; + + @media (max-width: 690px) { + max-width: 350px; + } + + @media (max-width: 550px) { + max-width: none; + margin-left: inherit; + } + + img { + width: 14px; + } + + input { + width: 100%; + padding-left: 10px; + outline: none; + border: none; + font-weight: 400; + font-size: 14px; + line-height: 24px; + } + } + } + + &__wrapper { + margin-top: 10px; + display: flex; + flex-direction: column; + row-gap: 15px; + max-height: 400px; + overflow-y: auto; + margin-right: -16px; + padding-right: 10px; + + &::-webkit-scrollbar { + width: 4px; + background: 0 0; + box-shadow: 0 0 14px rgba(0, 0, 0, 0.04); + border-radius: 20px; + } + + &::-webkit-scrollbar { + width: 4px; + border-radius: 20px; + } + + &::-webkit-scrollbar-thumb { + background: #cbd9f9; + border-radius: 20px; + } + + &::-webkit-scrollbar-track { + background: #c5c0c6; + border-radius: 20px; + } + + .task { + display: flex; + background: #F1F1F1; + border-radius: 12px; + padding: 12px 42px 7px 32px; + justify-content: space-between; + cursor: pointer; + + &__info { + display: flex; + flex-direction: column; + + h5 { + font-weight: 700; + font-size: 20px; + line-height: 24px; + margin-bottom: 0; + } + + p { + font-size: 16px; + line-height: 32px; + max-width: 400px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } + + &__person { + display: flex; + align-items: center; + + img { + width: 40px; + } + } + + &__project { + display: flex; + flex-direction: column; + margin-left: 20px; + + p { + font-size: 16px; + font-weight: 500; + } + + span { + font-size: 14px; + } + } + } + } + } + } + + &__archive { + max-width: 1160px; + padding: 0 20px; + margin: 0 auto; + display: flex; + column-gap: 28px; + + @media (max-width: 880px) { + flex-direction: column; + row-gap: 20px; + } + .archive { &__title { padding-bottom: 8px; - border-bottom: 1px solid #dde2e4; display: flex; align-items: center; + color: #1458DD; + min-height: 48px; h3 { - color: #111112; font-weight: 700; - font-size: 16px; + font-size: 18px; line-height: 32px; margin-bottom: 0; + + @media (max-width: 590px) { + font-size: 15px; + } } p { margin: 0 0 0 10px; - font-weight: 500; - font-size: 14px; - } - } + font-weight: 300; + font-size: 18px; - &__search { - border: 2px solid; - border-color: var(--ds-border-input, #dfe1e6); - margin-left: auto; - padding: 5px; - display: flex; - align-items: center; - - input { - outline: none; - border: none; - font-size: 16px; - font-weight: 500; - } - - img { - width: 20px; - height: 20px; + @media (max-width: 590px) { + font-size: 15px; + } } } @@ -534,8 +821,8 @@ margin-top: 10px; display: flex; flex-direction: column; - row-gap: 3px; - max-height: 649px; + row-gap: 15px; + max-height: 400px; overflow-y: auto; margin-right: -16px; padding-right: 10px; @@ -566,17 +853,26 @@ &__completeTask { display: flex; justify-content: space-between; - border: 1px solid var(--ds-border, #dfe1e6); - padding: 8px 10px; cursor: pointer; transition: all 0.3s ease; + background: #F1F1F1; + border-radius: 12px; + padding: 12px 42px 7px 32px; &:hover { background: var(--ds-background-neutral-subtle-hovered, #f4f5f7); } p { + max-width: 250px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; margin-bottom: 0; + color: #111112; + font-weight: 700; + font-size: 16px; + line-height: 32px; } &__description { @@ -584,8 +880,10 @@ font-weight: 500; .date { - font-weight: 400; - font-size: 12px; + font-weight: 500; + font-size: 10px; + line-height: 24px; + color: #6F6F6F; } } @@ -594,18 +892,102 @@ align-items: center; img { - width: 36px; - height: 36px; + width: 32px; + height: 32px; } - p { - margin-left: 10px; - text-decoration: line-through; - font-size: 11px; - font-weight: 500; + &__project { + margin-left: 17px; + span { + color: #807777; + font-weight: 500; + font-size: 10px; + } + p { + color: #1A1919; + font-weight: 500; + font-size: 14px; + line-height: 24px; + text-decoration: line-through; + } } } } + + &__tasks { + min-height: 400px; + max-height: 450px; + padding-right: 15px; + width: 65%; + overflow: hidden; + + @media (max-width: 880px) { + width: 100%; + } + + &__search { + margin-left: auto; + padding: 6px 12px; + display: flex; + align-items: center; + background: #FFFFFF; + border: 1px solid #DDE2E4; + box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); + border-radius: 6px; + max-width: 300px; + width: 100%; + + @media (max-width: 590px) { + max-width: 230px; + } + + @media (max-width: 500px) { + max-width: 150px; + } + + input { + width: 100%; + padding-left: 10px; + outline: none; + border: none; + font-weight: 400; + font-size: 14px; + line-height: 24px; + } + + img { + width: 14px; + height: 14px; + } + } + } + + &__projects { + display: flex; + flex-direction: column; + width: 33%; + min-height: 400px; + max-height: 450px; + padding-right: 15px; + + @media (max-width: 880px) { + width: 100%; + } + } + + &__noItem { + background: #F1F1F1; + border-radius: 12px; + padding: 23px 0 19px; + + p { + font-weight: 700; + font-size: 22px; + line-height: 32px; + color: #111112; + text-align: center; + } + } } } }