Переписываю спорные решения
This commit is contained in:
104
src/pages/Summary/Summary.js
Normal file
104
src/pages/Summary/Summary.js
Normal file
@ -0,0 +1,104 @@
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
|
||||
import {getProfileInfo} from "../../redux/outstaffingSlice";
|
||||
import {useSelector} from "react-redux";
|
||||
import {transformHtml} from "../../helper";
|
||||
import {Footer} from '../../components/Footer/Footer'
|
||||
|
||||
import arrow from "../../images/right-arrow.png";
|
||||
import rightArrow from "../../images/arrowRight.png"
|
||||
import gitImgItem from "../../images/gitItemImg.png"
|
||||
|
||||
import {fetchGet} from "../../server/server";
|
||||
|
||||
import './summary.scss'
|
||||
|
||||
|
||||
|
||||
export const Summary = () => {
|
||||
const profileInfo = useSelector(getProfileInfo);
|
||||
const [openGit, setOpenGit] = useState(false);
|
||||
const [gitInfo, setGitInfo] = useState([]);
|
||||
useEffect(() => {
|
||||
fetchGet({
|
||||
link: `${process.env.REACT_APP_API_URL}/api/profile/portfolio-projects?card_id=${localStorage.getItem('cardId')}`,
|
||||
}).then((responseGit) => {
|
||||
setGitInfo(responseGit)
|
||||
})
|
||||
}, []);
|
||||
return(
|
||||
<div className='summary'>
|
||||
<ProfileHeader/>
|
||||
<div className='container'>
|
||||
<div className='summary__content'>
|
||||
<h2 className='summary__title'>Ваше резюме {openGit && <span>- Git</span>}</h2>
|
||||
{openGit && <div className='summary__back' onClick={() => setOpenGit(false)}>
|
||||
<img src={arrow} alt='arrow'/>
|
||||
<p>Вернуться</p>
|
||||
</div>}
|
||||
<div className='summary__info'>
|
||||
<div className='summary__person'>
|
||||
<img src={profileInfo.photo} className='summary__avatar' alt='avatar'/>
|
||||
<p className='summary__name'>{profileInfo.fio} {profileInfo.specification}</p>
|
||||
</div>
|
||||
{!openGit &&
|
||||
<button className='summary__git' onClick={()=> setOpenGit(true)}>Git</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
{!openGit &&
|
||||
<div className='summary__skills skills__section'>
|
||||
<div className='summary__sections__head'>
|
||||
<h3>Основной стек</h3>
|
||||
<button>Редактировать раздел</button>
|
||||
</div>
|
||||
<div className='skills__section__items'>
|
||||
<div className='skills__section__items__wrapper'>
|
||||
{profileInfo.skillValues && profileInfo.skillValues.map((skill) => {
|
||||
return <span key={skill.id} className='skill_item'>{skill.skill.name}</span>
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
{profileInfo.vc_text && !openGit &&
|
||||
<div className='summary__experience' dangerouslySetInnerHTML={transformHtml(profileInfo.vc_text)}>
|
||||
</div>
|
||||
}
|
||||
{openGit &&
|
||||
<div className='summary__sectionGit'>
|
||||
<div className='summary__sections__head'>
|
||||
<h3>Страница портфолио кода разработчика</h3>
|
||||
<button>Редактировать раздел</button>
|
||||
</div>
|
||||
<div className='summary__sectionGitItems'>
|
||||
{gitInfo.length && gitInfo.map((itemGit) => {
|
||||
return <div key={itemGit.id} className='summary__sectionGitItem gitItem'>
|
||||
<div className='gitItem__info'>
|
||||
<div className='gitItem__info__about'>
|
||||
<img src={gitImgItem} alt='gitImg' />
|
||||
<div className='gitItem__info__name'>
|
||||
<h4>{itemGit.title}</h4>
|
||||
<p>{itemGit.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='gitItem__info__specification'>
|
||||
<span className='gitItem__lineSkill'/>
|
||||
<p>{itemGit.main_stack}</p>
|
||||
</div>
|
||||
</div>
|
||||
<a className='gitItem__link' href={itemGit.link} target="_blank" rel="noreferrer">
|
||||
<img src={rightArrow} alt='arrowRight' />
|
||||
</a>
|
||||
</div>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<Footer/>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
379
src/pages/Summary/summary.scss
Normal file
379
src/pages/Summary/summary.scss
Normal file
@ -0,0 +1,379 @@
|
||||
.summary {
|
||||
background: #F1F1F1;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
font-family: 'LabGrotesque', sans-serif;
|
||||
//
|
||||
//&__container {
|
||||
// max-width: 1160px;
|
||||
// padding: 0 10px;
|
||||
// margin: 20px auto;
|
||||
// position: relative;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
//}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
line-height: 32px;
|
||||
margin-bottom: 0;
|
||||
|
||||
span {
|
||||
color: #52B709;
|
||||
}
|
||||
}
|
||||
|
||||
&__back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 30px;
|
||||
margin-top: 20px;
|
||||
cursor: pointer;
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
line-height: 32px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
min-height: 128px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 130px 0 45px;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: 930px) {
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 690px) {
|
||||
padding: 0 20px;
|
||||
min-height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
&__person {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 45px;
|
||||
|
||||
@media (max-width: 690px) {
|
||||
column-gap: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border-radius: 100px;
|
||||
|
||||
@media (max-width: 690px) {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 690px) {
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: #52B709;
|
||||
border-radius: 12px;
|
||||
width: 70%;
|
||||
height: 8px;
|
||||
bottom: -14px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__git {
|
||||
background: #52B709;
|
||||
border-radius: 44px;
|
||||
width: 177px;
|
||||
height: 50px;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
color: white;
|
||||
border: none;
|
||||
|
||||
@media (max-width: 690px) {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
&__skills {
|
||||
background: #FFFFFF;
|
||||
border-radius: 12px;
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
&__sections__head {
|
||||
display: flex;
|
||||
min-height: 69px;
|
||||
background: #E1FCCF;
|
||||
border-radius: 12px 12px 0px 0px;
|
||||
align-items: center;
|
||||
padding: 0 35px 0 50px;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
|
||||
@media (max-width: 660px) {
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
background: #FFFFFF;
|
||||
border-radius: 44px;
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: none;
|
||||
height: 42px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 32px;
|
||||
white-space: nowrap;
|
||||
|
||||
@media (max-width: 520px) {
|
||||
font-size: 12px;
|
||||
padding: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.skills__section {
|
||||
&__items {
|
||||
padding: 25px 35px 25px 50px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
padding: 15px 15px 20px;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
max-width: 630px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 5px;
|
||||
|
||||
.skill_item {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
white-space: nowrap;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__experience {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 20px;
|
||||
margin-top: 30px;
|
||||
|
||||
.experience {
|
||||
&__block {
|
||||
background: #FFFFFF;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding: 15px 35px 15px 50px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
padding: 15px 15px 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__sectionGit {
|
||||
margin-top: 25px;
|
||||
|
||||
&Items {
|
||||
margin-top: 25px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 20px;
|
||||
column-gap: 25px;
|
||||
justify-content: space-between;
|
||||
|
||||
.gitItem {
|
||||
width: 48%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12px;
|
||||
padding: 35px 30px 30px 45px;
|
||||
|
||||
@media (max-width: 825px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 470px) {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 350px;
|
||||
width: 100%;
|
||||
|
||||
@media (max-width: 825px) {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&__about {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 15px;
|
||||
}
|
||||
|
||||
&__name {
|
||||
h4 {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
margin-bottom: 0;
|
||||
white-space: nowrap;
|
||||
max-width: 300px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@media (max-width: 1040px) {
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
@media (max-width: 890px) {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
@media (max-width: 825px) {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
@media (max-width: 470px) {
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__specification {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
column-gap: 25px;
|
||||
|
||||
@media (max-width: 470px) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
background: #D4F123;
|
||||
border-radius: 12px;
|
||||
max-width: 260px;
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
border-radius: 50%;
|
||||
background: #DDEEC6;
|
||||
min-width: 48px;
|
||||
height: 48px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 70px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1160px;
|
||||
margin-top: 23px;
|
||||
|
||||
@media (max-width: 570px) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user