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

94
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,21 +90,30 @@ 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__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={arrow} alt=''/>
<img src={rightArrow} alt=''/>
</div>
<div className='candidate__arrow-sp'>
<span>Вернуться к списку</span>
</div>
</div>
</div>
<div className='candidate__icon'>
<h3>{header}</h3>
@ -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 className="item-works__mark">Angular</div>
</div>
<div className='item-works__body__head__arrow'>
<img src={rightArrow} alt='arrow' />
</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 className="item-works__mark item-works__mark_yellow">Laravel</div>
</div>
<div className='item-works__body__head__arrow'>
<img src={rightArrow} alt='arrow' />
</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>
)
};

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

@ -1,12 +1,22 @@
@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;
}
}
@ -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;
display: flex;
flex-direction: column;
background: #FFFFFF;
height: 170px;
padding: 25px 40px 25px 25px;
border-radius: 12px;
justify-content: space-between;
&::before{
content: "";
position: absolute;
top: -2px;
left: 25px;
height: 5px;
width: 29px;
border-radius: 3px;
background-color: #54b611;
}
&:hover {
text-decoration: none;
}
&__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;
&__head {
display: flex;
justify-content: space-between;
&__arrow {
width: 48px;
height: 48px;
display: flex;
align-items: center;
column-gap: 7px;
line-height: math.div(36,13);
justify-content: center;
border-radius: 50px;
background: #DDEEC6;
margin: auto 0;
}
}
&::before{
border-radius: 50%;
&__info {
display: flex;
position: relative;
align-items: start;
img {
margin-top: 15px;
}
&:after {
content: "";
width: 13px;
height: 13px;
background-color: #73c141;
}
&_yellow{
&::before{
background-color: #e09f14;
}
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;
flex-direction: column;
align-items: center;
border: 2px solid whitesmoke;
border-radius: 12px;
border-bottom: none !important;
position: sticky;
background: #FFFFFF;
top: 80px;
&__position {

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

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

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

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

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

@ -9,6 +9,8 @@ import {getRole} from "../../redux/roleSlice";
import {urlForLocal} from "../../helper";
import avatarMok from "../../pages/PartnerTreaties/Images/avatarMok.png"
import './profileHeader.scss'
@ -129,7 +131,7 @@ export const ProfileHeader = () => {
}
</h3>
<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>
</div>
</div>

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

@ -113,7 +113,7 @@ export const PartnerBid = () => {
</div>
<div className='partnerBid__suitable__persons'>
{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' />
<p>{person.name}</p>
<Link className='partnerBid__suitable__person__more' to={person.link}>
@ -122,7 +122,7 @@ export const PartnerBid = () => {
<div className='partnerBid__suitable__person__info'>
</div>
</div>
</Link>
})
}
</div>

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

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

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

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

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

@ -50,11 +50,23 @@
}
&__info {
position: relative;
display: flex;
padding: 15px 50px 14px 16px;
width: 100%;
justify-content: space-between;
&:after {
content: '';
position: absolute;
background: #52B709;
border-radius: 12px;
height: 4px;
width: 51%;
top: 0;
right: 0;
}
&__qualification {
display: flex;
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 paymentIcon from "../../images/paymentIcon.png"
import settingIcon from "../../images/settingIcon.png"
import avatarMok from "../PartnerTreaties/Images/avatarMok.png"
import rightArrow from "../../images/arrowRight.png"
@ -105,7 +106,7 @@ export const Profile = () => {
</h2>
<div className='summary__info'>
<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'>
{user === 'developer' ?
<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 {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
import {Footer} from '../../components/Footer/Footer'
import {transformHtml, urlForLocal} from "../../helper";
import { urlForLocal} from "../../helper";
import arrow from "../../images/right-arrow.png";
import rightArrow from "../../images/arrowRight.png"
import gitImgItem from "../../images/gitItemImg.png"
import './summary.scss'
import {apiRequest} from "../../api/request";
import {Navigate} from "react-router-dom";
import './summary.scss'
export const Summary = () => {
if(localStorage.getItem('role_status') === '18') {
return <Navigate to="/profile" replace/>

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

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