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

Merge branch 'main' of https://git.itguild.info/apuc/guild_front into fixed-pages

Browse Source
This commit is contained in:
MaxOvs19
2023-12-11 14:16:52 +03:00
parent f98e788201 5861fbe4b1
commit 7e36248e69
66 changed files with 521 additions and 797 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/Article/Article.jsx
View File

@ -73,7 +73,7 @@ export const Article = () => {
предпринимателями и тщательно проверяем своих партнеров.
Партнерами являются агентства, которые специализируются на
оказании услуг в формате аутстафф-модели и обладают глубокой
экспертизой в разработке и внедрении ИТ-проектов.
экспертизой в разработке и внедрении IT-проектов.
</p>
</div>
<img src={mockImgArticle} className="article-blog__body-img" />
@ -81,7 +81,7 @@ export const Article = () => {
<p>
С одной стороны, зарплаты в сфере разработки растут, с другой
стороны, появляется огромное количество новичков, которые хотят
легко и просто войти в ИТ-сферу на волне востребованности и
легко и просто войти в IT-сферу на волне востребованности и
больших зарплат. Разумеется, это приводит к осторожному отношению
работодателя к выпускникам различных курсов. Нет такого курса,
который даст на 100% готового джуна, слишком многое завязано на

32
src/pages/AuthForPartners/AuthForPartners.jsx → src/pages/Auth/Auth.jsx
View File

@ -1,18 +1,15 @@
import React, { useEffect } from "react";
import { useSelector } from "react-redux";
import { Link, useNavigate } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import { selectAuth } from "@redux/outstaffingSlice";
import { scrollToForm } from "@utils/helper";
import { AuthBox } from "@components/AuthBox/AuthBox";
import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
import { Footer } from "@components/Common/Footer/Footer";
import SideBar from "@components/SideBar/SideBar";
import SliderWorkers from "@components/SliderWorkers/SliderWorkers";
import arrowBtn from "assets/icons/arrows/arrowRight.svg";
import arrow from "assets/icons/arrows/arrow__login_page.png";
import text from "assets/images/Body_Text.png";
import vector from "assets/images/Vector_Smart_Object.png";
@ -20,9 +17,9 @@ import vectorBlack from "assets/images/Vector_Smart_Object_black.png";
import authImg from "assets/images/auth_img.png";
import cross from "assets/images/cross.png";
import "./authForPartners.scss";
import "./auth.scss";
const AuthForPartners = () => {
const Auth = () => {
const isAuth = useSelector(selectAuth);
let navigate = useNavigate();
@ -46,28 +43,10 @@ const AuthForPartners = () => {
<img className="auth-partners__vector" src={vector} alt="" />
<img className="auth-partners__vector-black" src={vectorBlack} alt="" />
<div className="container">
<div className="change-mode">
<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"}>
<button className="change-mode__partnersForPart">
Для партнёров
</button>
</Link>
</div>
</div>
<div className="row">
<div className="col-12 col-xl-6">
<div className="auth-partners__box">
<AuthBox title="для партнёров" />
<AuthBox />
</div>
</div>
<div className="col-xl-2">
@ -90,7 +69,6 @@ const AuthForPartners = () => {
<img className="cross" src={cross} alt="" />
</div>
<div>
{/* <img className='auth-specialists} src={specialists} alt="" /> */}
<p className="auth-partners__specialists">
300 Специалистов
</p>
@ -121,4 +99,4 @@ const AuthForPartners = () => {
);
};
export default AuthForPartners;
export default Auth;

2
src/pages/AuthForPartners/authForPartners.scss → src/pages/Auth/auth.scss
View File

@ -181,7 +181,7 @@
&__img-text {
position: absolute;
right: -68px;
bottom: -84px;
bottom: 0px;
}
@media (max-width: 575.98px) {

8
src/pages/AuthForCandidate/AuthForCandidate.jsx
View File

@ -146,14 +146,14 @@ export const AuthForCandidate = () => {
<AuthHeader />
<div className="container">
<AuthBlock
title="Войти, уже есть доступ"
description="если вы получили доступ пройдя
title="Войти, если есть доступ"
description="Если вы получили доступ, пройдя
2 шага для входа или хотите узнать
свои результаты в кабинете"
/>
<div className="auth-candidate__start">
<h2 className="auth-candidate__start__title">
Хочу в команду <span>Айти специалистов</span>
Хочу в команду <span>IT-специалистов</span>
</h2>
<div className="change-mode__arrow">
<img src={arrowBtn} alt="#"></img>
@ -162,7 +162,7 @@ export const AuthForCandidate = () => {
Для нас не имеет значение Ваша локация.
</p>
<div className="auth-candidate__start__categoriesWrapper">
<StepsForCandidate step="шаг 1 - выбери специализацтию" />
<StepsForCandidate step="шаг 1 - выберите специализацию" />
{personalInfoItems.map((item, index) => {
return (
<CategoriesItem

2
src/pages/AuthForCandidate/authForCandidate.scss
View File

@ -64,6 +64,6 @@
}
footer {
margin-top: 70px;
margin-top: 10px;
}
}

124
src/pages/AuthForDevelopers/AuthForDevelopers.jsx
View File

@ -1,124 +0,0 @@
import React, { useEffect } from "react";
import { useSelector } from "react-redux";
import { Link, useNavigate } from "react-router-dom";
import { selectAuth } from "@redux/outstaffingSlice";
import { scrollToForm } from "@utils/helper";
import { AuthBox } from "@components/AuthBox/AuthBox";
import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
import { Footer } from "@components/Common/Footer/Footer";
import SideBar from "@components/SideBar/SideBar";
import SliderWorkers from "@components/SliderWorkers/SliderWorkers";
import arrowBtn from "assets/icons/arrows/arrowRight.svg";
import arrow from "assets/icons/arrows/arrow__login_page.png";
import text from "assets/images/Body_Text.png";
import vector from "assets/images/Vector_Smart_Object.png";
import vectorBlack from "assets/images/Vector_Smart_Object_black.png";
import cross from "assets/images/cross.png";
import medium from "assets/images/medium_male_big.png";
import "./authForDevelopers.scss";
const AuthForDevelopers = () => {
const isAuth = useSelector(selectAuth);
let navigate = useNavigate();
const getToken = localStorage.getItem("auth_token");
useEffect(() => {
if (isAuth || getToken) {
navigate("/profile");
}
}, [getToken]);
return (
<section className="auth-developers">
<AuthHeader />
<SliderWorkers
title={"Свободные разработчики"}
titleInfo={"для Вашей команды"}
subTitle={true}
/>
<div className="auth-developers__background">
<img className="auth-developers__vector" src={vector} alt="" />
<img
className="auth-developers__vector-black"
src={vectorBlack}
alt="#"
/>
<div className="container">
<div className="change-mode">
<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"}>
<button className="change-mode__partnersForDev">
Для партнёров
</button>
</Link>
</div>
</div>
<div className="row">
<div className="col-12 col-xl-6">
<div className="auth-developers__box">
<AuthBox title="для разработчиков" />
</div>
</div>
<div className="col-xl-2">
<img className="auth-developers__arrow" src={arrow} alt="" />
</div>
<div className="col-12 col-xl-4">
<div className="auth-developers__info">
<div className="auth-developers__info-box">
<img src={medium} alt="" />
<h3>
Frontend разработчик,
<br /> Middle
</h3>
</div>
<div className="auth-developers__info-container">
<div className="auth-developers__info-img">
<div>
<img className="cross" src={cross} alt="" />
</div>
<div>
{/* <img className='auth-specialists} src={specialists} alt="" /> */}
<p className="auth-developers__specialists">
300 Специалистов
</p>
</div>
</div>
<ul className="auth-developers__info-list">
<li className="auth-developers__info-item">
Ruby on Rails
</li>
<li className="auth-developers__info-item">PHP</li>
<li className="auth-developers__info-item">Python</li>
<li className="auth-developers__info-item">Vue.js</li>
<li className="auth-developers__info-item">React. JS</li>
</ul>
</div>
<img className="auth-developers__img-text" src={text} alt="" />
</div>
</div>
</div>
<Footer />
</div>
</div>
<SideBar />
</section>
);
};
export default AuthForDevelopers;

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

@ -1,240 +0,0 @@
.auth-developers {
font-family: "LabGrotesque", sans-serif;
overflow: hidden;
position: relative;
&__background {
background-color: #f1f1f1;
position: relative;
}
&__vector,
&__vector-black {
position: absolute;
}
&__vector {
top: -37px;
left: -285px;
}
&__vector-black {
top: 460px;
right: -224px;
@media (max-width: 1200px) {
top: 370px;
}
@media (max-width: 1024px) {
top: 180px;
}
}
&__arrow {
margin-top: 360px;
z-index: 99;
@media (max-width: 1200px) {
display: none;
}
}
@media (max-width: 575.98px) {
&__vector,
&__vector-black,
&__arrow {
display: none;
}
}
&__info {
background-color: #e1fccf;
margin-top: 70px;
max-width: 310px;
padding-top: 30px;
position: relative;
padding-bottom: 310px;
@media (max-width: 1200px) {
display: none;
}
}
&__info-box {
display: flex;
align-items: center;
}
@media (max-width: 575.98px) {
&__info {
max-width: 380px;
}
&__info-box {
flex-direction: column;
justify-content: center;
}
}
@media (max-width: 375.98px) {
&__info {
max-width: 340px;
}
}
&__info-box > img {
width: 165px;
height: 165px;
margin-left: -84px;
margin-right: 30px;
}
@media (max-width: 575.98px) {
&__info-box > img {
margin-left: 0px;
margin-right: 0px;
}
}
&__info-box > h3 {
font-family: "GT Eesti Pro Display";
font-size: 2em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
}
@media (max-width: 575.98px) {
&__info-box > h3 {
margin-top: 20px;
}
}
&__info-container {
display: flex;
position: relative;
}
&__info-img {
display: flex;
flex-direction: column;
text-align: center;
margin-top: 28px;
margin-left: -40px;
}
&__info-img > div > img {
margin-bottom: 100px;
}
&__specialists {
font-family: "GT Eesti Pro Display";
font-size: 1.8em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 26.12px;
text-align: left;
transform: rotate(-90deg);
text-transform: uppercase;
}
&__info-list {
list-style: none;
margin-top: 110px;
position: absolute;
right: -70px;
}
@media (max-width: 575.98px) {
&__info-list {
left: 34px;
}
}
&__info-item {
color: #1f1f1f;
font-family: "GT Eesti Pro Display";
font-size: 4em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 56.95px;
text-align: left;
text-decoration: underline;
text-transform: uppercase;
}
@media (max-width: 575.98px) {
&__info-item {
font-size: 2.6em;
}
}
&__img-text {
position: absolute;
right: -68px;
bottom: -84px;
}
@media (max-width: 575.98px) {
&__img-text {
right: 0px;
bottom: -40px;
}
}
////////////////////////////////////
&__auth-link {
display: block;
}
&__auth-link a {
display: block;
width: 100%;
height: 100%;
color: #fff;
}
@media (max-width: 766px) {
&__form-buttons {
flex-direction: column;
}
&__form-btn {
margin: 0;
margin-bottom: 1.5rem;
}
}
}
.change-mode {
&__partnersForDev {
background: #52b7098c;
color: #2d6505;
margin-left: -35px;
}
&__partnersForDev,
&__developersForDev {
width: 220px;
height: 50px;
border-radius: 44px;
font-size: 16px;
border: none;
}
&__developersForDev {
position: relative;
background: #406128;
color: white;
}
@media (max-width: 768px) {
&__partnersForDev {
margin: 15px 0 0 0;
}
}
}

5
src/pages/CompanyInfo/CompanyInfo.jsx
View File

@ -27,7 +27,7 @@ export const CompanyInfo = () => {
<img src={arrow} alt="arrow" />
</div>
<p className="companyInfo__subTitle">
Мы предоставляем вам «в аренду» it-специалистов. При этом они
Мы предоставляем вам «в аренду» IT-специалистов. При этом они
находятся в нашем штате. Оплата происходит за отработанные часы
</p>
<div className="companyInfo__info">
@ -36,7 +36,8 @@ export const CompanyInfo = () => {
<img src={countingImg} alt="countingImg" />
<div className="countingBlock__info">
<h3 className="countingBlock__title">
Экономия бюджета компании - главное преимущество аутстафинга
Экономия бюджета компании - главное преимущество
аутстаффинга
</h3>
<p className="countingBlock__subTitle">
Приблизительный просчет дал результаты в экономии до 50%

2
src/pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion.jsx
View File

@ -17,7 +17,7 @@ export const FrequentlyAskedQuestion = () => {
id: params.id,
title: "Это фриланс-платформа?",
answer:
"Нет, мы работаем только с юридическими лицами и индивидуальными предпринимателями и тщательно проверяем своих партнеров. Партнерами являются агентства, которые специализируются на оказании услуг в формате аутстафф-модели и обладают глубокой экспертизой в разработке и внедрении ИТ-проектов.",
"Нет, мы работаем только с юридическими лицами и индивидуальными предпринимателями и тщательно проверяем своих партнеров. Партнерами являются агентства, которые специализируются на оказании услуг в формате аутстафф-модели и обладают глубокой экспертизой в разработке и внедрении IT-проектов.",
});
useEffect(() => {

2
src/pages/PartnerAddRequest/PartnerAddRequest.js
View File

@ -402,7 +402,7 @@ export const PartnerAddRequest = () => {
<h4>Процесс:</h4>
</div>
<p>
При аутстафе мы предоставляем вам it-специалистов при этом они
При аутстаффе мы предоставляем вам IT-специалистов при этом они
находятся в нашем штате.
<br />
<br />

2
src/pages/PartnerRequests/PartnerRequests.jsx
View File

@ -98,7 +98,7 @@ export const PartnerRequests = () => {
<div className="partnerRequests__noItems__create">
<div className="partnerRequests__noItems__create__link">
<img src={cursorImg} alt="cursor" />
<p>У вас еще нет запросов на сотрудников</p>
<p>У вас ещё нет запросов на сотрудников</p>
<BaseButton>
<Link to={"/profile/add-request"}>
<span>+</span>

24
src/pages/PartnerSettings/PartnerSettings.jsx
View File

@ -88,16 +88,16 @@ export const PartnerSettings = () => {
<ProfileBreadcrumbs
links={[
{ name: "Главная", link: "/profile" },
{ name: "Настройка профиля", link: "/profile/settings" },
{ name: "Настройки", link: "/profile/settings" },
]}
/>
<div className="partner-settings">
<h2 className="infoPersonal__title">Настройки акаунта</h2>
<h2 className="infoPersonal__title">Настройки профиля</h2>
<div className="partner-settings__body">
<div className="partner-settings__login">
<h3 className="settings__title">Вход в систему</h3>
<p className="settings__lable-first">Изменение логина</p>
<p className="settings__label">Изменение логина</p>
<div className="settings__input">
<input
className={inputsError.name ? "warning" : ""}
@ -115,11 +115,11 @@ export const PartnerSettings = () => {
value={inputsValue.name}
/>
{inputsError.name && (
<span className="error">Минимум 2 символов</span>
<span className="error">Минимум 2 символа</span>
)}
</div>
<p className="settings__lable-second">Изменение пароля</p>
<p className="settings__label">Изменение пароля</p>
<div className="settings__input oldPassword">
<input
className={inputsError.password ? "warning" : ""}
@ -185,28 +185,26 @@ export const PartnerSettings = () => {
</div>
<div className="partner-settings__report">
<h3 className="settings__title">Документы и отчеты</h3>
<p className="settings__lable-first">Изменить провадера ЭДО</p>
<p className="settings__label">Изменить провадера ЭДО</p>
<div className="partner-settings__logo">
<div>
<label className="partner-settings__label-first">
<label className="partner-settings__label">
<img src={astral}></img>
<input type="checkbox" />
<span className="checkbox__first"></span>
<span className="checkbox"></span>
</label>
</div>
<div>
<label className="partner-settings__label-second">
<label className="partner-settings__label">
<img src={kontur}></img>
<input type="checkbox" />
<span className="checkbox__second"></span>
<span className="checkbox"></span>
</label>
</div>
</div>
<p className="settings__lable-second">
Изменение названия компании
</p>
<p className="settings__label">Изменение названия компании</p>
<div className="settings__input">
<input></input>
</div>

68
src/pages/PartnerSettings/partnerSettings.scss
View File

@ -22,20 +22,11 @@
line-height: 24px;
}
&__lable {
&-first,
&-second {
font-size: 15px;
line-height: 18px;
color: #000000;
}
&-first {
margin: 39px 0 10px 0;
}
&-second {
margin: 15px 0 10px 0;
}
&__label {
font-size: 15px;
line-height: 18px;
color: #000000;
margin: 15px 0 10px 0;
}
&__input {
@ -46,7 +37,6 @@
padding: 5px 10px;
background: #eff2f7;
border-radius: 8px;
width: 373px;
height: 35px;
border: none;
font-size: 15px;
@ -75,11 +65,12 @@
}
&__buttons {
width: 87%;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 36px 0 30px 0;
justify-content: flex-start;
gap: 20px;
margin: 30px 0 20px;
&-cancel,
&-save {
@ -113,7 +104,7 @@
}
}
@media (max-width: 570px) {
@media (max-width: 800px) {
&__input {
width: 95%;
}
@ -123,6 +114,7 @@
width: 100%;
flex-direction: column-reverse;
align-items: center;
gap: 0px;
&-save {
margin-bottom: 15px;
@ -132,13 +124,7 @@
}
.checkbox {
&__first {
margin: 0px 0 0 20px;
}
&__second {
margin: 0px 20px 0 0;
}
margin: 0px 0 0 20px;
}
.partner-settings {
@ -147,7 +133,7 @@
&__body {
display: flex;
flex-direction: row;
justify-content: space-between;
justify-content: space-around;
margin-top: 27px;
}
@ -197,15 +183,8 @@
}
&__label {
&-first,
&-second {
display: flex;
align-items: center;
}
&-second {
flex-direction: row-reverse;
}
display: flex;
align-items: center;
}
@media (max-width: 1200px) {
@ -227,10 +206,7 @@
}
&__label {
&-second,
&-first {
flex-direction: row;
}
flex-direction: row;
}
}
@ -268,6 +244,7 @@
&__report {
margin-top: 55px;
margin-bottom: 10px;
}
&__logo {
@ -276,16 +253,7 @@
}
&__label {
&-second,
&-first {
flex-direction: row;
}
}
.checkbox {
&__second {
margin: 0px 0 0 20px;
}
flex-direction: row;
}
}
}

6
src/pages/Profile/Profile.js
View File

@ -36,7 +36,7 @@ export const Profile = () => {
{
path: "profile/summary",
img: summaryIcon,
title: "Данные и резюме",
title: "Резюме",
description: "Ваше резюме<br/><span>заполнено</span>",
},
{
@ -54,7 +54,7 @@ export const Profile = () => {
{
path: "profile/settings",
img: settingIcon,
title: "Настройки аккаунта",
title: "Настройки профиля",
description: "Перейдите чтобы начать<br/> редактирование",
},
],
@ -87,7 +87,7 @@ export const Profile = () => {
{
path: "profile/settings",
img: settingIcon,
title: "Настройки аккаунта",
title: "Настройки профиля",
description: "Перейдите чтобы начать<br/> редактирование",
},
],

8
src/pages/Profile/profile.scss
View File

@ -1,8 +1,8 @@
.profile {
background: #F1F1F1;
background: #f1f1f1;
height: 100%;
min-height: 100vh;
font-family: 'LabGrotesque', sans-serif;
font-family: "LabGrotesque", sans-serif;
&__title {
font-weight: 700;
@ -14,7 +14,7 @@
p {
color: black;
}
color: #52B709;
color: #52b709;
}
@media (max-width: 560px) {
@ -28,7 +28,7 @@
}
&__info {
min-height: 128px;
min-height: 110px;
background: white;
border-radius: 12px;
margin-top: 30px;

2
src/pages/ProfileCandidate/ProfileCandidate.js
View File

@ -25,7 +25,7 @@ export const ProfileCandidate = () => {
{
path: "profile/settings",
img: settingIcon,
title: "Настройки аккаунта",
title: "Настройки профиля",
description: "Перейдите чтобы начать редактирование",
},
]);

2
src/pages/ProjectTracker/ProjectTracker.js
View File

@ -1088,7 +1088,7 @@ export const ProjectTracker = () => {
</div>
{acceptModalOpen && (
<AcceptModal
title={"В колонке еще есть задачи, Вы точно хотите удалить её ?"}
title={"В колонке ещё есть задачи, Вы точно хотите удалить её ?"}
closeModal={closeAcceptModal}
agreeHandler={() => deleteColumn(currentColumnDelete)}
/>

16
src/pages/RegistrationForCandidate/RegistrationForCandidate.js
View File

@ -17,7 +17,7 @@ export const RegistrationForCandidate = () => {
<div className="container">
<div className="registrationCandidate__start">
<h2 className="auth-candidate__start__title">
Хочу в команду <span>Айти специалистов</span>
Хочу в команду <span>IT-специалистов</span>
</h2>
<div className="change-mode__arrow">
<img src={arrowBtn}></img>
@ -41,7 +41,7 @@ export const RegistrationForCandidate = () => {
</div>
<form className="registrationCandidate__form">
<div className="registrationCandidate__form__input">
<label htmlFor="name">Ваше имя *</label>
<label htmlFor="name">Ваше имя</label>
<input id="name" type="text" placeholder="Имя" />
</div>
<div className="registrationCandidate__form__input">
@ -49,19 +49,19 @@ export const RegistrationForCandidate = () => {
<input id="summary" type="text" placeholder="Резюме" />
</div>
<div className="registrationCandidate__form__input">
<label htmlFor="email">Ваш email *</label>
<input id="email" type="text" placeholder="Email" />
<label htmlFor="email">Ваш e-mail</label>
<input id="email" type="text" placeholder="E-mail" />
</div>
<div className="registrationCandidate__form__input">
<label htmlFor="tg">Ваш телеграм*</label>
<input id="tg" type="text" placeholder="Телеграм" />
<label htmlFor="tg">Ваш telegram</label>
<input id="tg" type="text" placeholder="Telegram" />
</div>
<div className="registrationCandidate__form__input">
<label htmlFor="password">Придумайте пароль*</label>
<label htmlFor="password">Придумайте пароль</label>
<input id="password" type="text" placeholder="Пароль" />
</div>
<div className="registrationCandidate__form__input">
<label htmlFor="secondPassword">Повторите пароль*</label>
<label htmlFor="secondPassword">Повторите пароль</label>
<input id="secondPassword" type="text" placeholder="Пароль" />
</div>
<div className="registrationCandidate__form__submit">

120
src/pages/Summary/Summary.js
View File

@ -17,6 +17,8 @@ import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import rightArrow from "assets/icons/arrows/arrowRight.svg";
import arrow from "assets/icons/arrows/left-arrow.png";
import arrowDown from "assets/icons/arrows/selectArrow.png";
import deleteIcon from "assets/icons/closeProjectPersons.svg";
import gitImgItem from "assets/icons/gitItemImg.svg";
import avatarMok from "assets/images/avatarMok.png";
@ -30,7 +32,11 @@ export const Summary = () => {
const [openGit, setOpenGit] = useState(false);
const [gitInfo, setGitInfo] = useState([]);
const [editSummeryOpen, setEditSummeryOpen] = useState(false);
const [editSkills, setEditSkills] = useState(false);
const [summery, setSummery] = useState("");
const [selectedSkills, setSelectedSkills] = useState([]);
const [selectSkillsOpen, setSelectSkillsOpen] = useState(false);
const [skillsList, seSkillsList] = useState([]);
useEffect(() => {
apiRequest(
@ -40,8 +46,26 @@ export const Summary = () => {
useEffect(() => {
setSummery(profileInfo.vc_text);
setSelectedSkills(profileInfo.skillValues);
}, [profileInfo]);
useEffect(() => {
apiRequest(`/skills/get-skills-list`).then((el) => {
seSkillsList(el);
});
}, []);
function setSkills() {
apiRequest("/resume/edit-skills", {
method: "PUT",
data: {
UserCard: {
skill: selectedSkills.map((item) => item.skill_id),
},
},
}).then(() => {});
}
function editSummery() {
apiRequest("/resume/edit-text", {
method: "PUT",
@ -59,7 +83,7 @@ export const Summary = () => {
<ProfileBreadcrumbs
links={[
{ name: "Главная", link: "/profile" },
{ name: "Данные и резюме", link: "/profile/summary" },
{ name: "Резюме", link: "/profile/summary" },
]}
/>
<h2 className="summary__title">
@ -98,18 +122,84 @@ export const Summary = () => {
<div className="summary__skills skills__section">
<div className="summary__sections__head">
<h3>Основной стек</h3>
<button>Редактировать раздел</button>
<button
className={editSkills ? "edit" : ""}
onClick={() => {
if (editSkills) {
setSkills();
}
setEditSkills(!editSkills);
}}
>
{editSkills ? "Сохранить" : "Редактировать"}
</button>
</div>
<div className="skills__section__items">
<div className="skills__section__items__wrapper">
{profileInfo.skillValues &&
profileInfo.skillValues.map((skill, index) => (
<span key={skill.id} className="skill_item">
{skill.skill.name}
{profileInfo.skillValues.length > index + 1 && ","}
</span>
))}
</div>
{editSkills ? (
<div className="editSkills">
{selectedSkills &&
selectedSkills.map((skill) => {
return (
<span key={skill.skill_id}>
{skill.skill.name}
<img
src={deleteIcon}
alt="deleteIcon"
onClick={() =>
setSelectedSkills((prevValue) =>
prevValue.filter(
(item) => item.skill_id !== skill.skill_id
)
)
}
/>
</span>
);
})}
<div className="selectSkills">
<div
className="selectSkills__name"
onClick={() => setSelectSkillsOpen(!selectSkillsOpen)}
>
Выберите скилл
<img
className={selectSkillsOpen ? "open" : ""}
src={arrowDown}
/>
</div>
{selectSkillsOpen && (
<div className="selectSkills__dropDown">
{skillsList.map((skill) => {
return (
<p
onClick={() =>
setSelectedSkills((prevValue) => [
...prevValue,
{ skill: skill, skill_id: skill.id },
])
}
key={skill.id}
className="selectSkills__item"
>
{skill.name}
</p>
);
})}
</div>
)}
</div>
</div>
) : (
<div className="skills__section__items__wrapper">
{selectedSkills &&
selectedSkills.map((skill, index) => (
<span key={skill.id} className="skill_item">
{skill.skill.name}
{selectedSkills.length > index + 1 && ","}
</span>
))}
</div>
)}
</div>
</div>
)}
@ -117,7 +207,7 @@ export const Summary = () => {
<div className="summary__experience">
<div className="experience__block">
<div className="summary__sections__head">
<h3>Описание опыта работы</h3>
<h3>Опыт работы</h3>
<button
className={editSummeryOpen ? "edit" : ""}
onClick={() => {
@ -127,7 +217,7 @@ export const Summary = () => {
setEditSummeryOpen(!editSummeryOpen);
}}
>
{editSummeryOpen ? "Сохранить" : "Редактировать раздел"}
{editSummeryOpen ? "Сохранить" : "Редактировать"}
</button>
</div>
{editSummeryOpen ? (
@ -165,8 +255,8 @@ export const Summary = () => {
{openGit && (
<div className="summary__sectionGit">
<div className="summary__sections__head">
<h3>Страница портфолио кода разработчика</h3>
<button>Редактировать раздел</button>
<h3>Ваши репозитории</h3>
<button>Редактировать</button>
</div>
<div className="summary__sectionGitItems">
{Boolean(gitInfo.length) &&

192
src/pages/Summary/summary.scss
View File

@ -1,17 +1,8 @@
.summary {
background: #F1F1F1;
background: #f1f1f1;
height: 100%;
min-height: 100vh;
font-family: 'LabGrotesque', sans-serif;
//
//&__container {
// max-width: 1160px;
// padding: 0 10px;
// margin: 20px auto;
// position: relative;
// display: flex;
// flex-direction: column;
//}
font-family: "LabGrotesque", sans-serif;
&__content {
display: flex;
@ -25,7 +16,7 @@
margin-bottom: 0;
span {
color: #52B709;
color: #52b709;
}
}
@ -45,10 +36,10 @@
}
&__info {
min-height: 128px;
min-height: 110px;
background: white;
border-radius: 12px;
margin-top: 30px;
margin-top: 25px;
display: flex;
align-items: center;
padding: 0 25px 0 45px;
@ -110,14 +101,6 @@
font-size: 16px;
line-height: 32px;
position: relative;
white-space: nowrap;
//@media (max-width: 915px) {
// max-width: 220px;
// overflow: hidden;
// white-space: nowrap;
// text-overflow: ellipsis;
//}
@media (max-width: 690px) {
font-size: 14px;
@ -128,19 +111,18 @@
@media (max-width: 550px) {
max-width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0;
}
@media (max-width: 450px) {
max-width: 150px;
max-width: 160px;
}
&:after {
content: '';
content: "";
position: absolute;
background: #52B709;
background: #52b709;
border-radius: 12px;
width: 70%;
height: 8px;
@ -159,7 +141,14 @@
color: white;
border: none;
transition: all 0.3s ease;
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%), linear-gradient(36deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 47%, rgba(255, 255, 255, 0.17) 50%, rgba(255, 255, 255, 0) 100%);
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
linear-gradient(
36deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.16) 47%,
rgba(255, 255, 255, 0.17) 50%,
rgba(255, 255, 255, 0) 100%
);
&:hover {
box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
@ -170,10 +159,15 @@
width: 120px;
height: 50px;
}
@media (max-width: 450px) {
width: 80px;
height: 40px;
}
}
&__skills {
background: #FFFFFF;
background: #ffffff;
border-radius: 12px;
margin-top: 35px;
}
@ -181,7 +175,7 @@
&__sections__head {
display: flex;
min-height: 69px;
background: #E1FCCF;
background: #e1fccf;
border-radius: 12px 12px 0px 0px;
align-items: center;
padding: 0 35px 0 50px;
@ -195,6 +189,7 @@
font-style: normal;
font-size: 18px;
line-height: 32px;
margin: 0;
@media (max-width: 660px) {
line-height: 20px;
@ -202,7 +197,7 @@
}
button {
background: #FFFFFF;
background: #ffffff;
border-radius: 44px;
padding: 10px 20px;
display: flex;
@ -232,7 +227,7 @@
padding: 25px 35px 25px 50px;
@media (max-width: 550px) {
padding: 15px 15px 20px;
padding: 15px;
}
&__wrapper {
@ -246,6 +241,94 @@
line-height: 32px;
white-space: nowrap;
text-transform: uppercase;
@media (max-width: 550px) {
font-size: 14px;
line-height: 20px;
}
}
}
}
.editSkills {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
span {
display: flex;
column-gap: 8px;
background-color: #f5f5f5;
border-radius: 15px;
padding: 3px 10px 3px 10px;
font-weight: 700;
font-size: 16px;
line-height: 32px;
white-space: nowrap;
text-transform: uppercase;
img {
cursor: pointer;
}
}
.selectSkills {
position: relative;
display: flex;
flex-direction: column;
font-weight: 700;
font-size: 16px;
&__name {
display: flex;
column-gap: 12px;
align-items: center;
cursor: pointer;
background-color: #f5f5f5;
border-radius: 15px;
padding: 3px 10px 3px 10px;
img {
transition: all 0.3s ease;
}
.open {
transform: rotate(180deg);
}
}
&__dropDown {
position: absolute;
background-color: white;
border-radius: 12px;
max-height: 300px;
overflow-y: auto;
display: flex;
flex-direction: column;
row-gap: 5px;
align-items: center;
padding: 7px;
top: 35px;
&::-webkit-scrollbar {
width: 3px;
border-radius: 10px;
}
&::-webkit-scrollbar-thumb {
background: #cbd9f9;
border-radius: 20px;
}
&::-webkit-scrollbar-track {
background: #c5c0c6;
border-radius: 20px;
}
p {
cursor: pointer;
}
}
}
}
@ -259,7 +342,7 @@
.experience {
&__block {
background: #FFFFFF;
background: #ffffff;
border-radius: 12px;
}
@ -315,9 +398,9 @@
.noGitItems {
width: 100%;
font-size: 20px;
background: #FFFFFF;
background: #ffffff;
border-radius: 12px;
padding: 35px 30px 30px 45px;
padding: 10px;
color: #000000;
font-weight: 600;
}
@ -327,9 +410,9 @@
display: flex;
align-items: center;
justify-content: space-between;
background: #FFFFFF;
background: #ffffff;
border-radius: 12px;
padding: 35px 30px 30px 45px;
padding: 10px;
transition: all 0.3s ease;
color: #000000;
@ -374,29 +457,11 @@
p {
font-weight: 300;
font-size: 16px;
line-height: 32px;
margin-bottom: 0;
white-space: nowrap;
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
@media (max-width: 1040px) {
max-width: 250px;
}
@media (max-width: 890px) {
max-width: 200px;
}
@media (max-width: 825px) {
max-width: 500px;
}
@media (max-width: 720px) {
max-width: 250px;
}
@media (max-width: 470px) {
max-width: 200px;
}
@ -404,7 +469,6 @@
}
&__specification {
margin-top: 30px;
display: flex;
align-items: center;
padding-left: 10px;
@ -415,7 +479,7 @@
}
span {
background: #D4F123;
background: #d4f123;
border-radius: 12px;
max-width: 260px;
width: 100%;
@ -433,7 +497,7 @@
&__link {
border-radius: 50%;
background: #DDEEC6;
background: #ddeec6;
min-width: 48px;
height: 48px;
cursor: pointer;
@ -446,15 +510,15 @@
}
footer {
margin-top: 70px;
margin-top: 10px;
}
.container {
max-width: 1160px;
margin-top: 23px;
max-width: 1160px;
margin-top: 23px;
@media (max-width: 570px) {
margin-top: 0;
}
}
@media (max-width: 570px) {
margin-top: 0;
}
}
}

10
src/pages/TrackerRegistration/TrackerRegistration.js
View File

@ -31,19 +31,19 @@ export const TrackerRegistration = () => {
<div className="trackerRegistration__form">
<div className="trackerRegistration__form__inputs">
<div className="trackerRegistration__inputContainer">
<span>Ваше имя *</span>
<span>Ваше имя</span>
<input placeholder="Имя" />
</div>
<div className="trackerRegistration__inputContainer">
<span>Ваш email *</span>
<input placeholder="Email" type="email" />
<span>Ваш e-mail</span>
<input placeholder="E-mail" type="email" />
</div>
<div className="trackerRegistration__inputContainer">
<span>Придумайте пароль*</span>
<span>Придумайте пароль</span>
<input placeholder="Пароль" />
</div>
<div className="trackerRegistration__inputContainer">
<span>Повторите пароль*</span>
<span>Повторите пароль</span>
<input placeholder="Повторите пароль" />
</div>
</div>