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 разработчик",
},
]);
const settings = {
infinite: true,
speed: 300,
@ -52,9 +53,9 @@ export const SliderWorkers = ({}) => {
</div>
<Slider {...settings}>
{workers.map((worker) => {
{workers.map((worker, index) => {
return (
<div className="worker">
<div className="worker" key={index}>
<img src={worker.avatar}></img>
<div className="worker-description">
<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">
<img src={category} className="title-project__category"></img>
Проект: {tiket.name}
<div className="title-project__menu">
<p>Редактировать</p>
<p>Удалить</p>
</div>
</h3>
<div className="content__task">
<h5>{tiket.code}</h5>
<div className="content__description">

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

@ -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 {

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

@ -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 = () => {
>
<div className="tasks__board__item__title">
<p>{task.task}</p>
<span>...</span>
</div>
<p className="tasks__board__item__description">
{task.description}

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

@ -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;
}