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 041aa55b..a994609f 100644 --- a/src/components/SliderWorkers/SliderWorkers.js +++ b/src/components/SliderWorkers/SliderWorkers.js @@ -30,11 +30,14 @@ export const SliderWorkers = ({title, titleInfo, subTitle}) => { skils: "React / Vue Front end, Middle разработчик", }, ]); + const settings = { infinite: true, - speed: 300, + speed: 1000, slidesToShow: 3, slidesToScroll: 1, + autoplay: true, + autoplaySpeed: 4500, }; if (window.innerWidth < 575) { @@ -54,9 +57,9 @@ export const SliderWorkers = ({title, titleInfo, subTitle}) => { : "" } - {workers.map((worker) => { + {workers.map((worker, index) => { return ( -
+

{worker.skils}

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/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/images/noProjects.png b/src/images/noProjects.png new file mode 100644 index 00000000..87579da2 Binary files /dev/null and b/src/images/noProjects.png differ diff --git a/src/images/serchIcon.png b/src/images/serchIcon.png new file mode 100644 index 00000000..66fb7d5d Binary files /dev/null and b/src/images/serchIcon.png differ diff --git a/src/index.css b/src/index.css index 8c63964a..cc8e27fb 100644 --- a/src/index.css +++ b/src/index.css @@ -26,6 +26,10 @@ h1 { position: relative !important; } +p { + margin-bottom: 0; +} + @media (max-width: 568px) { .col-xs-12 { width: 100% !important; diff --git a/src/pages/AuthForDevelopers/AuthForDevelopers.js b/src/pages/AuthForDevelopers/AuthForDevelopers.js index 5f40f25a..eb1b027c 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 4a9751aa..044596ad 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 175a039e..8ab9a655 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.js @@ -4,6 +4,9 @@ import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader"; import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"; 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"; @@ -14,28 +17,14 @@ import avatarTest from "../../images/AvatarTest .png"; import selectArrow from "../../images/select.svg"; import commentsBoard from "../../images/commentsBoard.svg"; import filesBoard from "../../images/filesBoard.svg"; -import search from "../../images/search.svg"; +import search from "../../images/serchIcon.png"; +import noProjects from "../../images/noProjects.png" +import arrow from '../../images/arrowCalendar.png' 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: "Открытые", @@ -144,110 +133,245 @@ 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: "Будущее России" }, ]); 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 [valueColl, setValueColl] = useState(""); + // + + const [projectTasksOpen, setProjectTasksOpen] = useState(false) + + const [selectedTab, setSelectedTab] = useState({ + name: "", + indexTab: 0, + task: [], + }); const [startWrapperIndex, setStartWrapperIndex] = useState(null); const [wrapperHover, setWrapperHover] = useState([ @@ -258,9 +382,11 @@ export const Tracker = () => { ]); const projects = useSelector(getProjects); - const dispatch = useDispatch(); const toggleTabs = (index) => { + if (projectTasksOpen) { + setProjectTasksOpen(false) + } setToggleTab(index); }; @@ -357,8 +483,42 @@ 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); + setValueTiket(""); + } + + function createTab() { + let newTab = { + name: valueColl, + open: false, + tasks: [], + }; + + tabTaskMok.unshift(newTab); + setValueColl(""); + setModalCreateColl(false); } return ( @@ -371,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}

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

@@ -414,103 +582,183 @@ export const Tracker = () => { +
- ); - })} - - +
+

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

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

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

-
+
-
- -

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

- setModalCreateColl(true)} + } + > +
+
+

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

+
setModalCreateColl(false)} + > +
e.stopPropagation()} > - + - -
- avatar - avatar - avatar - avatar - +9 -
-
- Учавствую - arrow -
-
- Мои - arrow +
+

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

+
+ 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 + ) + } + > + + + + ...
- {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}

- ...

{task.description} @@ -530,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 20251100..e587fd55 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; } } @@ -30,47 +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; @@ -87,10 +121,11 @@ .project { width: 48%; - background: #F1F1F1; + background: #f1f1f1; border-radius: 12px; padding: 17px 26px 16px; cursor: pointer; + max-width: 440px; @media (max-width: 1068px) { width: 47%; @@ -122,7 +157,7 @@ } p { - color: #6F6F6F; + color: #6f6f6f; font-weight: 500; font-size: 12px; line-height: 24px; @@ -136,16 +171,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 +190,10 @@ } &:after { - content: '...'; + content: "..."; position: absolute; font-size: 21px; - color: #6F6F6F; + color: #6f6f6f; right: 0; top: -35%; @@ -169,89 +204,145 @@ } } - 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; + } } } } &__tasks { display: none; - background: #FFFFFF; + 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; + border-bottom: 1px solid #dde2e4; + 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; @@ -259,63 +350,110 @@ 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; } span { - color: #252C32; + color: #252c32; font-weight: 400; font-size: 14px; 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 { - 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 +464,21 @@ 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 { + width: 328px; + height: 154px; 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 +488,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 +508,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 +532,7 @@ font-weight: 500; font-size: 12px; line-height: 15px; - color: #6E7C87; + color: #6e7c87; margin-left: 5px; } } @@ -422,7 +566,7 @@ } .moreItems { - background: #8BCC60; + background: #8bcc60; } .lessItems { @@ -439,8 +583,10 @@ position: relative; display: flex; justify-content: space-between; + min-width: 300px; + span { - color: #6F6F6F; + color: #6f6f6f; font-weight: 500; font-size: 16px; line-height: 24px; @@ -448,7 +594,7 @@ } .add { - color: #6F6F6F; + color: #6f6f6f; font-size: 19px; } @@ -471,63 +617,81 @@ 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; - .archive { - &__title { - padding-bottom: 8px; - border-bottom: 1px solid #DDE2E4; + .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 { - color: #111112; font-weight: 700; - font-size: 16px; + font-size: 18px; line-height: 32px; margin-bottom: 0; + color: #1458DD; + + @media (max-width: 590px) { + font-size: 15px; + } } - p { - margin: 0 0 0 10px; - font-weight: 500; - font-size: 14px; + &__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; + } } } - &__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; - } - } - - &__tasksWrapper { + &__wrapper { 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; @@ -535,7 +699,138 @@ &::-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; + } + + &::-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; + display: flex; + align-items: center; + color: #1458DD; + min-height: 48px; + + h3 { + font-weight: 700; + font-size: 18px; + line-height: 32px; + margin-bottom: 0; + + @media (max-width: 590px) { + font-size: 15px; + } + } + + p { + margin: 0 0 0 10px; + font-weight: 300; + font-size: 18px; + + @media (max-width: 590px) { + font-size: 15px; + } + } + } + + &__tasksWrapper { + 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; } @@ -558,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); + 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 { @@ -576,8 +880,10 @@ font-weight: 500; .date { - font-weight: 400; - font-size: 12px; + font-weight: 500; + font-size: 10px; + line-height: 24px; + color: #6F6F6F; } } @@ -586,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; + } + } } } }