profile achievements added

This commit is contained in:
kurpfish 2021-09-15 17:07:28 +03:00
parent 3a01fce386
commit 35fa372bdd
4 changed files with 110 additions and 31 deletions

View File

@ -0,0 +1,19 @@
import React from 'react'
import './achievement.scss'
export const Achievement = ({ achievement }) => {
return (
<div className='achievement'>
<div className='achievement__icon'>
<img src={achievement.img} />
</div>
<div className='achievement__popup'>
<div className='achievement__title'>{achievement.title}</div>
<div className='achievement__description'>
{achievement.description}
</div>
</div>
</div>
)
}

View File

@ -0,0 +1,35 @@
.achievement {
position: relative;
width: 50px;
height: 50px;
margin: 0 1rem;
&__popup {
position: absolute;
top: 50px;
left: 0;
width: 140px;
height: 60px;
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
display: none;
text-align: left;
}
&__icon {
width: 50px;
height: 50px;
}
img {
width: 100%;
height: 100%;
}
&:hover .achievement__popup {
display: block;
}
}

View File

@ -1,37 +1,53 @@
import React from 'react'; import React from 'react'
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom'
import maleBig from '../../images/medium_male_big.png'; import { Achievement } from '../Achievement/Achievement'
import style from './Sidebar.module.css';
import maleBig from '../../images/medium_male_big.png'
import './sidebar.scss'
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) {
yearsString = 'лет'; yearsString = 'лет'
} else if (years%10 === 2 || years%10 === 3 || years%10 === 4) { } else if (years % 10 === 2 || years % 10 === 3 || years % 10 === 4) {
yearsString = 'года'; yearsString = 'года'
} else { } else {
yearsString = 'лет'; yearsString = 'лет'
} }
return `${years} ${yearsString}`; return `${years} ${yearsString}`
} }
const Sidebar = ({ candidate }) => { const Sidebar = ({ candidate }) => {
console.log('c', candidate)
return ( return (
<div className={style.candidateSidebar}> <div className='candidateSidebar'>
<div className={style.candidateSidebar__info}> <div className='candidateSidebar__info'>
<img src={candidate.photo} alt="" /> <img src={candidate.photo} alt='' />
{ candidate && candidate.years_of_exp && <> {candidate && candidate.years_of_exp && (
<p className={style.candidateSidebar__info__e}>Опыт работы</p> <>
<p className={style.candidateSidebar__info__y}>{getYearsString(candidate.years_of_exp)}</p> <p className='candidateSidebar__experience-title'>Опыт работы</p>
</> } <p className='candidateSidebar__experience'>
{getYearsString(candidate.years_of_exp)}
</p>
</>
)}
<Link to={`/candidate/${candidate.id}/form`}> <Link to={`/candidate/${candidate.id}/form`}>
<button className={style.candidateSidebar__info__btn}>Выбрать к собеседованию</button> <button className='candidateSidebar__select'>
Выбрать к собеседованию
</button>
</Link> </Link>
<div className='candidateSidebar__achievements'>
{candidate &&
candidate.achievements &&
candidate.achievements.map((item) => {
return <Achievement achievement={item.achievement} />
})}
</div> </div>
</div> </div>
); </div>
}; )
}
export default Sidebar; export default Sidebar

View File

@ -6,6 +6,14 @@
border-bottom: none !important; border-bottom: none !important;
position: sticky; position: sticky;
top: 80px; top: 80px;
&__achievements {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
padding: 0 1rem;
margin-bottom: 80px;
}
} }
.candidateSidebar__info { .candidateSidebar__info {
@ -25,7 +33,7 @@
border-radius: 100px; border-radius: 100px;
} }
.candidateSidebar__info__e { .candidateSidebar__experience-title {
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display';
font-size: 1.8em; font-size: 1.8em;
font-weight: normal; font-weight: normal;
@ -35,7 +43,7 @@
margin-top: 20px; margin-top: 20px;
} }
.candidateSidebar__info__y { .candidateSidebar__experience {
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display';
font-size: 3em; font-size: 3em;
font-weight: 700; font-weight: 700;
@ -44,7 +52,7 @@
line-height: normal; line-height: normal;
} }
.candidateSidebar__info__btn { .candidateSidebar__select {
width: 280px; width: 280px;
height: 60px; height: 60px;
border-radius: 100px; border-radius: 100px;
@ -58,10 +66,10 @@
line-height: normal; line-height: normal;
text-align: center; text-align: center;
margin-top: 20px; margin-top: 20px;
margin-bottom: 120px; margin-bottom: 40px;
} }
.candidateSidebar__info__btn:hover { .candidateSidebar__select:hover {
background: rgba(0, 0, 0, 0); background: rgba(0, 0, 0, 0);
color: #73c141; color: #73c141;
box-shadow: inset 0 0 0 3px #73c141; box-shadow: inset 0 0 0 3px #73c141;
@ -142,7 +150,8 @@
flex-direction: column; flex-direction: column;
} }
.candidateSidebar__info__e, .candidateSidebar__info__y { .candidateSidebar__info__e,
.candidateSidebar__info__y {
width: 180px; width: 180px;
} }
} }