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

{worker.skils}

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

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

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

+

Удалить

+

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

{task.task}

- ...

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

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

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

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

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

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

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

+
+ setValueColl(e.target.value)} + > +
+
+ +
+
setModalCreateColl(true)} diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index f77f2df1..ca126279 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -333,6 +333,8 @@ } &__item { + width: 328px; + height: 154px; padding: 16px; position: relative; box-shadow: 0px 3px 2px -2px rgba(0, 0, 0, 0.06), @@ -443,6 +445,8 @@ position: relative; display: flex; justify-content: space-between; + min-width: 300px; + span { color: #6f6f6f; font-weight: 500;