profilePage
This commit is contained in:
@ -6,6 +6,9 @@ import {
|
||||
selectCurrentCandidate,
|
||||
auth
|
||||
} from '../../redux/outstaffingSlice'
|
||||
import {getRole} from '../../redux/roleSlice'
|
||||
import {useState} from 'react'
|
||||
import {createMarkup} from "../../helper";
|
||||
import arrow from '../../images/right-arrow.png'
|
||||
import rectangle from '../../images/rectangle_secondPage.png'
|
||||
import Sidebar from '../CandidateSidebar/CandidateSidebar'
|
||||
@ -17,8 +20,6 @@ import {fetchGet} from '../../server/server'
|
||||
import {Footer} from '../Footer/Footer'
|
||||
|
||||
import './candidate.scss'
|
||||
import {getRole} from '../../redux/roleSlice'
|
||||
import {useState} from 'react'
|
||||
|
||||
const Candidate = () => {
|
||||
const history = useHistory();
|
||||
@ -79,10 +80,6 @@ const Candidate = () => {
|
||||
return styles
|
||||
};
|
||||
|
||||
function createMarkup(text) {
|
||||
return {__html: text.split('</p>').join('</p>')}
|
||||
}
|
||||
|
||||
const {header, img, classes} = setStyles();
|
||||
|
||||
return (
|
||||
|
||||
@ -1,11 +1,59 @@
|
||||
import React from 'react';
|
||||
import {LogoutButton} from "../LogoutButton/LogoutButton";
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import {auth, getProfileInfo, setProfileInfo} from "../../redux/outstaffingSlice";
|
||||
import {useDispatch, useSelector} from "react-redux";
|
||||
import {Loader} from '../Loader/Loader'
|
||||
import {getRole} from "../../redux/roleSlice";
|
||||
import {useHistory} from "react-router-dom";
|
||||
import {fetchGet} from "../../server/server";
|
||||
|
||||
import './profileHeader.scss'
|
||||
|
||||
export const ProfileHeader = () => {
|
||||
const [isLoggingOut, setIsLoggingOut] = useState(false);
|
||||
const dispatch = useDispatch();
|
||||
const userRole = useSelector(getRole);
|
||||
const profileInfo = useSelector(getProfileInfo)
|
||||
const history = useHistory();
|
||||
|
||||
useEffect(() => {
|
||||
fetchGet({
|
||||
link: `${process.env.REACT_APP_API_URL}/api/profile/${localStorage.getItem('cardId')}`,
|
||||
}).then((profileInfo) => {
|
||||
dispatch(setProfileInfo(profileInfo))
|
||||
})
|
||||
}, [])
|
||||
return(
|
||||
<header className='profileHeader'>
|
||||
<h2 className='profileHeader__title'>Аутстаффинг <span>Personal Profile</span></h2>
|
||||
<LogoutButton/>
|
||||
<div className='profileHeader__head'>
|
||||
<div className='profileHeader__container'>
|
||||
<h2 className='profileHeader__title'>itguild.<span>для разработчиков</span></h2>
|
||||
<button onClick={() => {
|
||||
setIsLoggingOut(true);
|
||||
localStorage.clear();
|
||||
dispatch(auth(false));
|
||||
setIsLoggingOut(false);
|
||||
history.push(userRole === 'ROLE_DEV' ? '/authdev' : '/auth')
|
||||
}}
|
||||
className='profileHeader__logout'>
|
||||
{isLoggingOut ? <Loader/> : 'Выйти'}{' '}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className='profileHeader__info'>
|
||||
<div className='profileHeader__container'>
|
||||
<nav className='profileHeader__nav'>
|
||||
<a className='active'>Резюме</a>
|
||||
<a>Отчетность</a>
|
||||
<a>Трекер</a>
|
||||
<a>Выплаты</a>
|
||||
<a>Настройки</a>
|
||||
</nav>
|
||||
<div className='profileHeader__personalInfo'>
|
||||
<h3 className='profileHeader__personalInfoName'>{profileInfo.fio}</h3>
|
||||
<img src={profileInfo.photo} className='profileHeader__personalInfoAvatar' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,98 +1,276 @@
|
||||
.profile {
|
||||
background: #F1F1F1;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
|
||||
&__container {
|
||||
max-width: 1140px;
|
||||
margin: 0 auto;
|
||||
max-width: 1160px;
|
||||
padding: 0 10px;
|
||||
margin: 20px auto;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&Header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 60px;
|
||||
|
||||
&__title {
|
||||
text-align: center;
|
||||
font-family: "GT Eesti Pro Display", sans-serif;
|
||||
font-size: 5em;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 77.81px;
|
||||
|
||||
span {
|
||||
color: #52b709;
|
||||
}
|
||||
}
|
||||
|
||||
.logout-button {
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-left: 45px;
|
||||
&__title {
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
line-height: 32px;
|
||||
margin-bottom: 0;
|
||||
|
||||
span {
|
||||
color: #52B709;
|
||||
}
|
||||
}
|
||||
|
||||
&__sideBar {
|
||||
&__back {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
border: 2px solid whitesmoke;
|
||||
max-width: 34%;
|
||||
row-gap: 12px;
|
||||
column-gap: 30px;
|
||||
margin-top: 20px;
|
||||
cursor: pointer;
|
||||
|
||||
&__position {
|
||||
font-size: 3rem;
|
||||
font-family: "GT Eesti Pro Display", sans-serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
line-height: 32px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&__experience {
|
||||
font-family: "GT Eesti Pro Display", sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 36px;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&__info {
|
||||
min-height: 128px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 130px 0 45px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&-name {
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
&__person {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 45px;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: #52B709;
|
||||
border-radius: 12px;
|
||||
width: 70%;
|
||||
height: 8px;
|
||||
bottom: -14px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__git {
|
||||
background: #52B709;
|
||||
border-radius: 44px;
|
||||
width: 177px;
|
||||
height: 50px;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&__skills {
|
||||
background: #FFFFFF;
|
||||
border-radius: 12px;
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
&__sections__head {
|
||||
display: flex;
|
||||
min-height: 69px;
|
||||
background: #E1FCCF;
|
||||
border-radius: 12px 12px 0px 0px;
|
||||
align-items: center;
|
||||
padding: 0 35px 0 50px;
|
||||
justify-content: space-between;
|
||||
|
||||
h3 {
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
button {
|
||||
background: #FFFFFF;
|
||||
border-radius: 44px;
|
||||
border: none;
|
||||
min-width: 190px;
|
||||
height: 42px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.skills__section {
|
||||
&__items {
|
||||
padding: 25px 35px 25px 50px;
|
||||
|
||||
&__wrapper {
|
||||
max-width: 630px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 5px;
|
||||
|
||||
.skill_item {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
white-space: nowrap;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__experience {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 20px;
|
||||
margin-top: 30px;
|
||||
|
||||
.experience {
|
||||
&__block {
|
||||
background: #FFFFFF;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding: 15px 35px 15px 50px;
|
||||
|
||||
h2 {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__sectionGit {
|
||||
margin-top: 25px;
|
||||
|
||||
&Items {
|
||||
margin-top: 25px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 20px;
|
||||
column-gap: 25px;
|
||||
justify-content: space-between;
|
||||
|
||||
.gitItem {
|
||||
width: 48%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12px;
|
||||
padding: 35px 30px 30px 45px;
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 350px;
|
||||
width: 100%;
|
||||
|
||||
&__about {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 15px;
|
||||
}
|
||||
|
||||
&__name {
|
||||
h4 {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__specification {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
column-gap: 25px;
|
||||
|
||||
span {
|
||||
background: #D4F123;
|
||||
border-radius: 12px;
|
||||
max-width: 260px;
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
border-radius: 50%;
|
||||
background: #DDEEC6;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1160px;
|
||||
padding: 0 10px;
|
||||
margin-top: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
83
src/components/Profile/profileHeader.scss
Normal file
83
src/components/Profile/profileHeader.scss
Normal file
@ -0,0 +1,83 @@
|
||||
.profileHeader {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&__head {
|
||||
background: #E1FCCF;
|
||||
}
|
||||
|
||||
&__container {
|
||||
max-width: 1160px;
|
||||
padding: 0 10px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
line-height: 32px;
|
||||
margin-bottom: 0;
|
||||
|
||||
span {
|
||||
color: #52B709;
|
||||
}
|
||||
}
|
||||
|
||||
&__logout {
|
||||
background: none;
|
||||
border: none;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
&__info {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
&__nav {
|
||||
display: flex;
|
||||
column-gap: 30px;
|
||||
|
||||
.active {
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
color: #807777 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__personalInfo {
|
||||
display: flex;
|
||||
column-gap: 20px;
|
||||
align-items: center;
|
||||
|
||||
&Name {
|
||||
margin-bottom: 0;
|
||||
font-size: 12px;
|
||||
line-height: 32px;
|
||||
max-width: 150px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&Avatar {
|
||||
width: 37px;
|
||||
height: 37px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user