From 19865fb9e34290d27b1fdc620deeb41316e516c7 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Mon, 10 Apr 2023 21:22:22 +0300 Subject: [PATCH 1/6] Added new ModalAdd --- src/components/UI/ModalAdd/ModalAdd.js | 19 + src/components/UI/ModalAdd/modalAdd.scss | 100 +++ src/components/UI/ModalCreate/ModalCreate.js | 3 +- src/pages/Tracker/Tracker.js | 626 +++++++++---------- 4 files changed, 433 insertions(+), 315 deletions(-) create mode 100644 src/components/UI/ModalAdd/ModalAdd.js create mode 100644 src/components/UI/ModalAdd/modalAdd.scss diff --git a/src/components/UI/ModalAdd/ModalAdd.js b/src/components/UI/ModalAdd/ModalAdd.js new file mode 100644 index 00000000..f16c8240 --- /dev/null +++ b/src/components/UI/ModalAdd/ModalAdd.js @@ -0,0 +1,19 @@ +import React from "react"; + +import "./modalAdd.scss"; + +export const ModalAdd = ({ children, active, setActive }) => { + return ( +
setActive(false)} + > +
e.stopPropagation()}> + {children} + setActive(false)}> +
+
+ ); +}; + +export default ModalAdd; diff --git a/src/components/UI/ModalAdd/modalAdd.scss b/src/components/UI/ModalAdd/modalAdd.scss new file mode 100644 index 00000000..86a6580d --- /dev/null +++ b/src/components/UI/ModalAdd/modalAdd.scss @@ -0,0 +1,100 @@ +.modal-add { + z-index: 9; + height: 100%; + width: 100%; + background-color: rgba(0, 0, 0, 0.11); + position: fixed; + top: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + transform: scale(0); + + &__content { + position: relative; + width: 424px; + height: 248px; + background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%); + border-radius: 40px; + + padding: 15px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + + .title-project { + display: flex; + align-items: flex-start; + flex-direction: column; + + .input-container { + width: 287px; + height: 35px; + background: #ffffff; + border-radius: 8px; + } + + h4 { + font-weight: 500; + font-size: 22px; + line-height: 26px; + color: #263238; + margin-bottom: 22px; + } + } + + .name-project { + margin-left: 10px; + border: none; + outline: none; + height: 100%; + width: 90%; + font-size: 14px; + } + + .button-add { + margin: 30px 0 0 0; + width: 130px; + height: 37px; + background: #52b709; + border-radius: 44px; + border: none; + font-weight: 400; + font-size: 15px; + line-height: 32px; + color: #ffffff; + display: flex; + align-items: center; + justify-content: center; + } + + .exit { + cursor: pointer; + position: absolute; + top: 35px; + right: 40px; + + &:before, + &:after { + content: ""; + position: absolute; + width: 16px; + height: 2px; + background: #263238; + } + + &:before { + transform: rotate(45deg); + } + &:after { + transform: rotate(-45deg); + } + } +} + +.modal-add.active { + transform: scale(1); +} diff --git a/src/components/UI/ModalCreate/ModalCreate.js b/src/components/UI/ModalCreate/ModalCreate.js index fbf6099d..de7d8813 100644 --- a/src/components/UI/ModalCreate/ModalCreate.js +++ b/src/components/UI/ModalCreate/ModalCreate.js @@ -4,7 +4,7 @@ import { setProject } from "../../../redux/projectsTrackerSlice"; import "./ModalCreate.scss"; -export const ModalCreate = ({ active, setActive, title, desc }) => { +export const ModalCreate = ({ active, setActive, title }) => { const [inputValue, setInputValue] = useState(""); const dispatch = useDispatch(); @@ -33,7 +33,6 @@ export const ModalCreate = ({ active, setActive, title, desc }) => { >

{title}

-

{desc}

{ description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, - project: "Будущее России" + project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, - project: "Будущее России" + project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, - project: "Будущее России" + project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, - project: "Будущее России" + project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, - project: "Будущее России" + project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, - project: "Будущее России" + project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, - project: "Будущее России" + project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, - project: "Будущее России" + project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, - project: "Будущее России" + 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 г" - }, - ] - ) + { + 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([ { @@ -245,112 +245,112 @@ export const Tracker = () => { description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, - project: "Будущее России" + project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, - project: "Будущее России" + project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, - project: "Будущее России" + project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, - project: "Будущее России" + project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, - project: "Будущее России" + project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, - project: "Будущее России" + project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, - project: "Будущее России" + project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, - project: "Будущее России" + project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, - project: "Будущее России" + project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, - project: "Будущее России" + project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, - project: "Будущее России" + project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, - project: "Будущее России" + project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, - project: "Будущее России" + project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, - project: "Будущее России" + project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, - project: "Будущее России" + project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, - project: "Будущее России" + project: "Будущее России", }, ]); @@ -358,6 +358,7 @@ export const Tracker = () => { // Modal State const [modalActiveTicket, setModalActiveTicket] = useState(false); + const [modalAddWorker, setModalAddWorker] = useState(false); const [modalCreateProject, setModalCreateProject] = useState(false); const [modalCreateColl, setModalCreateColl] = useState(false); const [modalCreateTiket, setModalCreateTiket] = useState(false); @@ -365,7 +366,7 @@ export const Tracker = () => { const [valueColl, setValueColl] = useState(""); // - const [projectTasksOpen, setProjectTasksOpen] = useState(false) + const [projectTasksOpen, setProjectTasksOpen] = useState(false); const [selectedTab, setSelectedTab] = useState({ name: "", @@ -385,7 +386,7 @@ export const Tracker = () => { const toggleTabs = (index) => { if (projectTasksOpen) { - setProjectTasksOpen(false) + setProjectTasksOpen(false); } setToggleTab(index); }; @@ -532,10 +533,11 @@ export const Tracker = () => {
-

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

@@ -543,22 +545,22 @@ export const Tracker = () => {
toggleTabs(1)} + className={toggleTab === 1 ? "tab active-tab" : "tab"} + onClick={() => toggleTabs(1)} > img

Проекты

toggleTabs(2)} + className={toggleTab === 2 ? "tab active-tab" : "tab"} + onClick={() => toggleTabs(2)} > img

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

toggleTabs(3)} + className={toggleTab === 3 ? "tab active-tab" : "tab"} + onClick={() => toggleTabs(3)} > img

Архив

@@ -566,94 +568,102 @@ export const Tracker = () => {
- {Boolean(projects.length) && !projectTasksOpen && + {Boolean(projects.length) && + !projectTasksOpen && projects.map((project, index) => { return ( -
setProjectTasksOpen(true)}> -

{project.name}

-
-

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

- {project.count} - + -
+
setProjectTasksOpen(true)} + > +

{project.name}

+
+

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

+ {project.count} + +
+
); })} - {!Boolean(projects.length) && !projectTasksOpen && -
-
-
- noProjectImg -

Создайте свой первый проект

-
- + {!Boolean(projects.length) && !projectTasksOpen && ( +
+
+
+ noProjectImg +

Создайте свой первый проект

-

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

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

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

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

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

+

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

- } + )}

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

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

Введите название колонки

-
- setValueColl(e.target.value)} - > -
+
+

Введите название колонки

+
+ setValueColl(e.target.value)} + >
-
-
+ + +
- setModalCreateColl(true)} - > - + - + setModalCreateColl(true)}>+

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

@@ -671,183 +681,173 @@ export const Tracker = () => { Мои arrow
-
setProjectTasksOpen(false)}> +
setProjectTasksOpen(false)} + >

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

- arrow + arrow
-
setModalCreateTiket(false)} - > -
e.stopPropagation()} - > -
-

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

-
- setValueTiket(e.target.value)} - > -
+ +
+

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

+
+ 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" : "" - } ${ - 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; +
dragOverHandler(e)} + onDragEnter={(e) => dragEnterHandler(wrapperIndex)} + onDrop={(e) => dragDropHandler(e, wrapperIndex)} + className={`tasks__board ${ + section.tasks.length >= 3 ? "tasks__board__more" : "" + } ${ + wrapperHover[wrapperIndex] ? "tasks__board__hover" : "" + }`} + > +
+ + {section.name} + +
+ + selectedTabTask( + e, + wrapperIndex, + section.name, + section.tasks + ) } - } - return ( -
- dragStartHandler(e, task, wrapperIndex) - } - onDragEnd={(e) => dragEndHandler(e)} - onClick={() => setModalActiveTicket(true)} - > -
-

{task.task}

-
-

- {task.description} -

-
-
- commentsImg - {task.comments} коментариев -
-
- filesImg - {task.files} файлов -
-
- avatar - avatar -
-
-
- ); - })} - {section.tasks.length > 3 && ( - toggleMoreTasks(wrapperIndex)} - > - {section.open ? "-" : "+"} - - )} + > + + + + ... +
+ {section.tasks.map((task, index) => { + if (index > 2) { + if (!section.open) { + return; + } + } + return ( +
+ dragStartHandler(e, task, wrapperIndex) + } + onDragEnd={(e) => dragEndHandler(e)} + onClick={() => setModalActiveTicket(true)} + > +
+

{task.task}

+
+

+ {task.description} +

+
+
+ commentsImg + {task.comments} коментариев +
+
+ filesImg + {task.files} файлов +
+
+ avatar + avatar +
+
+
+ ); + })} + {section.tasks.length > 3 && ( + toggleMoreTasks(wrapperIndex)} + > + {section.open ? "-" : "+"} + + )} +
); })}

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

search filterArchiveTasks(event)} + type="text" + placeholder="Найти задачу" + onChange={(event) => filterArchiveTasks(event)} />
{allTasks.map((task, index) => { - return( -
-
-
{task.name}
-

{task.description}

-
-
- avatar -
-

{task.project}

- {task.dateComplete} -
-
+ return ( +
+
+
{task.name}
+

{task.description}

+
+
+ avatar +
+

{task.project}

+ {task.dateComplete}
- ) - }) - } +
+
+ ); + })}
@@ -856,36 +856,36 @@ export const Tracker = () => {
search filterArchiveTasks(event)} + type="text" + placeholder="Найти задачу" + onChange={(event) => filterArchiveTasks(event)} />
- {Boolean(filterCompleteTasks.length) ? + {Boolean(filterCompleteTasks.length) ? ( filterCompleteTasks.map((task, index) => { return ( -
-
-

{task.description}

-

{task.dateComplete}

-
-
- avatar -
- Проект -

{task.project}

-
+
+
+

{task.description}

+

{task.dateComplete}

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

{task.project}

+
); }) - : + ) : (

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

- } + )}
@@ -894,22 +894,22 @@ export const Tracker = () => {

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

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

{project.name}

-

{project.date}

-
-
- ) - }) - : + return ( +
+
+

{project.name}

+

{project.date}

+
+
+ ); + }) + ) : (

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

- } + )}
From 1e4e79897adbe951851323bcb6acef143c55050f Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Wed, 12 Apr 2023 18:22:25 +0300 Subject: [PATCH 2/6] Finished update modal for tracker --- src/components/UI/ModalAdd/modalAdd.scss | 29 ++++++++++++++++---- src/components/UI/ModalTiket/ModalTiket.js | 19 +++++++++++-- src/components/UI/ModalTiket/ModalTiket.scss | 9 ++++++ src/pages/Tracker/Tracker.js | 26 +++++++++++++++++- 4 files changed, 74 insertions(+), 9 deletions(-) diff --git a/src/components/UI/ModalAdd/modalAdd.scss b/src/components/UI/ModalAdd/modalAdd.scss index 86a6580d..c4e6e2e1 100644 --- a/src/components/UI/ModalAdd/modalAdd.scss +++ b/src/components/UI/ModalAdd/modalAdd.scss @@ -14,14 +14,13 @@ &__content { position: relative; width: 424px; - height: 248px; background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%); border-radius: 40px; - padding: 15px; + padding: 60px 60px 30px 60px; display: flex; flex-direction: column; - align-items: center; + align-items: flex-start; justify-content: center; } @@ -41,8 +40,26 @@ font-weight: 500; font-size: 22px; line-height: 26px; - color: #263238; - margin-bottom: 22px; + color: #263238 !important; + margin-bottom: 22px !important; + } + + &__decs { + font-weight: 300; + font-size: 12px; + line-height: 14px; + margin: -13px 0 16px 0; + } + + &__textarea { + resize: none; + width: 302px; + height: 83px; + background: #ffffff; + border-radius: 8px; + border: none; + font-size: 15px; + line-height: 18px; } } @@ -56,7 +73,7 @@ } .button-add { - margin: 30px 0 0 0; + margin: 20px 40% 0 0; width: 130px; height: 37px; background: #52b709; diff --git a/src/components/UI/ModalTiket/ModalTiket.js b/src/components/UI/ModalTiket/ModalTiket.js index 6e39d147..a3417291 100644 --- a/src/components/UI/ModalTiket/ModalTiket.js +++ b/src/components/UI/ModalTiket/ModalTiket.js @@ -15,6 +15,7 @@ import send from "../../../images/send.svg"; import plus from "../../../images/plus.svg"; import "./ModalTiket.scss"; +import ModalAdd from "../ModalAdd/ModalAdd"; export const ModalTiket = ({ active, setActive }) => { const [tiket] = useState({ @@ -24,7 +25,6 @@ export const ModalTiket = ({ active, setActive }) => { descriptions: "На многих страницах сайта отсутствуют или некорректно заполнены метатеги Description. Это может негативно повлиять на представление сайта в результатах поиска. Необходимо исправить все страницы где есть ошибки или отсутствует Title и Description.", }); - const [workers] = useState([ { name: "Дмитрий Рогов", @@ -35,6 +35,7 @@ export const ModalTiket = ({ active, setActive }) => { avatar: avatarMock1, }, ]); + const [addSubtask, setAddSubtask] = useState(false); return (
{

- @@ -135,6 +136,20 @@ export const ModalTiket = ({ active, setActive }) => {

+ +
+

+ Вы добавляете подзадачу

в колонку задачи {"Готово"}

+

+

Введите текст

+
+ +
+
+ +
); }; diff --git a/src/components/UI/ModalTiket/ModalTiket.scss b/src/components/UI/ModalTiket/ModalTiket.scss index f8cef4e2..4cd60388 100644 --- a/src/components/UI/ModalTiket/ModalTiket.scss +++ b/src/components/UI/ModalTiket/ModalTiket.scss @@ -304,3 +304,12 @@ } } } + +.subtask { + h4 { + width: 90%; + p { + color: #1458dd; + } + } +} diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js index 14c94683..71c0238b 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.js @@ -662,6 +662,28 @@ export const Tracker = () => { + +
+

Добавьте участника

+

+ Введите имя или e-mail{" "} +

+
+ setValueTiket(e.target.value)} + > +
+
+ + +
setModalCreateColl(true)}>+

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

@@ -670,7 +692,9 @@ export const Tracker = () => { avatar avatar +9 - + + + + +

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

From 2e7375f18ef78c2099e2d98a17d5f57d2ceaefa2 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Wed, 12 Apr 2023 22:20:05 +0300 Subject: [PATCH 3/6] Added new modal Aspt and fixed pages/modals --- src/components/AuthHeader/AuthHeader.js | 20 +- .../CandidateSidebar/CandidateSidebar.js | 124 ++++++------ .../UI/FreeDevelopers/FreeDevelopers.js | 8 +- src/components/UI/ModalAdd/modalAdd.scss | 46 ++--- src/components/UI/ModalAspt/ModalAspt.js | 96 +++++++++ src/components/UI/ModalAspt/modalAspt.scss | 188 ++++++++++++++++++ .../UI/ModalCreate/ModalCreate.scss | 23 --- src/components/UI/ModalTiket/ModalTiket.js | 2 +- src/helper.js | 35 +++- src/images/interviewLogo.svg | 27 +++ .../AuthForDevelopers/AuthForDevelopers.js | 9 +- src/pages/AuthForPartners/AuthForPartners.js | 15 +- 12 files changed, 444 insertions(+), 149 deletions(-) create mode 100644 src/components/UI/ModalAspt/ModalAspt.js create mode 100644 src/components/UI/ModalAspt/modalAspt.scss create mode 100644 src/images/interviewLogo.svg diff --git a/src/components/AuthHeader/AuthHeader.js b/src/components/AuthHeader/AuthHeader.js index f0cb9dc8..1b072eed 100644 --- a/src/components/AuthHeader/AuthHeader.js +++ b/src/components/AuthHeader/AuthHeader.js @@ -1,18 +1,12 @@ import React from "react"; import { NavLink } from "react-router-dom"; +import { scrollToForm } from "../../helper"; import userIcon from "../../images/userIcon.png"; import "./authHeader.scss"; export const AuthHeader = ({}) => { - function scrollToForm() { - window.scrollTo({ - top: 850, - behavior: "smooth", - }); - } - return (
@@ -25,10 +19,8 @@ export const AuthHeader = ({}) => {
  • - - - Главная - + + Главная
  • @@ -38,10 +30,8 @@ export const AuthHeader = ({}) => { Школа
  • - - - Войти в команду - + + Войти в команду
diff --git a/src/components/CandidateSidebar/CandidateSidebar.js b/src/components/CandidateSidebar/CandidateSidebar.js index 9f1a9277..0d009df8 100644 --- a/src/components/CandidateSidebar/CandidateSidebar.js +++ b/src/components/CandidateSidebar/CandidateSidebar.js @@ -1,79 +1,85 @@ -import React from 'react' -import {Link} from 'react-router-dom' -import {Achievement} from '../Achievement/Achievement' +import React, { useState } from "react"; +import { Link } from "react-router-dom"; +import { Achievement } from "../Achievement/Achievement"; -import {LEVELS, SKILLS} from '../../constants/constants' +import ModalAspt from "../UI/ModalAspt/ModalAspt"; +import { urlForLocal } from "../../helper"; +import { LEVELS, SKILLS } from "../../constants/constants"; -import './candidateSidebar.scss' -import {urlForLocal} from "../../helper"; +import "./candidateSidebar.scss"; const getYearsString = (years) => { let yearsString; if (years % 10 === 1) { - yearsString = 'год' + yearsString = "год"; } else if (years === 11 || years === 12 || years === 13 || years === 14) { - yearsString = 'лет' + yearsString = "лет"; } else if (years % 10 === 2 || years % 10 === 3 || years % 10 === 4) { - yearsString = 'года' + yearsString = "года"; } else { - yearsString = 'лет' + yearsString = "лет"; } - return `${years} ${yearsString}` + return `${years} ${yearsString}`; }; -const CandidateSidebar = ({candidate, setActiveSnippet, activeSnippet}) => { - const userId = localStorage.getItem('id'); +const CandidateSidebar = ({ candidate, setActiveSnippet, activeSnippet }) => { + const userId = localStorage.getItem("id"); const showSnippet = () => { - setActiveSnippet(!activeSnippet) + setActiveSnippet(!activeSnippet); }; + const [addAspt, setAddAspt] = useState(false); + return ( -
-
-
-

- {candidate.specification} {SKILLS[candidate.position_id]},{' '} - {LEVELS[candidate.level]}{' '} -

-
- {candidate.photo && } - {candidate && candidate.years_of_exp && ( - <> -

Опыт работы

-

- {getYearsString(candidate.years_of_exp)} -

- - )} - - - - {userId && ( - <> - - - - -
- {candidate && - candidate.achievements && - candidate.achievements.map((item) => { - return - })} -
- )} +
+
+
+

+ {candidate.specification} {SKILLS[candidate.position_id]},{" "} + {LEVELS[candidate.level]}{" "} +

+ {candidate.photo && } + {candidate && candidate.years_of_exp && ( + <> +

Опыт работы

+

+ {getYearsString(candidate.years_of_exp)} +

+ + )} + + + + + + {userId && ( + <> + + + + +
+ {candidate && + candidate.achievements && + candidate.achievements.map((item) => { + return ( + + ); + })} +
+ + )}
- ) +
+ ); }; -export default CandidateSidebar +export default CandidateSidebar; diff --git a/src/components/UI/FreeDevelopers/FreeDevelopers.js b/src/components/UI/FreeDevelopers/FreeDevelopers.js index adbc02a3..53fa1ec3 100644 --- a/src/components/UI/FreeDevelopers/FreeDevelopers.js +++ b/src/components/UI/FreeDevelopers/FreeDevelopers.js @@ -3,13 +3,15 @@ import React from "react"; import AuthHeader from "../../AuthHeader/AuthHeader"; import SideBar from "../../SideBar/SideBar"; import { Footer } from "../../Footer/Footer"; + +import { Link } from "react-router-dom"; +import { scrollToForm } from "../../../helper"; import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs"; import mockWorker from "../../../images/mokPerson.png"; import arrow from "../../../images/arrow_left.png"; import "./freeDevelopers.scss"; -import { Link } from "react-router-dom"; export const FreeDevelopers = ({}) => { return ( @@ -40,7 +42,9 @@ export const FreeDevelopers = ({}) => {
- +
diff --git a/src/components/UI/ModalAdd/modalAdd.scss b/src/components/UI/ModalAdd/modalAdd.scss index c4e6e2e1..345b64ca 100644 --- a/src/components/UI/ModalAdd/modalAdd.scss +++ b/src/components/UI/ModalAdd/modalAdd.scss @@ -87,31 +87,31 @@ align-items: center; justify-content: center; } - - .exit { - cursor: pointer; - position: absolute; - top: 35px; - right: 40px; - - &:before, - &:after { - content: ""; - position: absolute; - width: 16px; - height: 2px; - background: #263238; - } - - &:before { - transform: rotate(45deg); - } - &:after { - transform: rotate(-45deg); - } - } } .modal-add.active { transform: scale(1); } + +.exit { + cursor: pointer; + position: absolute; + top: 35px; + right: 40px; + + &:before, + &:after { + content: ""; + position: absolute; + width: 16px; + height: 2px; + background: #263238; + } + + &:before { + transform: rotate(45deg); + } + &:after { + transform: rotate(-45deg); + } +} diff --git a/src/components/UI/ModalAspt/ModalAspt.js b/src/components/UI/ModalAspt/ModalAspt.js new file mode 100644 index 00000000..34f9faf0 --- /dev/null +++ b/src/components/UI/ModalAspt/ModalAspt.js @@ -0,0 +1,96 @@ +import React, { useState } from "react"; + +import avatar from "../../../images/mokPerson.png"; +import logoTg from "../../../images/TgLogo.svg"; +import arrow from "../../../images/right-arrow.png"; +import interview from "../../../images/interviewLogo.svg"; + +import ModalAdd from "../ModalAdd/ModalAdd"; + +import "./modalAspt.scss"; + +export const ModalAspt = ({ active, setActive }) => { + const [date, setDate] = useState(""); + const [time, setTime] = useState(""); + const [modalSend, setModalSend] = useState(false); + + const send = () => { + if (date != "" && time != "") { + setModalSend(true); + + setTimeout(() => { + setModalSend(false); + setActive(false); + }, 3200); + } + }; + + return ( +
setActive(false)} + > +
e.stopPropagation()}> +
+

Выбранный кандидат

+
+
+ +

Full-stack Back end - разработчик, Senior

+
+
+
+ +
+

Вернуться к списку

+
+
+ +
+

Есть вопросы?

+
+ +

Напишите нам в Телеграм. Мы с удовольствием ответим!

+
+
+
+
+

Дата собеседования

+
+ setDate(e.target.value)} + > +
+ +

Время собеседования

+
+ setTime(e.target.value)} + > +
+ + +
+ setActive(false)}> +
+ +
+ +

Спасибо,собеседование назначено

+

+ Дата: {date} +

+

+ Время собеседования: {time} +

+
+ +
+ ); +}; + +export default ModalAspt; diff --git a/src/components/UI/ModalAspt/modalAspt.scss b/src/components/UI/ModalAspt/modalAspt.scss new file mode 100644 index 00000000..3f4775cd --- /dev/null +++ b/src/components/UI/ModalAspt/modalAspt.scss @@ -0,0 +1,188 @@ +.modal-aspt { + z-index: 99; + height: 100%; + width: 100%; + background-color: rgba(0, 0, 0, 0.11); + position: fixed; + top: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + transform: scale(0); + + &__content { + position: relative; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + background: #ffffff; + border: 1px solid #dde2e4; + border-radius: 8px; + + .aspt-decs { + padding: 54px 25px 51px 61px; + border-right: 1px solid #f1f1f1; + + h1 { + display: block; + font-weight: 500; + font-size: 30px; + line-height: 32px; + color: #000000; + text-align: left; + } + + &__avatar { + margin-top: 76px; + + &_title { + display: flex; + flex-direction: row; + align-items: center; + + img { + width: 48px; + height: 48px; + margin: 0 22px 0 0; + } + + p { + font-weight: 500; + font-size: 16px; + line-height: 24px; + } + } + + &_back { + display: flex; + align-items: center; + margin: 40px 0 0 0; + + div { + background: #8dc63f; + opacity: 0.3; + width: 48px; + height: 48px; + border-radius: 44px; + display: flex; + align-items: center; + justify-content: center; + margin: 0 15px 0 0; + + img { + margin: 0; + width: 50%; + } + } + + p { + font-size: 12px; + line-height: 16px; + color: #5b6871; + } + } + } + + &__telega { + text-align: left; + + h4 { + color: #52b709; + font-size: 14px; + margin: 55px 0 34px 0; + } + + p, + h4 { + font-weight: 900; + line-height: 24px; + } + + p { + width: 50%; + font-size: 12px; + } + + &-logo { + display: flex; + flex-direction: row; + + img { + margin: 0 19px 0 0; + } + } + } + } + + .form-interview { + text-align: left; + padding: 54px 61px 51px 72px; + + p { + font-weight: 400; + font-size: 15px; + line-height: 18px; + margin-bottom: 10px; + } + + button { + width: 174px; + height: 46px; + color: white; + border: none; + font-size: 18px; + line-height: 32px; + background: #52b709; + border-radius: 44px; + } + + .input { + background: #eff2f7; + border-radius: 8px; + display: flex; + justify-content: center; + width: 294px; + height: 35px; + margin: 0 0 36px 0; + + input { + background: #eff2f7; + width: 90%; + border: none; + outline: none; + font-size: 15px; + } + } + } + } + + .send { + display: flex; + flex-direction: column; + align-items: center; + + h2 { + text-align: center; + margin: 25px 0 31px 0; + } + + p { + font-size: 14px; + line-height: 17px; + font-weight: 700; + text-align: center; + color: #000000; + margin-bottom: 10px; + + span { + color: #406128; + } + } + } +} + +.modal-aspt.active { + transform: scale(1); +} diff --git a/src/components/UI/ModalCreate/ModalCreate.scss b/src/components/UI/ModalCreate/ModalCreate.scss index b7b8492e..8db78e25 100644 --- a/src/components/UI/ModalCreate/ModalCreate.scss +++ b/src/components/UI/ModalCreate/ModalCreate.scss @@ -69,29 +69,6 @@ align-items: center; justify-content: center; } - - .exit { - cursor: pointer; - position: absolute; - top: 35px; - right: 40px; - - &:before, - &:after { - content: ""; - position: absolute; - width: 16px; - height: 2px; - background: #263238; - } - - &:before { - transform: rotate(45deg); - } - &:after { - transform: rotate(-45deg); - } - } } } diff --git a/src/components/UI/ModalTiket/ModalTiket.js b/src/components/UI/ModalTiket/ModalTiket.js index a3417291..9648200c 100644 --- a/src/components/UI/ModalTiket/ModalTiket.js +++ b/src/components/UI/ModalTiket/ModalTiket.js @@ -14,8 +14,8 @@ import edit from "../../../images/edit.svg"; import send from "../../../images/send.svg"; import plus from "../../../images/plus.svg"; -import "./ModalTiket.scss"; import ModalAdd from "../ModalAdd/ModalAdd"; +import "./ModalTiket.scss"; export const ModalTiket = ({ active, setActive }) => { const [tiket] = useState({ diff --git a/src/helper.js b/src/helper.js index 46cfd13b..5e5b9993 100644 --- a/src/helper.js +++ b/src/helper.js @@ -1,22 +1,25 @@ export function createMarkup(text) { - return {__html: text.split('

').join('

')} + return { __html: text.split("

").join("

") }; } export function transformHtml(text) { - let startHtml = {__html: text.split('

||

').join('

').split('
')}; - startHtml = startHtml.__html.filter((el) => - el !== null && el !== "" || el === 0 + let startHtml = { + __html: text.split("

||

").join("

").split("
"), + }; + startHtml = startHtml.__html.filter( + (el) => (el !== null && el !== "") || el === 0 ); - const finalHtml = startHtml.map((item) => + const finalHtml = startHtml.map( + (item) => `

Описание опыта работы

-
${item.split('

')[0]}

+
${item.split("

")[0]}

` ); - return {__html: finalHtml.join('')} + return { __html: finalHtml.join("") }; } // // export const setToken = () => { @@ -29,12 +32,22 @@ export function transformHtml(text) { // }; export const getToken = () => { - const tParam = `Bearer ${localStorage.getItem('auth_token')}` + const tParam = `Bearer ${localStorage.getItem("auth_token")}`; - return tParam ? {Authorization: tParam} : {}; + return tParam ? { Authorization: tParam } : {}; }; -export const urlHasParams = (url) => url.indexOf('?') > 0 ? `${url}&${window.location.search.substr(1)}` : `${url}${window.location.search}`; +export const urlHasParams = (url) => + url.indexOf("?") > 0 + ? `${url}&${window.location.search.substr(1)}` + : `${url}${window.location.search}`; +export const urlForLocal = (url) => + process.env.NODE_ENV === "development" ? `https://itguild.info${url}` : url; -export const urlForLocal = (url) => process.env.NODE_ENV === 'development' ? `https://itguild.info${url}` : url; +export function scrollToForm() { + window.scrollTo({ + top: 850, + behavior: "smooth", + }); +} diff --git a/src/images/interviewLogo.svg b/src/images/interviewLogo.svg new file mode 100644 index 00000000..140aaa33 --- /dev/null +++ b/src/images/interviewLogo.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/AuthForDevelopers/AuthForDevelopers.js b/src/pages/AuthForDevelopers/AuthForDevelopers.js index ba7e4d01..2b375364 100644 --- a/src/pages/AuthForDevelopers/AuthForDevelopers.js +++ b/src/pages/AuthForDevelopers/AuthForDevelopers.js @@ -13,6 +13,8 @@ import vectorBlack from "../../images/Vector_Smart_Object_black.png"; import { selectAuth } from "../../redux/outstaffingSlice"; import { Link, useNavigate } from "react-router-dom"; +import { scrollToForm } from "../../helper"; + import { Footer } from "../../components/Footer/Footer"; import SideBar from "../../components/SideBar/SideBar"; import AuthHeader from "../../components/AuthHeader/AuthHeader"; @@ -31,13 +33,6 @@ const AuthForDevelopers = () => { } }, [getToken]); - function scrollToForm() { - window.scrollTo({ - top: 850, - behavior: "smooth", - }); - } - return (
diff --git a/src/pages/AuthForPartners/AuthForPartners.js b/src/pages/AuthForPartners/AuthForPartners.js index 044596ad..297f3d8e 100644 --- a/src/pages/AuthForPartners/AuthForPartners.js +++ b/src/pages/AuthForPartners/AuthForPartners.js @@ -6,9 +6,11 @@ import text from "../../images/Body_Text.png"; import arrowBtn from "../../images/arrowRight.png"; import vector from "../../images/Vector_Smart_Object.png"; import vectorBlack from "../../images/Vector_Smart_Object_black.png"; + import { useSelector } from "react-redux"; import { selectAuth } from "../../redux/outstaffingSlice"; import { Link, useNavigate } from "react-router-dom"; +import { scrollToForm } from "../../helper"; import { Footer } from "../../components/Footer/Footer"; import { AuthBox } from "../../components/AuthBox/AuthBox"; @@ -30,17 +32,14 @@ const AuthForPartners = () => { } }, [getToken]); - function scrollToForm() { - window.scrollTo({ - top: 850, - behavior: "smooth", - }); - } - return (
- +
From b91c8acd0c3c654c17227077001de3bb79277f09 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Thu, 13 Apr 2023 16:10:35 +0300 Subject: [PATCH 4/6] Fixed candidate pages --- src/components/Candidate/candidate.scss | 58 ++++++++++++------- .../CandidateSidebar/CandidateSidebar.js | 22 ++++--- .../CandidateSidebar/candidateSidebar.scss | 15 ++--- src/components/UI/ModalAspt/ModalAspt.js | 19 +++--- src/components/UI/ModalAspt/modalAspt.scss | 11 +++- 5 files changed, 82 insertions(+), 43 deletions(-) diff --git a/src/components/Candidate/candidate.scss b/src/components/Candidate/candidate.scss index d4edea1c..1b6af0ee 100644 --- a/src/components/Candidate/candidate.scss +++ b/src/components/Candidate/candidate.scss @@ -1,12 +1,23 @@ -@use 'sass:math'; +@use "sass:math"; + .candidate { padding-top: 23px; + z-index: 0; &__wrapper { - background: #F1F1F1; + background: #f1f1f1; min-height: 100vh; } + .profileBreadcrumbs { + position: relative; + z-index: -1; + } + + .row { + position: relative; + z-index: -1; + } &__header { display: flex; @@ -19,14 +30,21 @@ } } + .col-xl-8 { + position: relative; + z-index: -1; + } + &__main { margin-top: 60px; + position: relative; + z-index: -1; &-description { padding-left: 16px; h2 { - font-family: 'GT Eesti Pro Display', sans-serif; + font-family: "GT Eesti Pro Display", sans-serif; font-size: 2.8em; font-weight: 700; font-style: normal; @@ -36,7 +54,7 @@ } p { - font-family: 'GT Eesti Pro Display', sans-serif; + font-family: "GT Eesti Pro Display", sans-serif; font-size: 1.2em; font-weight: 300; font-style: normal; @@ -50,7 +68,7 @@ &__text { p { - font-family: 'GT Eesti Pro Display', sans-serif; + font-family: "GT Eesti Pro Display", sans-serif; font-size: 1.6em; font-weight: 100; font-style: normal; @@ -63,7 +81,7 @@ } &-secondary { - font-family: 'GT Eesti Pro Display', sans-serif; + font-family: "GT Eesti Pro Display", sans-serif; font-size: 1.6em; font-weight: 100; font-style: normal; @@ -92,7 +110,7 @@ position: absolute; right: 20%; top: 40%; - font-family: 'GT Eesti Pro Display', sans-serif; + font-family: "GT Eesti Pro Display", sans-serif; font-size: 1.8em; font-weight: 400; font-style: normal; @@ -112,7 +130,7 @@ display: flex; justify-content: center; align-items: center; - background: #D3E4BC; + background: #d3e4bc; border-radius: 50px; margin-right: 20px; @@ -122,7 +140,7 @@ } &-sp { font-size: 12px; - color: #5B6871; + color: #5b6871; max-width: 75px; @media (max-width: 768px) { @@ -133,6 +151,8 @@ footer { margin-top: 2.5rem !important; + position: relative; + z-index: -2; } } @@ -235,7 +255,7 @@ rgba(255, 255, 255, 0) 100% ); color: #ffffff; - font-family: 'Muller', sans-serif; + font-family: "Muller", sans-serif; font-size: 1.3em; letter-spacing: normal; border: none; @@ -311,13 +331,12 @@ top: 80px !important; } - -.candidate__works{ +.candidate__works { @media (min-width: 576px) { padding: 0 0 45px 0; } } -.works__body{ +.works__body { display: flex; flex-wrap: wrap; margin: 0 -15px -30px; @@ -331,7 +350,7 @@ &__info { width: 100%; - background: #E1FCCF; + background: #e1fccf; border-radius: 12px 12px 0px 0px; padding: 20px 0 20px 50px; @@ -342,7 +361,7 @@ } } } -.item-works{ +.item-works { display: flex; flex-direction: column; flex: 0 1 49%; @@ -352,10 +371,10 @@ flex: 0 1 100%; } - &__body{ + &__body { display: flex; flex-direction: column; - background: #FFFFFF; + background: #ffffff; height: 170px; padding: 25px 40px 25px 25px; border-radius: 12px; @@ -376,7 +395,7 @@ align-items: center; justify-content: center; border-radius: 50px; - background: #DDEEC6; + background: #ddeec6; margin: auto 0; } } @@ -395,11 +414,10 @@ width: 100%; height: 8px; border-radius: 12px; - background: #D4F123; + background: #d4f123; bottom: -36%; left: 10%; } - } &__project { diff --git a/src/components/CandidateSidebar/CandidateSidebar.js b/src/components/CandidateSidebar/CandidateSidebar.js index 0d009df8..2062cf02 100644 --- a/src/components/CandidateSidebar/CandidateSidebar.js +++ b/src/components/CandidateSidebar/CandidateSidebar.js @@ -24,14 +24,27 @@ const getYearsString = (years) => { const CandidateSidebar = ({ candidate, setActiveSnippet, activeSnippet }) => { const userId = localStorage.getItem("id"); + + const [addAspt, setAddAspt] = useState(false); + const showSnippet = () => { setActiveSnippet(!activeSnippet); }; - const [addAspt, setAddAspt] = useState(false); + let levelAspt = { + spec: candidate.specification, + skils: SKILLS[candidate.position_id], + level: LEVELS[candidate.level], + }; return (
+ +

@@ -49,8 +62,6 @@ const CandidateSidebar = ({ candidate, setActiveSnippet, activeSnippet }) => { )} - - -
{candidate && diff --git a/src/components/CandidateSidebar/candidateSidebar.scss b/src/components/CandidateSidebar/candidateSidebar.scss index e13ffa72..dcbc44ac 100644 --- a/src/components/CandidateSidebar/candidateSidebar.scss +++ b/src/components/CandidateSidebar/candidateSidebar.scss @@ -5,7 +5,7 @@ border-radius: 12px; border-bottom: none !important; position: sticky; - background: #FFFFFF; + background: #ffffff; top: 80px; &__position { @@ -13,7 +13,7 @@ h2 { font-size: 2.5rem; - font-family: 'GT Eesti Pro Display', sans-serif; + font-family: "GT Eesti Pro Display", sans-serif; font-weight: 700; font-style: normal; letter-spacing: normal; @@ -29,6 +29,7 @@ } &__info { + padding-bottom: 40px; text-align: center; margin-top: 10px; width: 100%; @@ -53,7 +54,7 @@ } .candidate-sidebar__experience-title { - font-family: 'GT Eesti Pro Display', sans-serif; + font-family: "GT Eesti Pro Display", sans-serif; font-size: 1.8em; font-weight: normal; font-style: normal; @@ -63,7 +64,7 @@ } .candidate-sidebar__experience { - font-family: 'GT Eesti Pro Display', sans-serif; + font-family: "GT Eesti Pro Display", sans-serif; font-size: 2.5em; font-weight: 700; font-style: normal; @@ -78,7 +79,7 @@ border: none; background-color: #73c141; color: #ffffff; - font-family: 'Muller', sans-serif; + font-family: "Muller", sans-serif; font-size: 1.6em; font-style: normal; letter-spacing: normal; @@ -95,7 +96,7 @@ } .candidate-sidebar__info__l { - font-family: 'GT Eesti Pro Display', sans-serif; + font-family: "GT Eesti Pro Display", sans-serif; font-size: 1.8em; font-weight: 600; font-style: normal; @@ -134,7 +135,7 @@ .candidate-sidebar__arrows-sp { color: #705fa3; - font-family: 'Circe', sans-serif; + font-family: "Circe", sans-serif; font-size: 1.3em; font-weight: 400; font-style: normal; diff --git a/src/components/UI/ModalAspt/ModalAspt.js b/src/components/UI/ModalAspt/ModalAspt.js index 34f9faf0..d299e6c3 100644 --- a/src/components/UI/ModalAspt/ModalAspt.js +++ b/src/components/UI/ModalAspt/ModalAspt.js @@ -5,11 +5,12 @@ import logoTg from "../../../images/TgLogo.svg"; import arrow from "../../../images/right-arrow.png"; import interview from "../../../images/interviewLogo.svg"; +import { Link } from "react-router-dom"; import ModalAdd from "../ModalAdd/ModalAdd"; import "./modalAspt.scss"; -export const ModalAspt = ({ active, setActive }) => { +export const ModalAspt = ({ active, setActive, level }) => { const [date, setDate] = useState(""); const [time, setTime] = useState(""); const [modalSend, setModalSend] = useState(false); @@ -36,13 +37,17 @@ export const ModalAspt = ({ active, setActive }) => {
-

Full-stack Back end - разработчик, Senior

+

+ {level.spec} {level.skils}, {level.level}{" "} +

-
- -
-

Вернуться к списку

+ +
+ +
+

Вернуться к списку

+
@@ -80,7 +85,7 @@ export const ModalAspt = ({ active, setActive }) => {
-

Спасибо,собеседование назначено

+

Спасибо, собеседование назначено

Дата: {date}

diff --git a/src/components/UI/ModalAspt/modalAspt.scss b/src/components/UI/ModalAspt/modalAspt.scss index 3f4775cd..32e94c9d 100644 --- a/src/components/UI/ModalAspt/modalAspt.scss +++ b/src/components/UI/ModalAspt/modalAspt.scss @@ -56,10 +56,17 @@ } &_back { - display: flex; - align-items: center; margin: 40px 0 0 0; + a { + display: flex; + align-items: center; + font-size: 12px; + line-height: 16px; + color: #5b6871; + text-decoration: none; + } + div { background: #8dc63f; opacity: 0.3; From e19ee11560711911f835857aa45e086c6bfb35e3 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Thu, 13 Apr 2023 22:10:20 +0300 Subject: [PATCH 5/6] added new modal settings --- .../UI/ModalSettings/ModalSettings.js | 13 ++++ .../UI/ModalSettings/modalSettings.scss | 29 ++++++++ src/pages/Tracker/Tracker.js | 74 +++++++++++++++++-- src/pages/Tracker/tracker.scss | 73 +++++++++--------- 4 files changed, 146 insertions(+), 43 deletions(-) create mode 100644 src/components/UI/ModalSettings/ModalSettings.js create mode 100644 src/components/UI/ModalSettings/modalSettings.scss diff --git a/src/components/UI/ModalSettings/ModalSettings.js b/src/components/UI/ModalSettings/ModalSettings.js new file mode 100644 index 00000000..e3ffb5d5 --- /dev/null +++ b/src/components/UI/ModalSettings/ModalSettings.js @@ -0,0 +1,13 @@ +import React from "react"; + +import "./modalSettings.scss"; + +export const ModalSettings = ({ active, children }) => { + return ( +
+ {children} +
+ ); +}; + +export default ModalSettings; diff --git a/src/components/UI/ModalSettings/modalSettings.scss b/src/components/UI/ModalSettings/modalSettings.scss new file mode 100644 index 00000000..a2fb34f3 --- /dev/null +++ b/src/components/UI/ModalSettings/modalSettings.scss @@ -0,0 +1,29 @@ +.project { + &__settings { + position: absolute; + padding: 32px 23px 10px 11px; + background: #e1fccf; + border-radius: 12px; + transform: scale(0); + bottom: -148px; + right: -120px; + + &-menu { + font-size: 14px; + line-height: 38px; + + div { + display: flex; + align-items: center; + + img { + margin-right: 12px; + } + } + } + } + + &__settings.active { + transform: scale(1); + } +} diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js index 71c0238b..9aa6d3b6 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.js @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader"; import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"; @@ -21,8 +21,13 @@ import filesBoard from "../../images/filesBoard.svg"; import search from "../../images/serchIcon.png"; import noProjects from "../../images/noProjects.png"; import arrow from "../../images/arrowCalendar.png"; +import link from "../../images/link.svg"; +import archiveSet from "../../images/archive.svg"; +import del from "../../images/delete.svg"; +import edit from "../../images/edit.svg"; import "./tracker.scss"; +import ModalSettings from "../../components/UI/ModalSettings/ModalSettings"; export const Tracker = () => { const [toggleTab, setToggleTab] = useState(1); @@ -362,6 +367,7 @@ export const Tracker = () => { const [modalCreateProject, setModalCreateProject] = useState(false); const [modalCreateColl, setModalCreateColl] = useState(false); const [modalCreateTiket, setModalCreateTiket] = useState(false); + const [modalSettings, setModalSettings] = useState(false); const [valueTiket, setValueTiket] = useState(""); const [valueColl, setValueColl] = useState(""); // @@ -528,6 +534,34 @@ export const Tracker = () => { setModalCreateColl(false); } + function selectedProject(project) { + projects.filter((item) => { + if (item.name == project.name) { + console.log(project); + setModalSettings(true); + } + }); + } + + useEffect(() => { + initListeners(); + }, []); + + function initListeners() { + document.addEventListener("click", closeByClickingOut); + } + + function closeByClickingOut(event) { + const path = event.path || (event.composedPath && event.composedPath()); + + if ( + event && + !path.find((item) => item.classList && item.classList.contains("project")) + ) { + setModalSettings(false); + } + } + return (
@@ -579,21 +613,47 @@ export const Tracker = () => { setActive={setModalCreateProject} title={"Укажите название проекта:"} /> + {Boolean(projects.length) && !projectTasksOpen && projects.map((project, index) => { return ( -
setProjectTasksOpen(true)} - > -

{project.name}

+
+

setProjectTasksOpen(true)}> + {project.name} +

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

{project.count} + + selectedProject(project)} + > + ... +
+ + +
+
+ +

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

+
+
+ +

ссылка на проект

+
+
+ +

в архив

+
+
+ +

удалить

+
+
+
); })} diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index d0515f06..f7efa14c 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -41,7 +41,7 @@ display: flex; max-width: 1160px; width: 100%; - background: #E1FCCF; + background: #e1fccf; border-radius: 12px; margin: 0 auto; position: relative; @@ -89,7 +89,8 @@ } img { - filter: invert(0%) sepia(0%) saturate(2411%) hue-rotate(-25deg) brightness(118%) contrast(119%); + filter: invert(0%) sepia(0%) saturate(2411%) hue-rotate(-25deg) + brightness(118%) contrast(119%); } } @@ -120,6 +121,7 @@ } .project { + position: relative; width: 48%; background: #f1f1f1; border-radius: 12px; @@ -189,13 +191,13 @@ } } - &:after { - content: "..."; + .menu-settings { position: absolute; font-size: 21px; color: #6f6f6f; right: 0; top: -35%; + z-index: 999; @media (max-width: 430px) { display: none; @@ -226,7 +228,6 @@ } } button { - } } @@ -239,25 +240,25 @@ } .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; + 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; - } + span { + margin-right: 9px; + font-weight: 700; + font-size: 18px; + } } .create-newProject { @@ -307,7 +308,7 @@ } h4 { - color: #1458DD; + color: #1458dd; font-weight: 700; font-size: 22px; line-height: 32px; @@ -376,7 +377,7 @@ } .addPerson { - background: #00C5A8; + background: #00c5a8; color: white; font-size: 14px; left: -35px; @@ -642,7 +643,7 @@ font-size: 18px; line-height: 32px; margin-bottom: 0; - color: #1458DD; + color: #1458dd; @media (max-width: 590px) { font-size: 15px; @@ -654,8 +655,8 @@ padding: 6px 12px; display: flex; align-items: center; - background: #FFFFFF; - border: 1px solid #DDE2E4; + background: #ffffff; + border: 1px solid #dde2e4; box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); border-radius: 6px; max-width: 450px; @@ -720,7 +721,7 @@ .task { display: flex; - background: #F1F1F1; + background: #f1f1f1; border-radius: 12px; padding: 12px 42px 7px 32px; justify-content: space-between; @@ -792,7 +793,7 @@ padding-bottom: 8px; display: flex; align-items: center; - color: #1458DD; + color: #1458dd; min-height: 48px; h3 { @@ -855,7 +856,7 @@ justify-content: space-between; cursor: pointer; transition: all 0.3s ease; - background: #F1F1F1; + background: #f1f1f1; border-radius: 12px; padding: 12px 42px 7px 32px; @@ -883,7 +884,7 @@ font-weight: 500; font-size: 10px; line-height: 24px; - color: #6F6F6F; + color: #6f6f6f; } } @@ -904,7 +905,7 @@ font-size: 10px; } p { - color: #1A1919; + color: #1a1919; font-weight: 500; font-size: 14px; line-height: 24px; @@ -930,8 +931,8 @@ padding: 6px 12px; display: flex; align-items: center; - background: #FFFFFF; - border: 1px solid #DDE2E4; + background: #ffffff; + border: 1px solid #dde2e4; box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); border-radius: 6px; max-width: 300px; @@ -976,7 +977,7 @@ } &__noItem { - background: #F1F1F1; + background: #f1f1f1; border-radius: 12px; padding: 23px 0 19px; From ab2ff123a0e35861cda87f17f56ad07e414963af Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Fri, 14 Apr 2023 15:52:21 +0300 Subject: [PATCH 6/6] Finished project menu --- src/components/ProjectTiket/ProjectTiket.js | 69 +++++++++++++++ src/components/ProjectTiket/projectTiket.scss | 85 ++++++++++++++++++ .../UI/ModalSettings/modalSettings.scss | 1 + src/pages/Tracker/Tracker.js | 77 ++--------------- src/pages/Tracker/tracker.scss | 86 ------------------- 5 files changed, 161 insertions(+), 157 deletions(-) create mode 100644 src/components/ProjectTiket/ProjectTiket.js create mode 100644 src/components/ProjectTiket/projectTiket.scss diff --git a/src/components/ProjectTiket/ProjectTiket.js b/src/components/ProjectTiket/ProjectTiket.js new file mode 100644 index 00000000..33e9ed7b --- /dev/null +++ b/src/components/ProjectTiket/ProjectTiket.js @@ -0,0 +1,69 @@ +import React, { useEffect, useState } from "react"; +import ModalSettings from "../UI/ModalSettings/ModalSettings"; + +import link from "../../images/link.svg"; +import archiveSet from "../../images/archive.svg"; +import del from "../../images/delete.svg"; +import edit from "../../images/edit.svg"; + +import "./projectTiket.scss"; + +export const ProjectTiket = ({ project, index, setOpenProject }) => { + const [modalSettings, setModalSettings] = useState(false); + + useEffect(() => { + initListeners(); + }, []); + + function initListeners() { + document.addEventListener("click", closeByClickingOut); + } + + function closeByClickingOut(event) { + const path = event.path || (event.composedPath && event.composedPath()); + + if ( + event && + !path.find((item) => item.classList && item.classList.contains("project")) + ) { + setModalSettings(false); + } + } + + return ( +
+

setOpenProject(true)}>{project.name}

+
+

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

+ {project.count} + + + setModalSettings(true)}> + ... + +
+ + +
+
+ +

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

+
+
+ +

ссылка на проект

+
+
+ +

в архив

+
+
+ +

удалить

+
+
+ +
+ ); +}; + +export default ProjectTiket; diff --git a/src/components/ProjectTiket/projectTiket.scss b/src/components/ProjectTiket/projectTiket.scss new file mode 100644 index 00000000..6a3cc218 --- /dev/null +++ b/src/components/ProjectTiket/projectTiket.scss @@ -0,0 +1,85 @@ +.project { + position: relative; + width: 48%; + background: #f1f1f1; + border-radius: 12px; + padding: 17px 26px 16px; + cursor: pointer; + max-width: 440px; + + @media (max-width: 1068px) { + width: 47%; + } + + @media (max-width: 785px) { + width: 100%; + } + + @media (max-width: 430px) { + padding: 8px 13px 8px; + } + + h3 { + font-weight: 700; + font-size: 18px; + line-height: 32px; + color: #111112; + margin-bottom: 10px; + } + + &__info { + display: flex; + align-items: center; + position: relative; + + @media (max-width: 430px) { + justify-content: space-between; + } + + p { + color: #6f6f6f; + font-weight: 500; + font-size: 12px; + line-height: 24px; + margin-bottom: 0; + } + + .count { + margin-left: 8px; + width: 21px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + background: #dddddd; + border-radius: 4px; + font-weight: 500; + font-size: 14px; + line-height: 24px; + color: #6f6f6f; + } + + .add { + color: #6f6f6f; + font-size: 17px; + margin: 0 25px 0 auto; + + @media (max-width: 430px) { + display: none; + } + } + + .menu-settings { + position: absolute; + font-size: 21px; + color: #6f6f6f; + right: 0; + top: -35%; + z-index: 999; + + @media (max-width: 430px) { + display: none; + } + } + } +} diff --git a/src/components/UI/ModalSettings/modalSettings.scss b/src/components/UI/ModalSettings/modalSettings.scss index a2fb34f3..a77ea861 100644 --- a/src/components/UI/ModalSettings/modalSettings.scss +++ b/src/components/UI/ModalSettings/modalSettings.scss @@ -25,5 +25,6 @@ &__settings.active { transform: scale(1); + z-index: 99; } } diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js index 9aa6d3b6..a81ae8ff 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.js @@ -10,6 +10,7 @@ import { getProjects } from "../../redux/projectsTrackerSlice"; import ModalTiket from "../../components/UI/ModalTiket/ModalTiket"; import ModalCreate from "../../components/UI/ModalCreate/ModalCreate"; import ModalAdd from "../../components/UI/ModalAdd/ModalAdd"; +import ProjectTiket from "../../components/ProjectTiket/ProjectTiket"; import project from "../../images/trackerProject.svg"; import tasks from "../../images/trackerTasks.svg"; @@ -21,13 +22,8 @@ import filesBoard from "../../images/filesBoard.svg"; import search from "../../images/serchIcon.png"; import noProjects from "../../images/noProjects.png"; import arrow from "../../images/arrowCalendar.png"; -import link from "../../images/link.svg"; -import archiveSet from "../../images/archive.svg"; -import del from "../../images/delete.svg"; -import edit from "../../images/edit.svg"; import "./tracker.scss"; -import ModalSettings from "../../components/UI/ModalSettings/ModalSettings"; export const Tracker = () => { const [toggleTab, setToggleTab] = useState(1); @@ -367,7 +363,6 @@ export const Tracker = () => { const [modalCreateProject, setModalCreateProject] = useState(false); const [modalCreateColl, setModalCreateColl] = useState(false); const [modalCreateTiket, setModalCreateTiket] = useState(false); - const [modalSettings, setModalSettings] = useState(false); const [valueTiket, setValueTiket] = useState(""); const [valueColl, setValueColl] = useState(""); // @@ -534,34 +529,6 @@ export const Tracker = () => { setModalCreateColl(false); } - function selectedProject(project) { - projects.filter((item) => { - if (item.name == project.name) { - console.log(project); - setModalSettings(true); - } - }); - } - - useEffect(() => { - initListeners(); - }, []); - - function initListeners() { - document.addEventListener("click", closeByClickingOut); - } - - function closeByClickingOut(event) { - const path = event.path || (event.composedPath && event.composedPath()); - - if ( - event && - !path.find((item) => item.classList && item.classList.contains("project")) - ) { - setModalSettings(false); - } - } - return (
@@ -618,43 +585,11 @@ export const Tracker = () => { !projectTasksOpen && projects.map((project, index) => { return ( -
-

setProjectTasksOpen(true)}> - {project.name} -

-
-

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

- {project.count} - + - selectedProject(project)} - > - ... - -
- - -
-
- -

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

-
-
- -

ссылка на проект

-
-
- -

в архив

-
-
- -

удалить

-
-
- -
+ ); })} {!Boolean(projects.length) && !projectTasksOpen && ( diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index f7efa14c..04a9566f 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -120,92 +120,6 @@ padding: 15px; } - .project { - position: relative; - width: 48%; - background: #f1f1f1; - border-radius: 12px; - padding: 17px 26px 16px; - cursor: pointer; - max-width: 440px; - - @media (max-width: 1068px) { - width: 47%; - } - - @media (max-width: 785px) { - width: 100%; - } - - @media (max-width: 430px) { - padding: 8px 13px 8px; - } - - h3 { - font-weight: 700; - font-size: 18px; - line-height: 32px; - color: #111112; - margin-bottom: 10px; - } - - &__info { - display: flex; - align-items: center; - position: relative; - - @media (max-width: 430px) { - justify-content: space-between; - } - - p { - color: #6f6f6f; - font-weight: 500; - font-size: 12px; - line-height: 24px; - margin-bottom: 0; - } - - .count { - margin-left: 8px; - width: 21px; - height: 24px; - display: flex; - align-items: center; - justify-content: center; - background: #dddddd; - border-radius: 4px; - font-weight: 500; - font-size: 14px; - line-height: 24px; - color: #6f6f6f; - } - - .add { - color: #6f6f6f; - font-size: 17px; - margin: 0 25px 0 auto; - - @media (max-width: 430px) { - display: none; - } - } - - .menu-settings { - position: absolute; - font-size: 21px; - color: #6f6f6f; - right: 0; - top: -35%; - z-index: 999; - - @media (max-width: 430px) { - display: none; - } - } - } - } - .no-projects { display: flex; flex-direction: column;