apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed modal

Browse Source
This commit is contained in:
MaxOvs19 2023-03-23 21:18:48 +03:00
parent 6419b9dd97
commit a21063663c
5 changed files with 73 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/SliderWorkers/SliderWorkers.js
View File

@ -30,6 +30,7 @@ export const SliderWorkers = ({}) => {
skils: "React / Vue Front end, Middle разработчик", skils: "React / Vue Front end, Middle разработчик",
}, },
]); ]);
const settings = { const settings = {
infinite: true, infinite: true,
speed: 300, speed: 300,
@ -52,9 +53,9 @@ export const SliderWorkers = ({}) => {
</div> </div>
<Slider {...settings}> <Slider {...settings}>
{workers.map((worker) => { {workers.map((worker, index) => {
return ( return (
<div className="worker"> <div className="worker" key={index}>
<img src={worker.avatar}></img> <img src={worker.avatar}></img>
<div className="worker-description"> <div className="worker-description">
<p>{worker.skils}</p> <p>{worker.skils}</p>

5
src/components/UI/ModalTiket/ModalTiket.js
View File

@ -44,7 +44,12 @@ export const ModalTiket = ({ active, setActive }) => {
<h3 className="title-project"> <h3 className="title-project">
<img src={category} className="title-project__category"></img> <img src={category} className="title-project__category"></img>
Проект: {tiket.name} Проект: {tiket.name}
<div className="title-project__menu">
<p>Редактировать</p>
<p>Удалить</p>
</div>
</h3> </h3>
<div className="content__task"> <div className="content__task">
<h5>{tiket.code}</h5> <h5>{tiket.code}</h5>
<div className="content__description"> <div className="content__description">

18
src/components/UI/ModalTiket/ModalTiket.scss
View File

@ -39,6 +39,24 @@
&__category { &__category {
margin-right: 17px; 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 { &__task {

22
src/pages/Tracker/Tracker.js
View File

@ -3,6 +3,9 @@ import React, { useState } from "react";
import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader"; import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
import { Footer } from "../../components/Footer/Footer"; 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 ModalTiket from "../../components/UI/ModalTiket/ModalTiket";
import ModalCreate from "../../components/UI/ModalCreate/ModalCreate"; import ModalCreate from "../../components/UI/ModalCreate/ModalCreate";
@ -16,25 +19,10 @@ import filesBoard from "../../images/filesBoard.svg";
import search from "../../images/search.svg"; import search from "../../images/search.svg";
import "./tracker.scss"; import "./tracker.scss";
import { useDispatch, useSelector } from "react-redux";
import { getProjects } from "../../redux/projectsTrackerSlice";
export const Tracker = () => { export const Tracker = () => {
const [toggleTab, setToggleTab] = useState(1); const [toggleTab, setToggleTab] = useState(1);
// const [projects] = useState([
// {
// name: "Разработка трекера",
// count: 4,
// },
// {
// name: "Кинотеатр",
// count: 4,
// },
// {
// name: "Проект страхование",
// count: 4,
// },
// ]);
const [tabTaskMok, setTabTaskMok] = useState([ const [tabTaskMok, setTabTaskMok] = useState([
{ {
name: "Открытые", name: "Открытые",
@ -257,7 +245,6 @@ export const Tracker = () => {
]); ]);
const projects = useSelector(getProjects); const projects = useSelector(getProjects);
const dispatch = useDispatch();
const toggleTabs = (index) => { const toggleTabs = (index) => {
setToggleTab(index); setToggleTab(index);
@ -504,7 +491,6 @@ export const Tracker = () => {
> >
<div className="tasks__board__item__title"> <div className="tasks__board__item__title">
<p>{task.task}</p> <p>{task.task}</p>
<span>...</span>
</div> </div>
<p className="tasks__board__item__description"> <p className="tasks__board__item__description">
{task.description} {task.description}

76
src/pages/Tracker/tracker.scss
View File

@ -1,5 +1,5 @@
.tracker { .tracker {
background: #F1F1F1; background: #f1f1f1;
height: 100%; height: 100%;
min-height: 100vh; min-height: 100vh;
font-family: "LabGrotesque", sans-serif; font-family: "LabGrotesque", sans-serif;
@ -22,7 +22,7 @@
margin-top: 70px; margin-top: 70px;
.row { .row {
margin-right: 0px margin-right: 0px;
} }
} }
@ -66,9 +66,8 @@
width: calc(100% - 150px); width: calc(100% - 150px);
} }
&__projects { &__projects {
background: #FFFFFF; background: #ffffff;
border-radius: 0 12px 12px 12px; border-radius: 0 12px 12px 12px;
padding: 26px 24px 40px; padding: 26px 24px 40px;
flex-wrap: wrap; flex-wrap: wrap;
@ -87,7 +86,7 @@
.project { .project {
width: 48%; width: 48%;
background: #F1F1F1; background: #f1f1f1;
border-radius: 12px; border-radius: 12px;
padding: 17px 26px 16px; padding: 17px 26px 16px;
cursor: pointer; cursor: pointer;
@ -122,7 +121,7 @@
} }
p { p {
color: #6F6F6F; color: #6f6f6f;
font-weight: 500; font-weight: 500;
font-size: 12px; font-size: 12px;
line-height: 24px; line-height: 24px;
@ -136,16 +135,16 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: #DDDDDD; background: #dddddd;
border-radius: 4px; border-radius: 4px;
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
color: #6F6F6F; color: #6f6f6f;
} }
.add { .add {
color: #6F6F6F; color: #6f6f6f;
font-size: 17px; font-size: 17px;
margin: 0 25px 0 auto; margin: 0 25px 0 auto;
@ -155,10 +154,10 @@
} }
&:after { &:after {
content: '...'; content: "...";
position: absolute; position: absolute;
font-size: 21px; font-size: 21px;
color: #6F6F6F; color: #6f6f6f;
right: 0; right: 0;
top: -35%; top: -35%;
@ -170,7 +169,7 @@
} }
button { button {
background: #52B709; background: #52b709;
border-radius: 44px; border-radius: 44px;
max-width: 188px; max-width: 188px;
height: 50px; height: 50px;
@ -179,7 +178,7 @@
font-weight: 400; font-weight: 400;
font-size: 15px; font-size: 15px;
line-height: 32px; line-height: 32px;
color: #FFFFFF; color: #ffffff;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -194,7 +193,7 @@
&__tasks { &__tasks {
display: none; display: none;
background: #FFFFFF; background: #ffffff;
border-radius: 12px; border-radius: 12px;
padding: 13px 23px 65px; padding: 13px 23px 65px;
flex-direction: column; flex-direction: column;
@ -217,10 +216,9 @@
} }
.tasks { .tasks {
&__head { &__head {
display: flex; display: flex;
border-bottom: 1px solid #DDE2E4; border-bottom: 1px solid #dde2e4;
padding: 0 25px 15px; padding: 0 25px 15px;
align-items: center; align-items: center;
width: 1525px; width: 1525px;
@ -236,7 +234,7 @@
&__add { &__add {
width: 33px; width: 33px;
height: 33px; height: 33px;
background: #52B709; background: #52b709;
border-radius: 44px; border-radius: 44px;
color: whitesmoke; color: whitesmoke;
cursor: pointer; cursor: pointer;
@ -276,14 +274,14 @@
} }
span { span {
color: #252C32; color: #252c32;
font-weight: 500; font-weight: 500;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
display: flex; display: flex;
width: 32px; width: 32px;
height: 32px; height: 32px;
border: 1px solid #DDE2E4; border: 1px solid #dde2e4;
border-radius: 50px; border-radius: 50px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -298,7 +296,7 @@
margin-left: 18px; margin-left: 18px;
} }
span { span {
color: #252C32; color: #252c32;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
@ -314,8 +312,10 @@
} }
&__board { &__board {
background: #F5F7F9; 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); 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; border-radius: 8px;
padding: 16px 14px 16px 8px; padding: 16px 14px 16px 8px;
width: 350px; width: 350px;
@ -326,17 +326,19 @@
position: relative; position: relative;
transition: all 0.3s ease; transition: all 0.3s ease;
&__hover { &__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 { &__item {
padding: 16px; padding: 16px;
position: relative; 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; border-radius: 6px;
background: #FFFFFF; background: #ffffff;
cursor: pointer; cursor: pointer;
&__hide { &__hide {
@ -346,8 +348,10 @@
&__title { &__title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
position: relative;
p { p {
color: #1A1919; color: #1a1919;
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
@ -364,13 +368,13 @@
padding-bottom: 13px; padding-bottom: 13px;
width: 24px; width: 24px;
height: 24px; height: 24px;
border: 1px solid #DDDDDD; border: 1px solid #dddddd;
} }
} }
&__description { &__description {
margin: 8px 0 15px; margin: 8px 0 15px;
color: #5C6165; color: #5c6165;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 140%; line-height: 140%;
@ -388,7 +392,7 @@
font-weight: 500; font-weight: 500;
font-size: 12px; font-size: 12px;
line-height: 15px; line-height: 15px;
color: #6E7C87; color: #6e7c87;
margin-left: 5px; margin-left: 5px;
} }
} }
@ -422,7 +426,7 @@
} }
.moreItems { .moreItems {
background: #8BCC60; background: #8bcc60;
} }
.lessItems { .lessItems {
@ -440,7 +444,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
span { span {
color: #6F6F6F; color: #6f6f6f;
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
@ -448,7 +452,7 @@
} }
.add { .add {
color: #6F6F6F; color: #6f6f6f;
font-size: 19px; font-size: 19px;
} }
@ -482,7 +486,7 @@
.archive { .archive {
&__title { &__title {
padding-bottom: 8px; padding-bottom: 8px;
border-bottom: 1px solid #DDE2E4; border-bottom: 1px solid #dde2e4;
display: flex; display: flex;
align-items: center; align-items: center;
@ -503,7 +507,7 @@
&__search { &__search {
border: 2px solid; border: 2px solid;
border-color: var(--ds-border-input, #DFE1E6); border-color: var(--ds-border-input, #dfe1e6);
margin-left: auto; margin-left: auto;
padding: 5px; padding: 5px;
display: flex; display: flex;
@ -535,7 +539,7 @@
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 4px; width: 4px;
background: 0 0; 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; border-radius: 20px;
} }