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

Пофиксил верстку сайдбара кандидатов

Browse Source
This commit is contained in:
Дмитрий Савенко 2022-11-22 16:43:17 +03:00
parent 1651968337
commit eafba566d8
7 changed files with 22171 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22029
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

228
src/components/Candidate/Candidate.js
View File

@ -1,6 +1,6 @@
import React, { useEffect } from 'react' import React, {useEffect} from 'react'
import { useHistory, useParams, Link } from 'react-router-dom' import {useHistory, useParams, Link} from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux' import {useSelector, useDispatch} from 'react-redux'
import { import {
currentCandidate, currentCandidate,
selectCurrentCandidate, selectCurrentCandidate,
@ -13,24 +13,23 @@ import SkillSection from '../SkillSection/SkillSection'
import front from '../../images/front_end.png' import front from '../../images/front_end.png'
import back from '../../images/back_end.png' import back from '../../images/back_end.png'
import design from '../../images/design.png' import design from '../../images/design.png'
import { fetchGet } from '../../server/server' import {fetchGet} from '../../server/server'
import { Footer } from '../Footer/Footer' import {Footer} from '../Footer/Footer'
import './candidate.scss' import './candidate.scss'
import { getRole } from '../../redux/roleSlice' import {getRole} from '../../redux/roleSlice'
import { CodeSnippetlighter } from '../../pages/CodeSnippetPage' import {useState} from 'react'
import { useState } from 'react'
const Candidate = () => { const Candidate = () => {
const history = useHistory() const history = useHistory();
const { id: candidateId } = useParams() const {id: candidateId} = useParams();
const dispatch = useDispatch() const dispatch = useDispatch();
const role = useSelector(getRole) const role = useSelector(getRole);
const [activeSnippet, setActiveSnippet] = useState(true) const [activeSnippet, setActiveSnippet] = useState(true);
useEffect(() => { useEffect(() => {
window.scrollTo(0, 0) window.scrollTo(0, 0)
}, []) }, []);
useEffect(() => { useEffect(() => {
fetchGet({ fetchGet({
@ -40,37 +39,37 @@ const Candidate = () => {
role, role,
logout: () => dispatch(auth(false)) logout: () => dispatch(auth(false))
}).then((el) => dispatch(currentCandidate(el))) }).then((el) => dispatch(currentCandidate(el)))
}, [dispatch, candidateId]) }, [dispatch, candidateId]);
const currentCandidateObj = useSelector(selectCurrentCandidate) const currentCandidateObj = useSelector(selectCurrentCandidate);
const { position_id, skillValues, vc_text: text } = currentCandidateObj const {position_id, skillValues, vc_text: text} = currentCandidateObj;
const setStyles = () => { const setStyles = () => {
const styles = { const styles = {
classes: '', classes: '',
header: '', header: '',
img: '' img: ''
} };
switch (Number(position_id)) { switch (Number(position_id)) {
case 1: { case 1: {
styles.classes = 'back' styles.classes = 'back';
styles.header = 'Backend' styles.header = 'Backend';
styles.img = back styles.img = back;
break break
} }
case 2: { case 2: {
styles.classes = 'des' styles.classes = 'des';
styles.header = 'Frontend' styles.header = 'Frontend';
styles.img = front styles.img = front;
break break
} }
case 3: { case 3: {
styles.classes = 'front' styles.classes = 'front';
styles.header = 'Design' styles.header = 'Design';
styles.img = design styles.img = design;
break break
} }
default: default:
@ -78,32 +77,32 @@ const Candidate = () => {
} }
return styles return styles
} };
function createMarkup(text) { function createMarkup(text) {
return { __html: text.split('</p>').join('</p>') } return {__html: text.split('</p>').join('</p>')}
} }
const { header, img, classes } = setStyles() const {header, img, classes} = setStyles();
return ( return (
<div className='candidate'> <div className='candidate'>
<div className='row'> <div className='row'>
<div className='col-12'> <div className='col-12'>
<div className='candidate__title'> <div className='candidate__title'>
<h2> <h2>
<span>Аутстаффинг</span> it-персонала <span>Аутстаффинг</span> it-персонала
</h2> </h2>
</div>
</div> </div>
</div> </div>
</div>
<div className='row'> <div className='row'>
<div className='col-12'> <div className='col-12 candidate__header'>
<div className='candidate__header'>
<div className='candidate__arrow' onClick={() => history.push('/')}> <div className='candidate__arrow' onClick={() => history.push('/')}>
<div className='candidate__arrow-img'> <div className='candidate__arrow-img'>
<img src={arrow} alt='' /> <img src={arrow} alt=''/>
</div> </div>
<div className='candidate__arrow-sp'> <div className='candidate__arrow-sp'>
<span>Вернуться к списку</span> <span>Вернуться к списку</span>
@ -112,84 +111,91 @@ const Candidate = () => {
<div className='candidate__icon'> <div className='candidate__icon'>
<h3>{header}</h3> <h3>{header}</h3>
<img className={classes} src={img} alt='' /> <img className={classes} src={img} alt=''/>
</div> </div>
</div> </div>
</div> </div>
</div> <div className='candidate__main'>
<div className='candidate__main'> <div className='row'>
<div className='row'> <div className='col-12 col-xl-4'>
<div className='col-12 col-xl-4'> <Sidebar candidate={currentCandidateObj} position activeSnippet={activeSnippet}
<Sidebar candidate={currentCandidateObj} position activeSnippet={activeSnippet} setActiveSnippet={setActiveSnippet}/> setActiveSnippet={setActiveSnippet}/>
</div> </div>
{ {
activeSnippet ? activeSnippet ?
( (
<div className='col-12 col-xl-8'> <div className='col-12 col-xl-8'>
<div className='candidate__main-description'> <div className='candidate__main-description'>
<img src={rectangle} alt='' /> <img src={rectangle} alt=''/>
<p className='candidate__hashtag'># Описание опыта</p> <p className='candidate__hashtag'># Описание опыта</p>
{text ? ( {text ? (
<div <div
className='candidate__text' className='candidate__text'
dangerouslySetInnerHTML={createMarkup(text)} dangerouslySetInnerHTML={createMarkup(text)}
></div> ></div>
) : ( ) : (
<p className='candidate__text-secondary'> <p className='candidate__text-secondary'>
{currentCandidateObj.vc_text {currentCandidateObj.vc_text
? currentCandidateObj.vc_text ? currentCandidateObj.vc_text
: 'Описание отсутствует...'} : 'Описание отсутствует...'}
</p> </p>
)} )}
{/* <Link to={`/candidate/${currentCandidateObj.id}/form`}> {/* <Link to={`/candidate/${currentCandidateObj.id}/form`}>
<button type="submit" className='candidate__btn'> <button type="submit" className='candidate__btn'>
Выбрать к собеседованию Выбрать к собеседованию
</button> </button>
</Link> */} </Link> */}
<SkillSection skillsArr={skillValues} /> <SkillSection skillsArr={skillValues}/>
</div> </div>
</div> </div>
) : ) :
( (
// <div className="col-12 col-xl-8"> // <div className="col-12 col-xl-8">
// <CodeSnippetlighter /> // <CodeSnippetlighter />
// </div> // </div>
<div className="col-12 col-xl-8"> <div className="col-12 col-xl-8">
<div className="candidate__works works"> <div className="candidate__works works">
<div className="works__body"> <div className="works__body">
<div className="works__item item-works"> <div className="works__item item-works">
<div className="item-works__body"> <div className="item-works__body">
<Link to="/" className="item-works__link">Vuetifyis.com</Link> <Link to="/" className="item-works__link">Vuetifyis.com</Link>
<div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br /> Vuetifyjs.com documentation</div> <div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br/> Vuetifyjs.com
<div className="item-works__mark">Angular</div> documentation
</div> </div>
</div> <div className="item-works__mark">Angular</div>
<div className="works__item item-works"> </div>
<div className="item-works__body"> </div>
<Link to="/" className="item-works__link">Vuetifyis.com</Link> <div className="works__item item-works">
<div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br /> Vuetifyjs.com documentation</div> <div className="item-works__body">
<div className="item-works__mark">Angular</div> <Link to="/" className="item-works__link">Vuetifyis.com</Link>
</div> <div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br/> Vuetifyjs.com
</div> documentation
<div className="works__item item-works"> </div>
<div className="item-works__body"> <div className="item-works__mark">Angular</div>
<Link to="/" className="item-works__link">Vuetifyis.com</Link> </div>
<div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br /> Vuetifyjs.com documentation</div> </div>
<div className="item-works__mark item-works__mark_yellow">Laravel</div> <div className="works__item item-works">
</div> <div className="item-works__body">
</div> <Link to="/" className="item-works__link">Vuetifyis.com</Link>
</div> <div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br/> Vuetifyjs.com
</div> documentation
</div>
<div className="item-works__mark item-works__mark_yellow">Laravel</div>
</div>
</div>
</div>
</div>
</div>
)
}
</div> </div>
)
}
</div> </div>
<Footer/>
</div> </div>
<Footer />
</div>
) )
} };
export default Candidate export default Candidate

35
src/components/Candidate/candidate.scss
View File

@ -6,7 +6,7 @@
h2 { h2 {
text-align: center; text-align: center;
color: #52b709; color: #52b709;
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display', sans-serif;
font-size: 5em; font-size: 5em;
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
@ -25,8 +25,8 @@
&__header { &__header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
margin-top: 120px; margin-top: 120px;
margin-left: 60px;
} }
&__main { &__main {
@ -36,7 +36,7 @@
padding-left: 16px; padding-left: 16px;
h2 { h2 {
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display', sans-serif;
font-size: 2.8em; font-size: 2.8em;
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
@ -46,21 +46,21 @@
} }
p { p {
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display', sans-serif;
font-size: 1.2em; font-size: 1.2em;
font-weight: 300; font-weight: 300;
font-style: normal; font-style: normal;
letter-spacing: normal; letter-spacing: normal;
line-height: 36px; line-height: 36px;
text-align: left; text-align: left;
margin: 20px 0px; margin: 20px 0;
} }
} }
} }
&__text { &__text {
p { p {
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display', sans-serif;
font-size: 1.6em; font-size: 1.6em;
font-weight: 100; font-weight: 100;
font-style: normal; font-style: normal;
@ -69,12 +69,11 @@
} }
&-secondary { &-secondary {
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display', sans-serif;
font-size: 1.6em; font-size: 1.6em;
font-weight: 100; font-weight: 100;
font-style: normal; font-style: normal;
letter-spacing: normal; letter-spacing: normal;
line-height: 24px;
text-align: left; text-align: left;
line-height: 28px; line-height: 28px;
} }
@ -95,7 +94,7 @@
position: absolute; position: absolute;
right: 20%; right: 20%;
top: 40%; top: 40%;
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display', sans-serif;
font-size: 1.8em; font-size: 1.8em;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
@ -109,6 +108,13 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
cursor: pointer;
&-img {
margin-right: 10px;
}
&-sp {
font-size: 14px;
}
} }
footer { footer {
@ -138,7 +144,7 @@
span { span {
margin-left: 40px; margin-left: 40px;
margin-right: 120px; margin-right: 120px;
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display', sans-serif;
font-size: 1.8em; font-size: 1.8em;
font-weight: 100; font-weight: 100;
font-style: normal; font-style: normal;
@ -216,10 +222,9 @@
rgba(255, 255, 255, 0) 100% rgba(255, 255, 255, 0) 100%
); );
color: #ffffff; color: #ffffff;
font-family: 'Muller'; font-family: 'Muller', sans-serif;
font-size: 1.3em; font-size: 1.3em;
letter-spacing: normal; letter-spacing: normal;
text-align: left;
border: none; border: none;
text-align: center; text-align: center;
margin: 28px auto; margin: 28px auto;
@ -230,7 +235,7 @@
&-sp { &-sp {
span { span {
margin-right: 0px; margin-right: 0;
} }
} }
} }
@ -335,7 +340,7 @@
&__link{ &__link{
color: #0350dc; color: #0350dc;
font-family: "GT Eesti Pro Display"; font-family: "GT Eesti Pro Display", sans-serif;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
letter-spacing: normal; letter-spacing: normal;
@ -347,7 +352,7 @@
&__text{ &__text{
margin-bottom: 37px; margin-bottom: 37px;
color: #000000; color: #000000;
font-family: "GT Eesti Pro Display - Thin"; font-family: "GT Eesti Pro Display - Thin", sans-serif;
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
line-height: math.div(18,12); line-height: math.div(18,12);

22
src/components/CandidateSidebar/CandidateSidebar.js
View File

@ -1,21 +1,13 @@
import React from 'react' import React from 'react'
import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { Achievement } from '../Achievement/Achievement' import { Achievement } from '../Achievement/Achievement'
import { LEVELS, SKILLS } from '../constants/constants' import { LEVELS, SKILLS } from '../constants/constants'
import maleBig from '../../images/medium_male_big.png'
import './candidateSidebar.scss' import './candidateSidebar.scss'
import { Highlighter } from '../../App'
import { useState } from 'react'
import { useEffect } from 'react'
import { selectUserInfo } from '../../redux/outstaffingSlice'
import { isRejected } from '@reduxjs/toolkit'
const getYearsString = (years) => { const getYearsString = (years) => {
let yearsString let yearsString;
if (years % 10 === 1) { if (years % 10 === 1) {
yearsString = 'год' yearsString = 'год'
} else if (years === 11 || years === 12 || years === 13 || years === 14) { } else if (years === 11 || years === 12 || years === 13 || years === 14) {
@ -26,13 +18,13 @@ const getYearsString = (years) => {
yearsString = 'лет' yearsString = 'лет'
} }
return `${years} ${yearsString}` return `${years} ${yearsString}`
} };
const CandidateSidebar = ({ candidate, position, setActiveSnippet, activeSnippet }) => { const CandidateSidebar = ({ candidate, setActiveSnippet, activeSnippet }) => {
const userId = localStorage.getItem('id') const userId = localStorage.getItem('id') ;
const showSnippet = () => { const showSnippet = () => {
setActiveSnippet((prev)=>!prev) setActiveSnippet((prev)=>!prev)
} };
return ( return (
<div className='candidate-sidebar'> <div className='candidate-sidebar'>
@ -65,7 +57,7 @@ const CandidateSidebar = ({ candidate, position, setActiveSnippet, activeSnippet
</button> </button>
</Link> </Link>
{/* <Link to={`/candidate/${candidate.id}/code`}> */} {/* <Link to={`/candidate/${candidate.id}/code`}> */}
<button <button
className='candidate-sidebar__select' className='candidate-sidebar__select'
onClick={showSnippet} onClick={showSnippet}
> >
@ -83,6 +75,6 @@ const CandidateSidebar = ({ candidate, position, setActiveSnippet, activeSnippet
</div> </div>
</div> </div>
) )
} };
export default CandidateSidebar export default CandidateSidebar

18
src/components/CandidateSidebar/candidateSidebar.scss
View File

@ -9,10 +9,10 @@
&__position { &__position {
margin-bottom: 1rem; margin-bottom: 1rem;
h2 { h2 {
font-size: 3rem !important; font-size: 3rem;
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display', sans-serif;
font-size: 2.6em;
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
letter-spacing: normal; letter-spacing: normal;
@ -34,7 +34,7 @@
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: flex-start; align-items: center;
flex-direction: column; flex-direction: column;
} }
} }
@ -53,7 +53,7 @@
} }
.candidate-sidebar__experience-title { .candidate-sidebar__experience-title {
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display', sans-serif;
font-size: 1.8em; font-size: 1.8em;
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
@ -63,7 +63,7 @@
} }
.candidate-sidebar__experience { .candidate-sidebar__experience {
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display', sans-serif;
font-size: 3em; font-size: 3em;
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
@ -78,7 +78,7 @@
border: none; border: none;
background-color: #73c141; background-color: #73c141;
color: #ffffff; color: #ffffff;
font-family: 'Muller'; font-family: 'Muller', sans-serif;
font-size: 1.6em; font-size: 1.6em;
font-style: normal; font-style: normal;
letter-spacing: normal; letter-spacing: normal;
@ -95,7 +95,7 @@
} }
.candidate-sidebar__info__l { .candidate-sidebar__info__l {
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display', sans-serif;
font-size: 1.8em; font-size: 1.8em;
font-weight: 600; font-weight: 600;
font-style: normal; font-style: normal;
@ -134,7 +134,7 @@
.candidate-sidebar__arrows-sp { .candidate-sidebar__arrows-sp {
color: #705fa3; color: #705fa3;
font-family: 'Circe'; font-family: 'Circe', sans-serif;
font-size: 1.3em; font-size: 1.3em;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;

48
src/components/LogoutButton/LogoutButton.js
View File

@ -1,31 +1,31 @@
import React, { useState } from 'react' import React, {useState} from 'react'
import { useHistory } from 'react-router-dom' import {useHistory} from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux' import {useDispatch, useSelector} from 'react-redux'
import { Loader } from '../Loader/Loader' import {Loader} from '../Loader/Loader'
import { auth } from '../../redux/outstaffingSlice' import {auth} from '../../redux/outstaffingSlice'
import { getRole } from '../../redux/roleSlice' import {getRole} from '../../redux/roleSlice'
import './logoutButton.scss' import './logoutButton.scss'
export const LogoutButton = () => { export const LogoutButton = () => {
const [isLoggingOut, setIsLoggingOut] = useState(false) const [isLoggingOut, setIsLoggingOut] = useState(false);
const dispatch = useDispatch() const dispatch = useDispatch();
const userRole = useSelector(getRole) const userRole = useSelector(getRole);
const history = useHistory() const history = useHistory();
return ( return (
<div className='logout-button'> <div className='logout-button'>
<button <button
onClick={() => { onClick={() => {
setIsLoggingOut(true) setIsLoggingOut(true);
localStorage.clear() localStorage.clear();
dispatch(auth(false)) dispatch(auth(false));
setIsLoggingOut(false) setIsLoggingOut(false);
history.push(userRole === 'ROLE_DEV' ? '/authdev' : '/auth') history.push(userRole === 'ROLE_DEV' ? '/authdev' : '/auth')
}} }}
> >
{isLoggingOut ? <Loader /> : 'Выйти'}{' '} {isLoggingOut ? <Loader/> : 'Выйти'}{' '}
</button> </button>
</div> </div>
) )
} };

2
src/hoc/withLogout.js
View File

@ -8,4 +8,4 @@ export const WithLogout = (props) => {
<LogoutButton /> <LogoutButton />
</div> </div>
) )
} };