From a21063663cbb41740b23e30793c0125ffbfe0c1c Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Thu, 23 Mar 2023 21:18:48 +0300 Subject: [PATCH] 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 {