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

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

@ -1,12 +1,22 @@
@use 'sass:math'; @use 'sass:math';
.candidate { .candidate {
padding-top: 23px;
&__wrapper {
background: #F1F1F1;
min-height: 100vh;
}
&__header { &__header {
display: flex; display: flex;
align-items: center;
justify-content: space-between; justify-content: space-between;
margin-top: 120px;
&__left {
h3 {
margin-bottom: 30px;
}
}
} }
&__main { &__main {
@ -86,14 +96,26 @@
&__arrow { &__arrow {
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
&-img { &-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 { &-sp {
font-size: 14px; font-size: 12px;
color: #5B6871;
max-width: 75px;
} }
} }
@ -288,13 +310,26 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: 0 -15px -30px; 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{ .item-works{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0 15px; flex: 0 1 49%;
margin: 0 0 30px 0;
flex: 0 1 50%;
position: relative; position: relative;
@media (max-width: 761px) { @media (max-width: 761px) {
@ -302,60 +337,79 @@
} }
&__body{ &__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; display: flex;
align-items: center; flex-direction: column;
column-gap: 7px; background: #FFFFFF;
line-height: math.div(36,13); height: 170px;
padding: 25px 40px 25px 25px;
border-radius: 12px;
justify-content: space-between;
&::before{ &:hover {
border-radius: 50%; text-decoration: none;
content: "";
width: 13px;
height: 13px;
background-color: #73c141;
} }
&_yellow{
&::before{
background-color: #e09f14;
}
}
&__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;
}
} }
} }

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

@ -2,9 +2,10 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
border: 2px solid whitesmoke; border-radius: 12px;
border-bottom: none !important; border-bottom: none !important;
position: sticky; position: sticky;
background: #FFFFFF;
top: 80px; top: 80px;
&__position { &__position {

6
src/components/Outstaffing/Outstaffing.js
View File

@ -45,7 +45,7 @@ const Outstaffing = () => {
tagsArr.flat().filter((tag) => tag.name === 'skills_front') tagsArr.flat().filter((tag) => tag.name === 'skills_front')
} }
img={front} img={front}
header='Frontend' header='Frontend разработчики'
positionId='2' positionId='2'
isSelected={positionId === '2'} isSelected={positionId === '2'}
onSelect={(id) => onSelectPosition(id)} onSelect={(id) => onSelectPosition(id)}
@ -58,7 +58,7 @@ const Outstaffing = () => {
tagsArr.flat().filter((tag) => tag.name === 'skills_back') tagsArr.flat().filter((tag) => tag.name === 'skills_back')
} }
img={back} img={back}
header='Backend' header='Backend разработчики'
positionId='1' positionId='1'
isSelected={positionId === '1'} isSelected={positionId === '1'}
onSelect={(id) => onSelectPosition(id)} onSelect={(id) => onSelectPosition(id)}
@ -71,7 +71,7 @@ const Outstaffing = () => {
tagsArr.flat().filter((tag) => tag.name === 'skills_design') tagsArr.flat().filter((tag) => tag.name === 'skills_design')
} }
img={design} img={design}
header='Дизайн' header='Дизайн проектов'
positionId='5' positionId='5'
isSelected={positionId === '5'} isSelected={positionId === '5'}
onSelect={(id) => onSelectPosition(id)} onSelect={(id) => onSelectPosition(id)}

12
src/components/OutstaffingBlock/outstaffingBlock.scss
View File

@ -1,7 +1,10 @@
body {
font-family: 'LabGrotesque', sans-serif !important;
}
.container { .container {
max-width: 1160px !important; max-width: 1160px !important;
} }
.catalog { .catalog {
background: #F1F1F1; background: #F1F1F1;
height: 100%; height: 100%;
@ -54,15 +57,16 @@
h3 { h3 {
position: absolute; position: absolute;
right: 25%; right: 13%;
top: 40%; top: 30%;
max-width: 130px;
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display';
font-size: 18px; font-size: 18px;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
letter-spacing: normal; letter-spacing: normal;
line-height: normal; line-height: normal;
text-align: left; text-align: center;
} }
img { img {

4
src/components/ProfileHeader/ProfileHeader.js
View File

@ -9,6 +9,8 @@ import {getRole} from "../../redux/roleSlice";
import {urlForLocal} from "../../helper"; import {urlForLocal} from "../../helper";
import avatarMok from "../../pages/PartnerTreaties/Images/avatarMok.png"
import './profileHeader.scss' import './profileHeader.scss'
@ -129,7 +131,7 @@ export const ProfileHeader = () => {
} }
</h3> </h3>
<NavLink end to={'/profile'}> <NavLink end to={'/profile'}>
<img src={profileInfo.photo ? urlForLocal(profileInfo.photo) : ""} className='profileHeader__personalInfoAvatar' alt='avatar'/> <img src={profileInfo.photo ? urlForLocal(profileInfo.photo) : avatarMok} className='profileHeader__personalInfoAvatar' alt='avatar'/>
</NavLink> </NavLink>
</div> </div>
</div> </div>

4
src/pages/PartnerBid/PartnerBid.js
View File

@ -113,7 +113,7 @@ export const PartnerBid = () => {
</div> </div>
<div className='partnerBid__suitable__persons'> <div className='partnerBid__suitable__persons'>
{mokPersons.map((person, index) => { {mokPersons.map((person, index) => {
return <div key={index} className='partnerBid__suitable__person'> return <Link to='/candidate/110' key={index} className='partnerBid__suitable__person'>
<img src={person.img} alt='avatar' /> <img src={person.img} alt='avatar' />
<p>{person.name}</p> <p>{person.name}</p>
<Link className='partnerBid__suitable__person__more' to={person.link}> <Link className='partnerBid__suitable__person__more' to={person.link}>
@ -122,7 +122,7 @@ export const PartnerBid = () => {
<div className='partnerBid__suitable__person__info'> <div className='partnerBid__suitable__person__info'>
</div> </div>
</div> </Link>
}) })
} }
</div> </div>

4
src/pages/PartnerBid/partnerBid.scss
View File

@ -343,6 +343,10 @@
background: #FFFFFF; background: #FFFFFF;
border-radius: 12px; border-radius: 12px;
&:hover {
text-decoration: none;
}
img { img {
width: 88px; width: 88px;
height: 88px; height: 88px;

4
src/pages/PartnerEmployees/PartnerEmployees.js
View File

@ -42,9 +42,9 @@ export const PartnerEmployees = () => {
<div className="info_summary"> <div className="info_summary">
<img src={imgInfo} alt="img" /> <img src={imgInfo} alt="img" />
<p>Данные и резюме</p> <p>Данные и резюме</p>
<div className="arrow"> <Link to='/candidate/26' className="arrow">
<img src={rightArrow} alt="arrow" /> <img src={rightArrow} alt="arrow" />
</div> </Link>
</div> </div>
</div> </div>
<div className="partnerEmployees__item__info__project"> <div className="partnerEmployees__item__info__project">

12
src/pages/PartnerEmployees/partnerEmployees.scss
View File

@ -50,11 +50,23 @@
} }
&__info { &__info {
position: relative;
display: flex; display: flex;
padding: 15px 50px 14px 16px; padding: 15px 50px 14px 16px;
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;
&:after {
content: '';
position: absolute;
background: #52B709;
border-radius: 12px;
height: 4px;
width: 51%;
top: 0;
right: 0;
}
&__qualification { &__qualification {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

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

@ -15,6 +15,7 @@ import summaryIcon from "../../images/summaryIcon.png"
import timerIcon from "../../images/timerIcon.png" import timerIcon from "../../images/timerIcon.png"
import paymentIcon from "../../images/paymentIcon.png" import paymentIcon from "../../images/paymentIcon.png"
import settingIcon from "../../images/settingIcon.png" import settingIcon from "../../images/settingIcon.png"
import avatarMok from "../PartnerTreaties/Images/avatarMok.png"
import rightArrow from "../../images/arrowRight.png" import rightArrow from "../../images/arrowRight.png"
@ -105,7 +106,7 @@ export const Profile = () => {
</h2> </h2>
<div className='summary__info'> <div className='summary__info'>
<div className='summary__person'> <div className='summary__person'>
<img src={profileInfo.photo ? urlForLocal(profileInfo.photo) : ''} className='summary__avatar' alt='avatar'/> <img src={profileInfo.photo ? urlForLocal(profileInfo.photo) : avatarMok} className='summary__avatar' alt='avatar'/>
<p className='summary__name'> <p className='summary__name'>
{user === 'developer' ? {user === 'developer' ?
<span>{profileInfo.fio}, {profileInfo.specification} разработчик</span> <span>{profileInfo.fio}, {profileInfo.specification} разработчик</span>

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

@ -4,16 +4,17 @@ import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
import {getProfileInfo} from "../../redux/outstaffingSlice"; import {getProfileInfo} from "../../redux/outstaffingSlice";
import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs" import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
import {Footer} from '../../components/Footer/Footer' import {Footer} from '../../components/Footer/Footer'
import {transformHtml, urlForLocal} from "../../helper"; import { urlForLocal} from "../../helper";
import arrow from "../../images/right-arrow.png"; import arrow from "../../images/right-arrow.png";
import rightArrow from "../../images/arrowRight.png" import rightArrow from "../../images/arrowRight.png"
import gitImgItem from "../../images/gitItemImg.png" import gitImgItem from "../../images/gitItemImg.png"
import './summary.scss'
import {apiRequest} from "../../api/request"; import {apiRequest} from "../../api/request";
import {Navigate} from "react-router-dom"; import {Navigate} from "react-router-dom";
import './summary.scss'
export const Summary = () => { export const Summary = () => {
if(localStorage.getItem('role_status') === '18') { if(localStorage.getItem('role_status') === '18') {
return <Navigate to="/profile" replace/> return <Navigate to="/profile" replace/>

4
src/pages/Tracker/tracker.scss
View File

@ -79,9 +79,9 @@
background: white; background: white;
border-radius: 12px 12px 5px 5px; border-radius: 12px 12px 5px 5px;
position: relative; position: relative;
height: 70px; height: 73px;
display: flex; display: flex;
top: -10px; top: -13px;
align-items: center; align-items: center;
p { p {