From a21063663cbb41740b23e30793c0125ffbfe0c1c Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Thu, 23 Mar 2023 21:18:48 +0300 Subject: [PATCH 1/4] Fixed modal --- src/components/SliderWorkers/SliderWorkers.js | 5 +- src/components/UI/ModalTiket/ModalTiket.js | 7 +- src/components/UI/ModalTiket/ModalTiket.scss | 18 +++++ src/pages/Tracker/Tracker.js | 22 +---- src/pages/Tracker/tracker.scss | 80 ++++++++++--------- 5 files changed, 73 insertions(+), 59 deletions(-) diff --git a/src/components/SliderWorkers/SliderWorkers.js b/src/components/SliderWorkers/SliderWorkers.js index 18b58b82..8d1385af 100644 --- a/src/components/SliderWorkers/SliderWorkers.js +++ b/src/components/SliderWorkers/SliderWorkers.js @@ -30,6 +30,7 @@ export const SliderWorkers = ({}) => { skils: "React / Vue Front end, Middle разработчик", }, ]); + const settings = { infinite: true, speed: 300, @@ -52,9 +53,9 @@ export const SliderWorkers = ({}) => { - {workers.map((worker) => { + {workers.map((worker, index) => { return ( -
+

{worker.skils}

diff --git a/src/components/UI/ModalTiket/ModalTiket.js b/src/components/UI/ModalTiket/ModalTiket.js index 6b74aed0..eb62a34a 100644 --- a/src/components/UI/ModalTiket/ModalTiket.js +++ b/src/components/UI/ModalTiket/ModalTiket.js @@ -17,7 +17,7 @@ export const ModalTiket = ({ active, setActive }) => { code: "PR - 2245", creator: "Василий Тарасов", descriptions: - "На многих страницах сайта отсутствуют или некорректно заполнены метатеги Description. Это может негативно повлиять на представление сайта в результатах поиска.Необходимо исправить все страницы где есть ошибки или отсутствует Title и Description.", + "На многих страницах сайта отсутствуют или некорректно заполнены метатеги Description. Это может негативно повлиять на представление сайта в результатах поиска. Необходимо исправить все страницы где есть ошибки или отсутствует Title и Description.", }); const [workers] = useState([ @@ -44,7 +44,12 @@ export const ModalTiket = ({ active, setActive }) => {

Проект: {tiket.name} +
+

Редактировать

+

Удалить

+

+
{tiket.code}
diff --git a/src/components/UI/ModalTiket/ModalTiket.scss b/src/components/UI/ModalTiket/ModalTiket.scss index 36aaf5c8..cd9974f2 100644 --- a/src/components/UI/ModalTiket/ModalTiket.scss +++ b/src/components/UI/ModalTiket/ModalTiket.scss @@ -39,6 +39,24 @@ &__category { margin-right: 17px; } + + &__menu { + display: flex; + align-items: center; + margin-left: 110px; + + p { + font-weight: 400; + font-size: 14px; + color: #252c32; + margin: 0 30px 0 0; + + &:hover { + cursor: pointer; + text-decoration: underline; + } + } + } } &__task { diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js index bcb337af..7410e264 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.js @@ -3,6 +3,9 @@ import React, { useState } from "react"; import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader"; import { Footer } from "../../components/Footer/Footer"; +import { useDispatch, useSelector } from "react-redux"; +import { getProjects } from "../../redux/projectsTrackerSlice"; + import ModalTiket from "../../components/UI/ModalTiket/ModalTiket"; import ModalCreate from "../../components/UI/ModalCreate/ModalCreate"; @@ -16,25 +19,10 @@ import filesBoard from "../../images/filesBoard.svg"; import search from "../../images/search.svg"; import "./tracker.scss"; -import { useDispatch, useSelector } from "react-redux"; -import { getProjects } from "../../redux/projectsTrackerSlice"; export const Tracker = () => { const [toggleTab, setToggleTab] = useState(1); - // const [projects] = useState([ - // { - // name: "Разработка трекера", - // count: 4, - // }, - // { - // name: "Кинотеатр", - // count: 4, - // }, - // { - // name: "Проект страхование", - // count: 4, - // }, - // ]); + const [tabTaskMok, setTabTaskMok] = useState([ { name: "Открытые", @@ -257,7 +245,6 @@ export const Tracker = () => { ]); const projects = useSelector(getProjects); - const dispatch = useDispatch(); const toggleTabs = (index) => { setToggleTab(index); @@ -504,7 +491,6 @@ export const Tracker = () => { >

{task.task}

- ...

{task.description} diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index 3425de47..f77f2df1 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -1,5 +1,5 @@ .tracker { - background: #F1F1F1; + background: #f1f1f1; height: 100%; min-height: 100vh; font-family: "LabGrotesque", sans-serif; @@ -22,7 +22,7 @@ margin-top: 70px; .row { - margin-right: 0px + margin-right: 0px; } } @@ -66,9 +66,8 @@ width: calc(100% - 150px); } - &__projects { - background: #FFFFFF; + background: #ffffff; border-radius: 0 12px 12px 12px; padding: 26px 24px 40px; flex-wrap: wrap; @@ -87,7 +86,7 @@ .project { width: 48%; - background: #F1F1F1; + background: #f1f1f1; border-radius: 12px; padding: 17px 26px 16px; cursor: pointer; @@ -122,7 +121,7 @@ } p { - color: #6F6F6F; + color: #6f6f6f; font-weight: 500; font-size: 12px; line-height: 24px; @@ -136,16 +135,16 @@ display: flex; align-items: center; justify-content: center; - background: #DDDDDD; + background: #dddddd; border-radius: 4px; font-weight: 500; font-size: 14px; line-height: 24px; - color: #6F6F6F; + color: #6f6f6f; } .add { - color: #6F6F6F; + color: #6f6f6f; font-size: 17px; margin: 0 25px 0 auto; @@ -155,10 +154,10 @@ } &:after { - content: '...'; + content: "..."; position: absolute; font-size: 21px; - color: #6F6F6F; + color: #6f6f6f; right: 0; top: -35%; @@ -170,7 +169,7 @@ } button { - background: #52B709; + background: #52b709; border-radius: 44px; max-width: 188px; height: 50px; @@ -179,7 +178,7 @@ font-weight: 400; font-size: 15px; line-height: 32px; - color: #FFFFFF; + color: #ffffff; display: flex; align-items: center; justify-content: center; @@ -194,7 +193,7 @@ &__tasks { display: none; - background: #FFFFFF; + background: #ffffff; border-radius: 12px; padding: 13px 23px 65px; flex-direction: column; @@ -217,10 +216,9 @@ } .tasks { - &__head { display: flex; - border-bottom: 1px solid #DDE2E4; + border-bottom: 1px solid #dde2e4; padding: 0 25px 15px; align-items: center; width: 1525px; @@ -236,7 +234,7 @@ &__add { width: 33px; height: 33px; - background: #52B709; + background: #52b709; border-radius: 44px; color: whitesmoke; cursor: pointer; @@ -276,14 +274,14 @@ } span { - color: #252C32; + color: #252c32; font-weight: 500; font-size: 12px; line-height: 16px; display: flex; width: 32px; height: 32px; - border: 1px solid #DDE2E4; + border: 1px solid #dde2e4; border-radius: 50px; align-items: center; justify-content: center; @@ -298,7 +296,7 @@ margin-left: 18px; } span { - color: #252C32; + color: #252c32; font-weight: 400; font-size: 14px; line-height: 24px; @@ -314,8 +312,10 @@ } &__board { - background: #F5F7F9; - box-shadow: 0px 2px 5px rgba(60, 66, 87, 0.04), 0px 0px 0px 1px rgba(60, 66, 87, 0.08), 0px 1px 1px rgba(0, 0, 0, 0.06); + background: #f5f7f9; + box-shadow: 0px 2px 5px rgba(60, 66, 87, 0.04), + 0px 0px 0px 1px rgba(60, 66, 87, 0.08), + 0px 1px 1px rgba(0, 0, 0, 0.06); border-radius: 8px; padding: 16px 14px 16px 8px; width: 350px; @@ -326,17 +326,19 @@ position: relative; transition: all 0.3s ease; - &__hover { - box-shadow: 0px 2px 10px #9cc480, 0px 0px 0px 1px rgba(60, 66, 87, 0.08), 0px 1px 1px rgba(0, 0, 0, 0.06); + box-shadow: 0px 2px 10px #9cc480, + 0px 0px 0px 1px rgba(60, 66, 87, 0.08), + 0px 1px 1px rgba(0, 0, 0, 0.06); } &__item { padding: 16px; position: relative; - box-shadow: 0px 3px 2px -2px rgba(0, 0, 0, 0.06), 0px 5px 3px -2px rgba(0, 0, 0, 0.02); + box-shadow: 0px 3px 2px -2px rgba(0, 0, 0, 0.06), + 0px 5px 3px -2px rgba(0, 0, 0, 0.02); border-radius: 6px; - background: #FFFFFF; + background: #ffffff; cursor: pointer; &__hide { @@ -346,8 +348,10 @@ &__title { display: flex; justify-content: space-between; + position: relative; + p { - color: #1A1919; + color: #1a1919; font-weight: 500; font-size: 16px; line-height: 24px; @@ -364,13 +368,13 @@ padding-bottom: 13px; width: 24px; height: 24px; - border: 1px solid #DDDDDD; + border: 1px solid #dddddd; } } &__description { margin: 8px 0 15px; - color: #5C6165; + color: #5c6165; font-weight: 400; font-size: 14px; line-height: 140%; @@ -388,7 +392,7 @@ font-weight: 500; font-size: 12px; line-height: 15px; - color: #6E7C87; + color: #6e7c87; margin-left: 5px; } } @@ -422,7 +426,7 @@ } .moreItems { - background: #8BCC60; + background: #8bcc60; } .lessItems { @@ -440,7 +444,7 @@ display: flex; justify-content: space-between; span { - color: #6F6F6F; + color: #6f6f6f; font-weight: 500; font-size: 16px; line-height: 24px; @@ -448,7 +452,7 @@ } .add { - color: #6F6F6F; + color: #6f6f6f; font-size: 19px; } @@ -482,7 +486,7 @@ .archive { &__title { padding-bottom: 8px; - border-bottom: 1px solid #DDE2E4; + border-bottom: 1px solid #dde2e4; display: flex; align-items: center; @@ -503,7 +507,7 @@ &__search { border: 2px solid; - border-color: var(--ds-border-input, #DFE1E6); + border-color: var(--ds-border-input, #dfe1e6); margin-left: auto; padding: 5px; display: flex; @@ -535,7 +539,7 @@ &::-webkit-scrollbar { width: 4px; background: 0 0; - box-shadow: 0 0 14px rgba(0,0,0,.04); + box-shadow: 0 0 14px rgba(0, 0, 0, 0.04); border-radius: 20px; } @@ -558,13 +562,13 @@ &__completeTask { display: flex; justify-content: space-between; - border: 1px solid var(--ds-border,#dfe1e6); + border: 1px solid var(--ds-border, #dfe1e6); padding: 8px 10px; cursor: pointer; transition: all 0.3s ease; &:hover { - background: var(--ds-background-neutral-subtle-hovered,#f4f5f7); + background: var(--ds-background-neutral-subtle-hovered, #f4f5f7); } p { From fc51fbdb096ccaca7c8f7b5d51ada4256c9130bd Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Fri, 24 Mar 2023 19:26:27 +0300 Subject: [PATCH 2/4] Added func create new tiket --- src/pages/Tracker/Tracker.js | 78 ++++++++++++++++++++++++++++++++++-- 1 file changed, 74 insertions(+), 4 deletions(-) diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js index 7410e264..51c63cce 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.js @@ -232,9 +232,19 @@ export const Tracker = () => { const [filterCompleteTasks, setFilterCompleteTasks] = useState(completeTasks); + // Modal State const [modalActiveTicket, setModalActiveTicket] = useState(false); const [modalCreateProject, setModalCreateProject] = useState(false); const [modalCreateColl, setModalCreateColl] = useState(false); + const [modalCreateTiket, setModalCreateTiket] = useState(false); + const [valueTiket, setValueTiket] = useState(""); + // + + const [selectedTab, setSelectedTab] = useState({ + name: "", + indexTab: 0, + task: [], + }); const [startWrapperIndex, setStartWrapperIndex] = useState(null); const [wrapperHover, setWrapperHover] = useState([ @@ -343,8 +353,29 @@ export const Tracker = () => { ); } - function createProject() { - setModalCreateProject(true); + function selectedTabTask(e, wrapperIndex, name, tasks) { + let tab = { name: name, indexTab: wrapperIndex, task: tasks }; + setSelectedTab(tab); + setModalCreateTiket(true); + } + + function createTiket() { + tabTaskMok.filter((item) => { + if (item.name == selectedTab.name) { + let newTiket = { + task: valueTiket, + description: "Сверстать часть таблицы. Сверстать часть таблицы", + comments: 0, + files: 0, + avatarCreated: avatarTest, + avatarDo: avatarTest, + id: item.tasks.length + 1, + }; + + item.tasks.push(newTiket); + } + }); + setModalCreateTiket(false); } return ( @@ -402,7 +433,7 @@ export const Tracker = () => { setActive={setModalCreateProject} title={"Укажите название проекта:"} /> -

@@ -442,11 +473,38 @@ export const Tracker = () => { arrow
+ +
setModalCreateTiket(false)} + > +
e.stopPropagation()} + > +
+

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

+
+ setValueTiket(e.target.value)} + > +
+
+ +
+
+
{tabTaskMok.map((section, wrapperIndex) => { return ( @@ -468,7 +526,19 @@ export const Tracker = () => { {section.name}
- + + + selectedTabTask( + e, + wrapperIndex, + section.name, + section.tasks + ) + } + > + + + ...
From 76334aec99b324f7176dcf5c998f90ff2d5bc564 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Mon, 27 Mar 2023 19:08:01 +0300 Subject: [PATCH 3/4] Fixed auth page and tracker --- src/components/SideBar/sidebar.scss | 9 +++- src/components/SliderWorkers/SliderWorkers.js | 4 +- src/components/UI/ModalCreate/ModalCreate.js | 20 +++++---- .../AuthForDevelopers/AuthForDevelopers.js | 11 ++++- .../AuthForDevelopers/authForDevelopers.scss | 1 + src/pages/AuthForPartners/AuthForPartners.js | 11 ++++- .../AuthForPartners/authForPartners.scss | 2 + src/pages/Tracker/Tracker.js | 44 ++++++++++++++++--- src/pages/Tracker/tracker.scss | 4 ++ 9 files changed, 86 insertions(+), 20 deletions(-) diff --git a/src/components/SideBar/sidebar.scss b/src/components/SideBar/sidebar.scss index bb6591f5..7fdc5822 100644 --- a/src/components/SideBar/sidebar.scss +++ b/src/components/SideBar/sidebar.scss @@ -135,9 +135,10 @@ line-height: 32px; color: #000000; } + span { - font-size: 5px; - margin-left: 41px; + font-size: 12px; + margin-left: 0px; } } @@ -194,6 +195,10 @@ width: 424px; left: 140px; + @media (max-width: 1440px) { + left: 79px; + } + @media (max-width: 1024px) { left: 0; width: 100%; diff --git a/src/components/SliderWorkers/SliderWorkers.js b/src/components/SliderWorkers/SliderWorkers.js index 8d1385af..dd58feab 100644 --- a/src/components/SliderWorkers/SliderWorkers.js +++ b/src/components/SliderWorkers/SliderWorkers.js @@ -33,9 +33,11 @@ export const SliderWorkers = ({}) => { const settings = { infinite: true, - speed: 300, + speed: 1000, slidesToShow: 3, slidesToScroll: 1, + autoplay: true, + autoplaySpeed: 4500, }; if (window.innerWidth < 575) { diff --git a/src/components/UI/ModalCreate/ModalCreate.js b/src/components/UI/ModalCreate/ModalCreate.js index 04a2894c..c6fd5af0 100644 --- a/src/components/UI/ModalCreate/ModalCreate.js +++ b/src/components/UI/ModalCreate/ModalCreate.js @@ -1,6 +1,6 @@ import React, { useState } from "react"; import { useDispatch } from "react-redux"; -import { setProject } from "../../../redux/projectsTrackerSlice"; +import { setProject } from "../../../redux/projectsTrackerSlice"; import "./ModalCreate.scss"; @@ -9,13 +9,17 @@ export const ModalCreate = ({ active, setActive, title }) => { const dispatch = useDispatch(); function createName() { - let newItem = { - name: inputValue, - count: 0, - }; - dispatch(setProject(newItem)); - setActive(false); - setInputValue("") + if (inputValue === "") { + return; + } else { + let newItem = { + name: inputValue, + count: 0, + }; + dispatch(setProject(newItem)); + setActive(false); + setInputValue(""); + } } return ( diff --git a/src/pages/AuthForDevelopers/AuthForDevelopers.js b/src/pages/AuthForDevelopers/AuthForDevelopers.js index e3075654..f2e96efb 100644 --- a/src/pages/AuthForDevelopers/AuthForDevelopers.js +++ b/src/pages/AuthForDevelopers/AuthForDevelopers.js @@ -31,6 +31,13 @@ const AuthForDevelopers = () => { } }, [getToken]); + function scrollToForm() { + window.scrollTo({ + top: 850, + behavior: "smooth", + }); + } + return (
@@ -44,13 +51,13 @@ const AuthForDevelopers = () => { />
-
+
scrollToForm()}>
diff --git a/src/pages/AuthForDevelopers/authForDevelopers.scss b/src/pages/AuthForDevelopers/authForDevelopers.scss index 25b5d894..d41efce7 100644 --- a/src/pages/AuthForDevelopers/authForDevelopers.scss +++ b/src/pages/AuthForDevelopers/authForDevelopers.scss @@ -25,6 +25,7 @@ &__arrow { margin-top: 360px; + z-index: 99; } @media (max-width: 575.98px) { diff --git a/src/pages/AuthForPartners/AuthForPartners.js b/src/pages/AuthForPartners/AuthForPartners.js index aeabb704..24183f3e 100644 --- a/src/pages/AuthForPartners/AuthForPartners.js +++ b/src/pages/AuthForPartners/AuthForPartners.js @@ -30,6 +30,13 @@ const AuthForPartners = () => { } }, [getToken]); + function scrollToForm() { + window.scrollTo({ + top: 850, + behavior: "smooth", + }); + } + return (
@@ -39,13 +46,13 @@ const AuthForPartners = () => {
-
+
scrollToForm()}>
diff --git a/src/pages/AuthForPartners/authForPartners.scss b/src/pages/AuthForPartners/authForPartners.scss index acee7572..11929021 100644 --- a/src/pages/AuthForPartners/authForPartners.scss +++ b/src/pages/AuthForPartners/authForPartners.scss @@ -25,6 +25,7 @@ &__arrow { margin-top: 360px; + cursor: pointer; } @media (max-width: 575.98px) { @@ -286,6 +287,7 @@ align-items: center; &__arrow { + cursor: pointer; margin: 49px 0 43px 0; width: 48px; height: 48px; diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js index 51c63cce..7ce93de3 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.js @@ -238,6 +238,7 @@ export const Tracker = () => { const [modalCreateColl, setModalCreateColl] = useState(false); const [modalCreateTiket, setModalCreateTiket] = useState(false); const [valueTiket, setValueTiket] = useState(""); + const [valueColl, setValueColl] = useState(""); // const [selectedTab, setSelectedTab] = useState({ @@ -376,6 +377,19 @@ export const Tracker = () => { } }); setModalCreateTiket(false); + setValueTiket(""); + } + + function createTab() { + let newTab = { + name: valueColl, + open: false, + tasks: [], + }; + + tabTaskMok.unshift(newTab); + setValueColl(""); + setModalCreateColl(false); } return ( @@ -445,12 +459,32 @@ export const Tracker = () => { } >
-

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

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

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

+
+ setValueColl(e.target.value)} + > +
+
+ +
+
setModalCreateColl(true)} diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index f77f2df1..ca126279 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -333,6 +333,8 @@ } &__item { + width: 328px; + height: 154px; padding: 16px; position: relative; box-shadow: 0px 3px 2px -2px rgba(0, 0, 0, 0.06), @@ -443,6 +445,8 @@ position: relative; display: flex; justify-content: space-between; + min-width: 300px; + span { color: #6f6f6f; font-weight: 500; From 615606d3e63433397cc44f4d503aa3f8792dafe7 Mon Sep 17 00:00:00 2001 From: M1kola Date: Thu, 30 Mar 2023 15:07:05 +0300 Subject: [PATCH 4/4] 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; + } + } } } }