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

fixes

Browse Source
This commit is contained in:
Николай Полтщук
2023-04-05 19:38:38 +03:00
parent 4e61ea043d
commit ccab602ae4
13 changed files with 231 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,6 +4,8 @@ import {useSelector, useDispatch} from 'react-redux'
import SkillSection from '../SkillSection/SkillSection'
import Sidebar from '../CandidateSidebar/CandidateSidebar'
import {ProfileHeader} from "../ProfileHeader/ProfileHeader";
import {ProfileBreadcrumbs} from "../ProfileBreadcrumbs/ProfileBreadcrumbs";
import {Footer} from '../Footer/Footer'
import {currentCandidate, selectCurrentCandidate,} from '../../redux/outstaffingSlice'
@ -11,15 +13,16 @@ import {currentCandidate, selectCurrentCandidate,} from '../../redux/outstaffing
import {apiRequest} from "../../api/request";
import {createMarkup} from "../../helper";
import arrow from '../../images/right-arrow.png'
import gitImgItem from "../../images/gitItemImg.png"
import rectangle from '../../images/rectangle_secondPage.png'
import front from '../Outstaffing/images/front_end.png'
import back from '../Outstaffing/images/back_end.png'
import design from '../Outstaffing/images/design.png'
import rightArrow from "../../images/arrowRight.png"
import {LEVELS, SKILLS} from '../../constants/constants'
import './candidate.scss'
import {LogoutButton} from "../LogoutButton/LogoutButton";
import {Header} from "../Header/Header";
const Candidate = () => {
@ -87,19 +90,28 @@ const Candidate = () => {
const {header, img, classes} = setStyles();
return (
<>
<Header/>
<div className='candidate__wrapper'>
<ProfileHeader/>
<div className='container candidate'>
<ProfileBreadcrumbs links={[
{name: 'Главная', link: '/profile'},
{name: 'Каталог свободных специалистов', link: '/profile/catalog'},
{name: `${currentCandidateObj.specification} ${SKILLS[currentCandidateObj.position_id]}, ${LEVELS[currentCandidateObj.level]}`, link: `/candidate/${currentCandidateObj.id}`}
]}
/>
<div className='row'>
<div className='col-12 candidate__header'>
<div className='candidate__arrow' onClick={() => navigate('/')}>
<div className='candidate__arrow-img'>
<img src={arrow} alt=''/>
</div>
<div className='candidate__arrow-sp'>
<span>Вернуться к списку</span>
<div className='candidate__header__left'>
<h3>{currentCandidateObj.specification}{SKILLS[currentCandidateObj.position_id]} {LEVELS[currentCandidateObj.level]}</h3>
<div className='candidate__arrow' onClick={() => navigate('/profile/catalog')}>
<div className='candidate__arrow-img'>
<img src={rightArrow} alt=''/>
</div>
<div className='candidate__arrow-sp'>
<span>Вернуться к списку</span>
</div>
</div>
</div>
@ -145,35 +157,59 @@ const Candidate = () => {
<div className="col-12 col-xl-8">
<div className="candidate__works works">
<div className="works__body">
<div className="works__item item-works">
<div className="item-works__body">
<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__mark">Angular</div>
</div>
<div className="works__body__info">
<p>Страница портфолио кода разработчика</p>
</div>
<div className="works__item item-works">
<div className="item-works__body">
<Link to="/" className="item-works__link">Vuetifyis.com</Link>
<div className="item-works__text">Forked from
peluprvi/vuetifyjs.com <br/> Vuetifyjs.com
documentation
<Link className="item-works__body">
<div className='item-works__body__head'>
<div className='item-works__body__info'>
<img src={gitImgItem} alt='img' />
<div className='item-works__body__project'>
<h5>cybershop-api</h5>
<p>Реактивная социальная сеть</p>
</div>
</div>
<div className='item-works__body__head__arrow'>
<img src={rightArrow} alt='arrow' />
</div>
</div>
<div className="item-works__mark">Angular</div>
</div>
<span>JavaScript </span>
</Link>
</div>
<div className="works__item item-works">
<div className="item-works__body">
<Link to="/" className="item-works__link">Vuetifyis.com</Link>
<div className="item-works__text">Forked from
peluprvi/vuetifyjs.com <br/> Vuetifyjs.com
documentation
<Link className="item-works__body">
<div className='item-works__body__head'>
<div className='item-works__body__info'>
<img src={gitImgItem} alt='img' />
<div className='item-works__body__project'>
<h5>cybershop-api</h5>
<p>Реактивная социальная сеть</p>
</div>
</div>
<div className='item-works__body__head__arrow'>
<img src={rightArrow} alt='arrow' />
</div>
</div>
<div className="item-works__mark item-works__mark_yellow">Laravel</div>
</div>
<span>JavaScript </span>
</Link>
</div>
<div className="works__item item-works">
<Link className="item-works__body">
<div className='item-works__body__head'>
<div className='item-works__body__info'>
<img src={gitImgItem} alt='img' />
<div className='item-works__body__project'>
<h5>cybershop-api</h5>
<p>Реактивная социальная сеть</p>
</div>
</div>
<div className='item-works__body__head__arrow'>
<img src={rightArrow} alt='arrow' />
</div>
</div>
<span>JavaScript </span>
</Link>
</div>
</div>
</div>
@ -185,7 +221,7 @@ const Candidate = () => {
</div>
<Footer/>
</div>
</>
</div>
)
};

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

@ -1,12 +1,22 @@
@use 'sass:math';
@use 'sass:math';
.candidate {
padding-top: 23px;
&__wrapper {
background: #F1F1F1;
min-height: 100vh;
}
&__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 120px;
&__left {
h3 {
margin-bottom: 30px;
}
}
}
&__main {
@ -86,14 +96,26 @@
&__arrow {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
&-img {
margin-right: 10px;
width: 48px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
background: #D3E4BC;
border-radius: 50px;
margin-right: 20px;
img {
transform: rotate(180deg);
}
}
&-sp {
font-size: 14px;
font-size: 12px;
color: #5B6871;
max-width: 75px;
}
}
@ -279,7 +301,7 @@
}
.candidate__works{
.candidate__works{
@media (min-width: 576px) {
padding: 0 0 45px 0;
}
@ -288,13 +310,26 @@
display: flex;
flex-wrap: wrap;
margin: 0 -15px -30px;
column-gap: 10px;
row-gap: 15px;
&__info {
width: 100%;
background: #E1FCCF;
border-radius: 12px 12px 0px 0px;
padding: 20px 0 20px 50px;
p {
font-weight: 400;
font-size: 18px;
line-height: 32px;
}
}
}
.item-works{
display: flex;
flex-direction: column;
padding: 0 15px;
margin: 0 0 30px 0;
flex: 0 1 50%;
flex: 0 1 49%;
position: relative;
@media (max-width: 761px) {
@ -302,60 +337,79 @@
}
&__body{
padding: 17px;
border: 2px solid #54b611;
border-radius: 10px;
&::before{
content: "";
position: absolute;
top: -2px;
left: 25px;
height: 5px;
width: 29px;
border-radius: 3px;
background-color: #54b611;
}
}
&__link{
color: #0350dc;
font-family: "GT Eesti Pro Display", sans-serif;
font-size: 16px;
font-weight: 400;
letter-spacing: normal;
line-height: math.div(36,16);
text-decoration: underline;
display: block;
margin-bottom: 17px;
}
&__text{
margin-bottom: 37px;
color: #000000;
font-family: "GT Eesti Pro Display - Thin", sans-serif;
font-size: 12px;
font-weight: 400;
line-height: math.div(18,12);
}
&__mark{
font-size: 13px;
display: flex;
align-items: center;
column-gap: 7px;
line-height: math.div(36,13);
flex-direction: column;
background: #FFFFFF;
height: 170px;
padding: 25px 40px 25px 25px;
border-radius: 12px;
justify-content: space-between;
&::before{
border-radius: 50%;
content: "";
width: 13px;
height: 13px;
background-color: #73c141;
&:hover {
text-decoration: none;
}
&__head {
display: flex;
justify-content: space-between;
&__arrow {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50px;
background: #DDEEC6;
margin: auto 0;
}
}
&__info {
display: flex;
position: relative;
align-items: start;
img {
margin-top: 15px;
}
&:after {
content: "";
position: absolute;
width: 100%;
height: 8px;
border-radius: 12px;
background: #D4F123;
bottom: -36%;
left: 10%;
}
}
&__project {
margin-left: 15px;
h5 {
font-weight: 700;
font-size: 18px;
line-height: 32px;
color: #000000;
}
p {
font-weight: 300;
font-size: 16px;
line-height: 22px;
max-width: 120px;
color: #000000;
}
}
span {
font-weight: 400;
font-size: 14px;
line-height: 32px;
color: #000000;
text-align: end;
}
&_yellow{
&::before{
background-color: #e09f14;
}
}
}
}
}