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

Merge remote-tracking branch 'origin/parthners-area-fix-modal' into parthners-area

Browse Source
This commit is contained in:
Николай Полтщук 2023-03-28 14:42:58 +03:00
commit c1eb60d3ab
11 changed files with 233 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/SideBar/sidebar.scss
View File

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

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

@ -30,11 +30,14 @@ export const SliderWorkers = ({title, titleInfo, subTitle}) => {
skils: "React / Vue Front end, Middle разработчик",
},
]);
const settings = {
infinite: true,
speed: 300,
speed: 1000,
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 4500,
};
if (window.innerWidth < 575) {
@ -54,9 +57,9 @@ export const SliderWorkers = ({title, titleInfo, subTitle}) => {
: ""
}
<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>

6
src/components/UI/ModalCreate/ModalCreate.js
View File

@ -9,13 +9,17 @@ export const ModalCreate = ({ active, setActive, title }) => {
const dispatch = useDispatch();
function createName() {
if (inputValue === "") {
return;
} else {
let newItem = {
name: inputValue,
count: 0,
};
dispatch(setProject(newItem));
setActive(false);
setInputValue("")
setInputValue("");
}
}
return (

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

@ -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 }) => {
<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 {

11
src/pages/AuthForDevelopers/AuthForDevelopers.js
View File

@ -31,6 +31,13 @@ const AuthForDevelopers = () => {
}
}, [getToken]);
function scrollToForm() {
window.scrollTo({
top: 850,
behavior: "smooth",
});
}
return (
<section className="auth-developers">
<AuthHeader />
@ -44,13 +51,13 @@ const AuthForDevelopers = () => {
/>
<div className="container">
<div className="change-mode">
<div className="change-mode__arrow">
<div className="change-mode__arrow" onClick={() => scrollToForm()}>
<img src={arrowBtn}></img>
</div>
<div className="buttons">
<Link to={"/authdev"}>
<button className="change-mode__developersForDev">
Для разработчика
Для разработчиков
</button>
</Link>
<Link to={"/auth"}>

1
src/pages/AuthForDevelopers/authForDevelopers.scss
View File

@ -25,6 +25,7 @@
&__arrow {
margin-top: 360px;
z-index: 99;
}
@media (max-width: 575.98px) {

11
src/pages/AuthForPartners/AuthForPartners.js
View File

@ -30,6 +30,13 @@ const AuthForPartners = () => {
}
}, [getToken]);
function scrollToForm() {
window.scrollTo({
top: 850,
behavior: "smooth",
});
}
return (
<section className="auth-partners">
<AuthHeader />
@ -39,13 +46,13 @@ const AuthForPartners = () => {
<img className="auth-partners__vector-black" src={vectorBlack} alt="" />
<div className="container">
<div className="change-mode">
<div className="change-mode__arrow">
<div className="change-mode__arrow" onClick={() => scrollToForm()}>
<img src={arrowBtn}></img>
</div>
<div className="buttons">
<Link to={"/authdev"}>
<button className="change-mode__developersForPart">
Для разработчика
Для разработчиков
</button>
</Link>
<Link to={"/auth"}>

2
src/pages/AuthForPartners/authForPartners.scss
View File

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

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

@ -4,6 +4,9 @@ import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
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";
@ -17,25 +20,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: "Открытые",
@ -245,9 +233,20 @@ 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 [valueColl, setValueColl] = useState("");
//
const [selectedTab, setSelectedTab] = useState({
name: "",
indexTab: 0,
task: [],
});
const [startWrapperIndex, setStartWrapperIndex] = useState(null);
const [wrapperHover, setWrapperHover] = useState([
@ -258,7 +257,6 @@ export const Tracker = () => {
]);
const projects = useSelector(getProjects);
const dispatch = useDispatch();
const toggleTabs = (index) => {
setToggleTab(index);
@ -357,8 +355,42 @@ 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);
setValueTiket("");
}
function createTab() {
let newTab = {
name: valueColl,
open: false,
tasks: [],
};
tabTaskMok.unshift(newTab);
setValueColl("");
setModalCreateColl(false);
}
return (
@ -421,7 +453,7 @@ export const Tracker = () => {
setActive={setModalCreateProject}
title={"Укажите название проекта:"}
/>
<button onClick={createProject}>
<button onClick={() => setModalCreateProject(true)}>
<span>+</span>Создать проект
</button>
</div>
@ -433,12 +465,32 @@ export const Tracker = () => {
}
>
<div className="tasks__head">
<ModalCreate
active={modalCreateColl}
setActive={setModalCreateColl}
title={"Добавить колонку: "}
/>
<h4>Проект : Разработка трекера</h4>
<div
className={
modalCreateColl ? "modal-project active" : "modal-project"
}
onClick={() => setModalCreateColl(false)}
>
<div
className="modal-project__content"
onClick={(e) => e.stopPropagation()}
>
<div className="title-project">
<h4>Введите название карточки</h4>
<div className="input-container">
<input
className="name-project"
value={valueColl}
onChange={(e) => setValueColl(e.target.value)}
></input>
</div>
</div>
<button className="create-project" onClick={createTab}>
Создать
</button>
</div>
</div>
<span
className="tasks__head__add"
onClick={() => setModalCreateColl(true)}
@ -461,11 +513,38 @@ export const Tracker = () => {
<img src={selectArrow} alt="arrow" />
</div>
</div>
<ModalTiket
active={modalActiveTicket}
setActive={setModalActiveTicket}
/>
<div
className={
modalCreateTiket ? "modal-project active" : "modal-project"
}
onClick={() => setModalCreateTiket(false)}
>
<div
className="modal-project__content"
onClick={(e) => e.stopPropagation()}
>
<div className="title-project">
<h4>Введите название карточки</h4>
<div className="input-container">
<input
className="name-project"
value={valueTiket}
onChange={(e) => setValueTiket(e.target.value)}
></input>
</div>
</div>
<button className="create-project" onClick={createTiket}>
Создать
</button>
</div>
</div>
<div className="tasks__container">
{tabTaskMok.map((section, wrapperIndex) => {
return (
@ -487,7 +566,19 @@ export const Tracker = () => {
{section.name}
</span>
<div>
<span className="add">+</span>
<span
className="add"
onClick={(e) =>
selectedTabTask(
e,
wrapperIndex,
section.name,
section.tasks
)
}
>
+
</span>
<span className="more">...</span>
</div>
</div>
@ -510,7 +601,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}

84
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,21 @@
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 {
width: 328px;
height: 154px;
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 +350,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 +370,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 +394,7 @@
font-weight: 500;
font-size: 12px;
line-height: 15px;
color: #6E7C87;
color: #6e7c87;
margin-left: 5px;
}
}
@ -422,7 +428,7 @@
}
.moreItems {
background: #8BCC60;
background: #8bcc60;
}
.lessItems {
@ -439,8 +445,10 @@
position: relative;
display: flex;
justify-content: space-between;
min-width: 300px;
span {
color: #6F6F6F;
color: #6f6f6f;
font-weight: 500;
font-size: 16px;
line-height: 24px;
@ -448,7 +456,7 @@
}
.add {
color: #6F6F6F;
color: #6f6f6f;
font-size: 19px;
}
@ -482,7 +490,7 @@
.archive {
&__title {
padding-bottom: 8px;
border-bottom: 1px solid #DDE2E4;
border-bottom: 1px solid #dde2e4;
display: flex;
align-items: center;
@ -503,7 +511,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 +543,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 +566,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 {