Переписываю спорные решения
This commit is contained in:
96
src/pages/AuthForDevelopers/AuthForDevelopers.js
Normal file
96
src/pages/AuthForDevelopers/AuthForDevelopers.js
Normal file
@ -0,0 +1,96 @@
|
||||
import React from 'react'
|
||||
|
||||
import { AuthBox } from '../../components/AuthBox/AuthBox'
|
||||
|
||||
import { useSelector } from 'react-redux'
|
||||
import arrow from '../../images/arrow__login_page.png'
|
||||
import authImg from '../../images/auth_img.png'
|
||||
import cross from '../../images/cross.png'
|
||||
import text from '../../images/Body_Text.png'
|
||||
import vector from '../../images/Vector_Smart_Object.png'
|
||||
|
||||
import { selectAuth } from '../../redux/outstaffingSlice'
|
||||
import { useNavigate} from 'react-router-dom'
|
||||
import { Footer } from '../../components/Footer/Footer'
|
||||
|
||||
import './authForDevelopers.scss'
|
||||
|
||||
const AuthForDevelopers = () => {
|
||||
|
||||
const isAuth = useSelector(selectAuth);
|
||||
let navigate = useNavigate();
|
||||
|
||||
if (isAuth) {
|
||||
navigate('/profile')
|
||||
}
|
||||
|
||||
return (
|
||||
<section className='auth-developers'>
|
||||
<div className='auth-developers__background'>
|
||||
<img className='auth-developers__vector' src={vector} alt='' />
|
||||
<img
|
||||
className='auth-developers__vector-black'
|
||||
src={'./images/Vector_Smart_Object_black.png'}
|
||||
alt=''
|
||||
/>
|
||||
<div className='container'>
|
||||
<div className='row'>
|
||||
<div className='col-12 col-xl-6'>
|
||||
<div className='auth-developers__box'>
|
||||
<AuthBox
|
||||
title='Для разработчиков'
|
||||
altTitle='Для партнёров'
|
||||
roleChangeLink='/auth'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='col-xl-2'>
|
||||
<img className='auth-developers__arrow' src={arrow} alt='' />
|
||||
</div>
|
||||
<div className='col-12 col-xl-4'>
|
||||
<div className='auth-developers__info'>
|
||||
<div className='auth-developers__info-box'>
|
||||
<img src={authImg} alt='' />
|
||||
<h3>
|
||||
Управление
|
||||
<br /> командой
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className='auth-developers__info-container'>
|
||||
<div className='auth-developers__info-img'>
|
||||
<div>
|
||||
<img className='cross' src={cross} alt='' />
|
||||
</div>
|
||||
<div>
|
||||
{/* <img className='auth-specialists} src={specialists} alt="" /> */}
|
||||
<p className='auth-developers__specialists'>
|
||||
20 Специалистов
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul className='auth-developers__info-list'>
|
||||
<li className='auth-developers__info-item'>
|
||||
Рабочее
|
||||
<br />
|
||||
пространство
|
||||
</li>
|
||||
<li className='auth-info__list-item'>
|
||||
Управление задачами
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<img className='auth-developers__img-text' src={text} alt='' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
};
|
||||
|
||||
export default AuthForDevelopers
|
||||
207
src/pages/AuthForDevelopers/authForDevelopers.scss
Normal file
207
src/pages/AuthForDevelopers/authForDevelopers.scss
Normal file
@ -0,0 +1,207 @@
|
||||
.auth-developers {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.auth-developers__background {
|
||||
background-color: #f1f1f1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.auth-developers__vector,
|
||||
.auth-developers__vector-black {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.auth-developers__vector {
|
||||
top: -720px;
|
||||
left: -320px;
|
||||
}
|
||||
|
||||
.auth-developers__vector-black {
|
||||
top: 460px;
|
||||
right: -224px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-developers__vector,
|
||||
.auth-developers__vector-black {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* .form__error {
|
||||
font-size: 16px;
|
||||
color: #b21;
|
||||
margin-left: 45px;
|
||||
} */
|
||||
|
||||
.auth-developers__arrow {
|
||||
margin-top: 360px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-developers__arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-developers__info {
|
||||
background-color: #e1fccf;
|
||||
margin-top: 70px;
|
||||
max-width: 310px;
|
||||
padding-top: 30px;
|
||||
position: relative;
|
||||
padding-bottom: 310px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-developers__info {
|
||||
max-width: 380px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375.98px) {
|
||||
.auth-developers__info {
|
||||
max-width: 340px;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-developers__info-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-developers__info-box {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-developers__info-box > img {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin-left: -84px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-developers__info-box > img {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-developers__info-box > h3 {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 2em;
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 36px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-developers__info-box > h3 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-developers__info-container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.auth-developers__info-img {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
margin-top: 28px;
|
||||
margin-left: -40px;
|
||||
}
|
||||
|
||||
.auth-developers__info-img > div > img {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
.auth-developers__specialists {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.8em;
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 26.12px;
|
||||
text-align: left;
|
||||
transform: rotate(-90deg);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.auth-developers__info-list {
|
||||
list-style: none;
|
||||
margin-top: 110px;
|
||||
position: absolute;
|
||||
left: 34px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-developers__info-list {
|
||||
left: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-developers__info-item {
|
||||
color: #1f1f1f;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 2.6em;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 56.95px;
|
||||
text-align: left;
|
||||
text-decoration: underline;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 34px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-developers__info-item {
|
||||
font-size: 2.6em;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-developers__img-text {
|
||||
position: absolute;
|
||||
right: -68px;
|
||||
bottom: -84px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-developers__img-text {
|
||||
right: 0px;
|
||||
bottom: -40px;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-developers__auth-link {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.auth-developers__auth-link a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media (max-width: 766px) {
|
||||
.auth-developers__form-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.auth-developers__form-btn {
|
||||
margin: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
87
src/pages/AuthForPartners/AuthForPartners.js
Normal file
87
src/pages/AuthForPartners/AuthForPartners.js
Normal file
@ -0,0 +1,87 @@
|
||||
import React from 'react'
|
||||
import arrow from '../../images/arrow__login_page.png'
|
||||
import medium from '../../images/medium_male_big.png'
|
||||
import cross from '../../images/cross.png'
|
||||
import text from '../../images/Body_Text.png'
|
||||
import vector from '../../images/Vector_Smart_Object.png'
|
||||
import vectorBlack from '../../images/Vector_Smart_Object_black.png'
|
||||
import { useSelector } from 'react-redux'
|
||||
import { selectAuth } from '../../redux/outstaffingSlice'
|
||||
import { useNavigate} from 'react-router-dom'
|
||||
|
||||
import { Footer } from '../../components/Footer/Footer'
|
||||
import { AuthBox } from '../../components/AuthBox/AuthBox'
|
||||
|
||||
import './authForPartners.scss'
|
||||
|
||||
const AuthForPartners = () => {
|
||||
const isAuth = useSelector(selectAuth);
|
||||
let navigate = useNavigate();
|
||||
|
||||
if (isAuth) {
|
||||
navigate('/')
|
||||
}
|
||||
|
||||
return (
|
||||
<section className='auth-partners'>
|
||||
<div className='auth-partners__background'>
|
||||
<img className='auth-partners__vector' src={vector} alt='' />
|
||||
<img className='auth-partners__vector-black' src={vectorBlack} alt='' />
|
||||
<div className='container'>
|
||||
<div className='row'>
|
||||
<div className='col-12 col-xl-6'>
|
||||
<div className='auth-partners__box'>
|
||||
<AuthBox
|
||||
title='Для партнёров'
|
||||
altTitle='Для разработчиков'
|
||||
roleChangeLink='/authdev'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='col-xl-2'>
|
||||
<img className='auth-partners__arrow' src={arrow} alt='' />
|
||||
</div>
|
||||
<div className='col-12 col-xl-4'>
|
||||
<div className='auth-partners__info'>
|
||||
<div className='auth-partners__info-box'>
|
||||
<img src={medium} alt='' />
|
||||
<h3>
|
||||
Frontend разработчик,
|
||||
<br /> Middle
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className='auth-partners__info-container'>
|
||||
<div className='auth-partners__info-img'>
|
||||
<div>
|
||||
<img className='cross' src={cross} alt='' />
|
||||
</div>
|
||||
<div>
|
||||
{/* <img className='auth-specialists} src={specialists} alt="" /> */}
|
||||
<p className='auth-partners__specialists'>
|
||||
20 Специалистов
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul className='auth-partners__info-list'>
|
||||
<li className='auth-partners__info-item'>Ruby on Rails</li>
|
||||
<li className='auth-partners__info-item'>PHP</li>
|
||||
<li className='auth-partners__info-item'>Python</li>
|
||||
<li className='auth-partners__info-item'>Vue.js</li>
|
||||
<li className='auth-partners__info-item'>React. JS</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<img className='auth-partners__img-text' src={text} alt='' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
};
|
||||
|
||||
export default AuthForPartners
|
||||
288
src/pages/AuthForPartners/authForPartners.scss
Normal file
288
src/pages/AuthForPartners/authForPartners.scss
Normal file
@ -0,0 +1,288 @@
|
||||
.auth-partners {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.auth-partners__background {
|
||||
background-color: #f1f1f1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.auth-partners__vector,
|
||||
.auth-partners__vector-black {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.auth-partners__vector {
|
||||
top: -720px;
|
||||
left: -320px;
|
||||
}
|
||||
|
||||
.auth-partners__vector-black {
|
||||
top: 460px;
|
||||
right: -224px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-partners__vector,
|
||||
.auth-partners__vector-black {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__arrow {
|
||||
margin-top: 360px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-partners__arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__info {
|
||||
background-color: #e1fccf;
|
||||
margin-top: 70px;
|
||||
max-width: 310px;
|
||||
padding-top: 30px;
|
||||
position: relative;
|
||||
padding-bottom: 310px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-partners__info {
|
||||
max-width: 380px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375.98px) {
|
||||
.auth-partners__info {
|
||||
max-width: 340px;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__info-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-partners__info-box {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__info-box > img {
|
||||
width: 165px;
|
||||
height: 165px;
|
||||
margin-left: -84px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-partners__info-box > img {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__info-box > h3 {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 2em;
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 36px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-partners__info-box > h3 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__info-container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.auth-partners__info-img {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
margin-top: 28px;
|
||||
margin-left: -40px;
|
||||
}
|
||||
|
||||
.auth-partners__info-img > div > img {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
.auth-partners__specialists {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.8em;
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 26.12px;
|
||||
text-align: left;
|
||||
transform: rotate(-90deg);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* .specialists {
|
||||
margin-left: 26px;
|
||||
} */
|
||||
|
||||
.auth-partners__info-list {
|
||||
list-style: none;
|
||||
margin-top: 110px;
|
||||
position: absolute;
|
||||
right: -70px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-partners__info-list {
|
||||
left: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__info-item {
|
||||
color: #1f1f1f;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 4em;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 56.95px;
|
||||
text-align: left;
|
||||
text-decoration: underline;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-partners__info-item {
|
||||
font-size: 2.6em;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__img-text {
|
||||
position: absolute;
|
||||
right: -68px;
|
||||
bottom: -84px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-partners__img-text {
|
||||
right: 0px;
|
||||
bottom: -40px;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__footer--left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-partners__footer--left {
|
||||
margin-top: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__footer__sp {
|
||||
padding: 0 100px 0 34px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-partners__footer__sp {
|
||||
padding: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__footer--left > div > span {
|
||||
color: #18586e;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.6em;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 16.81px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-partners__footer--left > div > span {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__footer-icon {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.auth-partners__footer-icon > img {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-partners__footer-icon > img {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__footer--right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: left;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-partners__footer--right {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.auth-partners__phone {
|
||||
color: #003b65;
|
||||
font-family: 'CeraPro';
|
||||
font-size: 2.1em;
|
||||
letter-spacing: normal;
|
||||
line-height: 25px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.auth-partners__working-hours {
|
||||
color: #003b65;
|
||||
font-family: 'CeraPro';
|
||||
font-size: 1.2em;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: normal;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.auth-partners__auth-link {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.auth-partners__auth-link a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media (max-width: 766px) {
|
||||
.auth-partners__form-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.auth-partners__form-btn {
|
||||
margin: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
import React from 'react';
|
||||
import AuthForDevelopers from '../components/Auth/AuthForDevelopers';
|
||||
|
||||
const AuthPageForDevelopers = () => {
|
||||
return <AuthForDevelopers />;
|
||||
};
|
||||
|
||||
export default AuthPageForDevelopers;
|
||||
@ -1,8 +0,0 @@
|
||||
import React from 'react';
|
||||
import AuthForPartners from '../components/Auth/AuthForPartners';
|
||||
|
||||
const AuthPageForPartners = () => {
|
||||
return <AuthForPartners />;
|
||||
};
|
||||
|
||||
export default AuthPageForPartners;
|
||||
@ -1,11 +1,11 @@
|
||||
import React from 'react';
|
||||
import { useHistory } from 'react-router';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { WithLogout } from '../hoc/withLogout';
|
||||
import Calendar from '../components/Calendar/Calendar';
|
||||
|
||||
const CalendarPage = () => {
|
||||
const history = useHistory();
|
||||
return <WithLogout><Calendar onSelect={() => { history.push('/report/0') }} /></WithLogout>;
|
||||
const navigate = useNavigate();
|
||||
return <WithLogout><Calendar onSelect={() => { navigate('/report/0') }} /></WithLogout>;
|
||||
};
|
||||
|
||||
export default CalendarPage;
|
||||
|
||||
@ -1,98 +1,99 @@
|
||||
import React from 'react'
|
||||
import { useDispatch, useSelector } from 'react-redux'
|
||||
import { useHistory, useParams } from 'react-router-dom'
|
||||
import {useDispatch, useSelector} from 'react-redux'
|
||||
import {useParams, useNavigate} from 'react-router-dom'
|
||||
import {
|
||||
currentCandidate,
|
||||
selectCurrentCandidate,
|
||||
auth
|
||||
} from '../redux/outstaffingSlice'
|
||||
import SVG from 'react-inlinesvg'
|
||||
import { WithLogout } from '../hoc/withLogout'
|
||||
import {WithLogout} from '../hoc/withLogout'
|
||||
import Form from '../components/Form/Form'
|
||||
import { LEVELS, SKILLS } from '../components/constants/constants'
|
||||
import { fetchGet } from '../server/server'
|
||||
import { Footer } from '../components/Footer/Footer'
|
||||
import {LEVELS, SKILLS} from '../components/constants/constants'
|
||||
import {fetchGet} from '../server/server'
|
||||
import {Footer} from '../components/Footer/Footer'
|
||||
|
||||
import arrow from '../images/right-arrow.png'
|
||||
import rectangle from '../images/rectangle_secondPage.png'
|
||||
import telegramIcon from '../images/telegram-icon.svg'
|
||||
|
||||
import './formPage.scss'
|
||||
import { getRole } from '../redux/roleSlice'
|
||||
import {getRole} from '../redux/roleSlice'
|
||||
|
||||
const goBack = (history) => {
|
||||
history.goBack()
|
||||
};
|
||||
|
||||
const FormPage = () => {
|
||||
const params = useParams();
|
||||
const history = useHistory();
|
||||
const navigate = useNavigate();
|
||||
const dispatch = useDispatch();
|
||||
const candidate = useSelector(selectCurrentCandidate);
|
||||
const role = useSelector(getRole);
|
||||
|
||||
const goBack = () => {
|
||||
navigate(-1)
|
||||
};
|
||||
|
||||
if (!candidate.id) {
|
||||
fetchGet({
|
||||
link: `${process.env.REACT_APP_API_URL}/api/profile/`,
|
||||
params: Number(params.id),
|
||||
history,
|
||||
navigate,
|
||||
role,
|
||||
logout: () => dispatch(auth(false))
|
||||
}).then((el) => dispatch(currentCandidate(el)))
|
||||
}
|
||||
|
||||
return (
|
||||
<WithLogout>
|
||||
<div className='form-page'>
|
||||
<div className='form-page__back'>
|
||||
<div className='form-page__arrow' onClick={() => goBack(history)}>
|
||||
<div className='form-page__arrow-img'>
|
||||
<img src={arrow} alt='' />
|
||||
</div>
|
||||
<div className='form-page__back-to-candidate'>
|
||||
<span>Вернуться к кандидату</span>
|
||||
<WithLogout>
|
||||
<div className='form-page'>
|
||||
<div className='form-page__back'>
|
||||
<div className='form-page__arrow' onClick={goBack}>
|
||||
<div className='form-page__arrow-img'>
|
||||
<img src={arrow} alt=''/>
|
||||
</div>
|
||||
<div className='form-page__back-to-candidate'>
|
||||
<span>Вернуться к кандидату</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='form-page__candidate'>
|
||||
<div className='form-page__avatar'>
|
||||
<img src={candidate.photo} alt='candidate avatar'/>
|
||||
</div>
|
||||
<div className='form-page__candidate-info'>
|
||||
<div className='form-page__position'>
|
||||
<div className='form-page__candidate'>
|
||||
<div className='form-page__avatar'>
|
||||
<img src={candidate.photo} alt='candidate avatar'/>
|
||||
</div>
|
||||
<div className='form-page__candidate-info'>
|
||||
<div className='form-page__position'>
|
||||
<span>
|
||||
{candidate.specification} {SKILLS[candidate.position_id]},{' '}
|
||||
{LEVELS[candidate.level]}
|
||||
</span>
|
||||
</div>
|
||||
<div className='form-page__selected'>
|
||||
<img src={rectangle} alt='rectangle'/>
|
||||
<span>Выбранный кандидат</span>
|
||||
</div>
|
||||
<div className='form-page__selected'>
|
||||
<img src={rectangle} alt='rectangle'/>
|
||||
<span>Выбранный кандидат</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='form-page__interview'>
|
||||
<div className='form-page__form'>
|
||||
<Form/>
|
||||
</div>
|
||||
<div className='form-page__separator'>
|
||||
<div className='form-page__line'></div>
|
||||
<div className='form-page__option'>или</div>
|
||||
</div>
|
||||
<div className='form-page__telegram'>
|
||||
<div className='form-page__telegram-text'>
|
||||
Заявка на собеседование через телеграм
|
||||
</div>
|
||||
<div className='form-page__telegram-icon'>
|
||||
<a href='https://t.me/st0kir' target='_blank' rel="noreferrer">
|
||||
<SVG src={telegramIcon}/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer/>
|
||||
</div>
|
||||
<div className='form-page__interview'>
|
||||
<div className='form-page__form'>
|
||||
<Form />
|
||||
</div>
|
||||
<div className='form-page__separator'>
|
||||
<div className='form-page__line'></div>
|
||||
<div className='form-page__option'>или</div>
|
||||
</div>
|
||||
<div className='form-page__telegram'>
|
||||
<div className='form-page__telegram-text'>
|
||||
Заявка на собеседование через телеграм
|
||||
</div>
|
||||
<div className='form-page__telegram-icon'>
|
||||
<a href='https://t.me/st0kir' target='_blank' rel="noreferrer">
|
||||
<SVG src={telegramIcon} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
</WithLogout>
|
||||
</WithLogout>
|
||||
)
|
||||
};
|
||||
|
||||
|
||||
@ -1,96 +0,0 @@
|
||||
import React from 'react';
|
||||
import {useSelector} from "react-redux";
|
||||
import {getProfileInfo} from "../redux/outstaffingSlice";
|
||||
import {ProfileHeader} from "../components/Profile/ProfileHeader";
|
||||
import {Link} from "react-router-dom";
|
||||
import {Footer} from "../components/Footer/Footer";
|
||||
|
||||
import reportsIcon from "../images/reports.png"
|
||||
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 rightArrow from "../images/arrowRight.png"
|
||||
|
||||
import '../components/Profile/profile.scss'
|
||||
|
||||
export const Profile = () => {
|
||||
const profileInfo = useSelector(getProfileInfo);
|
||||
return(
|
||||
<div className='profile'>
|
||||
<ProfileHeader/>
|
||||
<div className='container'>
|
||||
<h2 className='profile__title'>Добрый день, <span>{profileInfo.fio}</span></h2>
|
||||
<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>
|
||||
</div>
|
||||
<div className='profile__items'>
|
||||
<Link to={'/ProfileCalendar'} className='item'>
|
||||
<div className='item__about'>
|
||||
<img src={reportsIcon} alt='report'/>
|
||||
<h3>Ваша отчетность</h3>
|
||||
</div>
|
||||
<div className='item__info'>
|
||||
<p><span>У вас 122 часа</span><br/> отработанных в этом месяце</p>
|
||||
<div className='item__infoLink'>
|
||||
<img src={rightArrow} alt='arrow'/>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<Link to={'/summary'} className='item'>
|
||||
<div className='item__about'>
|
||||
<img src={summaryIcon} alt='summary'/>
|
||||
<h3>Данные и резюме</h3>
|
||||
</div>
|
||||
<div className='item__info'>
|
||||
<p>Ваше резюме<br/><span>заполнено</span></p>
|
||||
<div className='item__infoLink'>
|
||||
<img src={rightArrow} alt='arrow'/>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<Link to={'/profile'} className='item'>
|
||||
<div className='item__about'>
|
||||
<img src={timerIcon} alt='timer'/>
|
||||
<h3>Трекер времени</h3>
|
||||
</div>
|
||||
<div className='item__info'>
|
||||
<p>Сколько времени занимает<br/> выполнение задач</p>
|
||||
<div className='item__infoLink'>
|
||||
<img src={rightArrow} alt='arrow'/>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<Link to={'/profile'} className='item'>
|
||||
<div className='item__about'>
|
||||
<img src={paymentIcon} alt='payment'/>
|
||||
<h3>Выплаты</h3>
|
||||
</div>
|
||||
<div className='item__info'>
|
||||
<p>У вас <span>подтвержден</span><br/> статус самозанятого</p>
|
||||
<div className='item__infoLink'>
|
||||
<img src={rightArrow} alt='arrow'/>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<Link to={'/profile'} className='item'>
|
||||
<div className='item__about'>
|
||||
<img src={settingIcon} alt='settings'/>
|
||||
<h3>Настройки аккаунта</h3>
|
||||
</div>
|
||||
<div className='item__info'>
|
||||
<p>Перейдите чтобы начать<br/> редактирование</p>
|
||||
<div className='item__infoLink'>
|
||||
<img src={rightArrow} alt='arrow'/>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<Footer/>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
100
src/pages/Profile/Profile.js
Normal file
100
src/pages/Profile/Profile.js
Normal file
@ -0,0 +1,100 @@
|
||||
import React from 'react';
|
||||
import {useSelector} from "react-redux";
|
||||
import {Link} from "react-router-dom";
|
||||
|
||||
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
|
||||
import {Footer} from "../../components/Footer/Footer";
|
||||
|
||||
import {getProfileInfo} from "../../redux/outstaffingSlice";
|
||||
|
||||
import reportsIcon from "../../images/reports.png"
|
||||
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 rightArrow from "../../images/arrowRight.png"
|
||||
|
||||
import './profile.scss'
|
||||
|
||||
export const Profile = () => {
|
||||
|
||||
const profileInfo = useSelector(getProfileInfo);
|
||||
|
||||
return (
|
||||
<div className='profile'>
|
||||
<ProfileHeader/>
|
||||
<div className='container'>
|
||||
<h2 className='profile__title'>Добрый день, <span>{profileInfo.fio}</span></h2>
|
||||
<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>
|
||||
</div>
|
||||
<div className='profile__items'>
|
||||
<Link to={'/calendar'} className='item'>
|
||||
<div className='item__about'>
|
||||
<img src={reportsIcon} alt='report'/>
|
||||
<h3>Ваша отчетность</h3>
|
||||
</div>
|
||||
<div className='item__info'>
|
||||
<p><span>У вас 122 часа</span><br/> отработанных в этом месяце</p>
|
||||
<div className='item__infoLink'>
|
||||
<img src={rightArrow} alt='arrow'/>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<Link to={'/summary'} className='item'>
|
||||
<div className='item__about'>
|
||||
<img src={summaryIcon} alt='summary'/>
|
||||
<h3>Данные и резюме</h3>
|
||||
</div>
|
||||
<div className='item__info'>
|
||||
<p>Ваше резюме<br/><span>заполнено</span></p>
|
||||
<div className='item__infoLink'>
|
||||
<img src={rightArrow} alt='arrow'/>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<Link to={'/profile'} className='item'>
|
||||
<div className='item__about'>
|
||||
<img src={timerIcon} alt='timer'/>
|
||||
<h3>Трекер времени</h3>
|
||||
</div>
|
||||
<div className='item__info'>
|
||||
<p>Сколько времени занимает<br/> выполнение задач</p>
|
||||
<div className='item__infoLink'>
|
||||
<img src={rightArrow} alt='arrow'/>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<Link to={'/profile'} className='item'>
|
||||
<div className='item__about'>
|
||||
<img src={paymentIcon} alt='payment'/>
|
||||
<h3>Выплаты</h3>
|
||||
</div>
|
||||
<div className='item__info'>
|
||||
<p>У вас <span>подтвержден</span><br/> статус самозанятого</p>
|
||||
<div className='item__infoLink'>
|
||||
<img src={rightArrow} alt='arrow'/>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<Link to={'/profile'} className='item'>
|
||||
<div className='item__about'>
|
||||
<img src={settingIcon} alt='settings'/>
|
||||
<h3>Настройки аккаунта</h3>
|
||||
</div>
|
||||
<div className='item__info'>
|
||||
<p>Перейдите чтобы начать<br/> редактирование</p>
|
||||
<div className='item__infoLink'>
|
||||
<img src={rightArrow} alt='arrow'/>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<Footer/>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
120
src/pages/Profile/profile.scss
Normal file
120
src/pages/Profile/profile.scss
Normal file
@ -0,0 +1,120 @@
|
||||
.profile {
|
||||
background: #F1F1F1;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
font-family: 'LabGrotesque', sans-serif;
|
||||
|
||||
&__title {
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
line-height: 32px;
|
||||
color: #000000;
|
||||
span {
|
||||
color: #52B709;
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
font-size: 17px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&__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;
|
||||
}
|
||||
|
||||
&__items {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 30px;
|
||||
row-gap: 25px;
|
||||
column-gap: 35px;
|
||||
|
||||
@media (max-width: 1175px) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
max-width: 353px;
|
||||
width: 100%;
|
||||
padding: 35px 45px 15px 30px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
@media (max-width: 1175px) {
|
||||
width: 48%;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
@media (max-width: 925px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__about {
|
||||
display: flex;
|
||||
column-gap: 20px;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
|
||||
h3 {
|
||||
color: #000000;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
max-width: 125px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
color: #000000;
|
||||
margin-bottom: 0;
|
||||
|
||||
span {
|
||||
color: #52B709;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
&Link {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: #DDEEC6;
|
||||
border-radius: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1160px;
|
||||
margin-top: 23px;
|
||||
|
||||
@media (max-width: 570px) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 70px;
|
||||
}
|
||||
}
|
||||
@ -1,16 +1,19 @@
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import {ProfileHeader} from "../components/Profile/ProfileHeader";
|
||||
import {getProfileInfo} from "../redux/outstaffingSlice";
|
||||
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 {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'
|
||||
|
||||
import arrow from "../images/right-arrow.png";
|
||||
import rightArrow from "../images/arrowRight.png"
|
||||
import gitImgItem from "../images/gitItemImg.png"
|
||||
|
||||
import '../components/Profile/summary.scss'
|
||||
import {fetchGet} from "../server/server";
|
||||
|
||||
export const Summary = () => {
|
||||
const profileInfo = useSelector(getProfileInfo);
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
import {Redirect} from "react-router-dom"
|
||||
import { HeaderPageTestsQuiz } from "../../components/features/quiz/HeaderPageTests"
|
||||
import { Instruction } from "../../components/features/quiz/Instructions"
|
||||
import {useNavigate} from "react-router-dom"
|
||||
import {HeaderPageTestsQuiz} from "../../components/features/quiz/HeaderPageTests"
|
||||
import {Instruction} from "../../components/features/quiz/Instructions"
|
||||
import React from "react";
|
||||
import {useSelector} from "react-redux";
|
||||
import {selectedTest} from "../../redux/quizSlice";
|
||||
@ -8,16 +8,17 @@ import {selectedTest} from "../../redux/quizSlice";
|
||||
|
||||
export const InstructionPage = () => {
|
||||
|
||||
const test = useSelector(selectedTest)
|
||||
const test = useSelector(selectedTest)
|
||||
|
||||
if(!test){
|
||||
return <Redirect to={'/quiz'} />
|
||||
}
|
||||
let navigate = useNavigate();
|
||||
if (!test) {
|
||||
navigate('/quiz')
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<HeaderPageTestsQuiz isVisibilityButton={false}/>
|
||||
<Instruction />
|
||||
</>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<HeaderPageTestsQuiz isVisibilityButton={false}/>
|
||||
<Instruction/>
|
||||
</>
|
||||
)
|
||||
};
|
||||
@ -1,24 +1,26 @@
|
||||
import {Redirect} from "react-router-dom"
|
||||
import React from "react";
|
||||
import {useNavigate} from "react-router-dom"
|
||||
import {useSelector} from "react-redux";
|
||||
|
||||
import {HeaderPageTestsQuiz} from "../../components/features/quiz/HeaderPageTests"
|
||||
import {MyTestsQuiz} from "../../components/features/quiz/MyTestsQuiz"
|
||||
import {useSelector} from "react-redux";
|
||||
|
||||
import {selectedTest, selectPassedTests} from "../../redux/quizSlice";
|
||||
import React from "react";
|
||||
|
||||
|
||||
export const InterjacentPage = () => {
|
||||
|
||||
const test = useSelector(selectedTest)
|
||||
const passedTests = useSelector(selectPassedTests)
|
||||
const test = useSelector(selectedTest);
|
||||
const passedTests = useSelector(selectPassedTests)
|
||||
let navigate = useNavigate();
|
||||
if (!test) {
|
||||
navigate('/quiz')
|
||||
}
|
||||
|
||||
if (!test) {
|
||||
return <Redirect to={'/quiz'}/>
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
return (
|
||||
<>
|
||||
<HeaderPageTestsQuiz isVisibilityButton={true}/>
|
||||
<MyTestsQuiz listTests={passedTests}/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</>
|
||||
)
|
||||
};
|
||||
@ -1,4 +1,4 @@
|
||||
import {Redirect} from 'react-router-dom'
|
||||
import {useNavigate} from 'react-router-dom'
|
||||
import {HeaderPageTestsQuiz} from '../../components/features/quiz/HeaderPageTests'
|
||||
import {TaskQuiz} from '../../components/features/quiz/Task'
|
||||
import {useSelector} from "react-redux";
|
||||
@ -6,16 +6,16 @@ import {selectedTest} from "../../redux/quizSlice";
|
||||
import React from "react";
|
||||
|
||||
export const QuizTestPage = () => {
|
||||
let navigate = useNavigate()
|
||||
const test = useSelector(selectedTest)
|
||||
|
||||
const test = useSelector(selectedTest)
|
||||
|
||||
if (!test) {
|
||||
return <Redirect to={'/quiz'}/>
|
||||
}
|
||||
return (
|
||||
<>
|
||||
if (!test) {
|
||||
navigate('/quiz')
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<HeaderPageTestsQuiz isVisibilityButton={false}/>
|
||||
<TaskQuiz/>
|
||||
</>
|
||||
)
|
||||
</>
|
||||
)
|
||||
};
|
||||
@ -1,4 +1,4 @@
|
||||
import {Redirect} from "react-router-dom"
|
||||
import {useNavigate} from "react-router-dom"
|
||||
import {HeaderPageTestsQuiz} from "../../components/features/quiz/HeaderPageTests"
|
||||
import {Results} from "../../components/features/quiz/Results";
|
||||
import {useSelector} from "react-redux";
|
||||
@ -8,16 +8,17 @@ import React from "react";
|
||||
|
||||
export const ResultPage = () => {
|
||||
|
||||
const test = useSelector(selectedTest)
|
||||
const test = useSelector(selectedTest)
|
||||
|
||||
if (!test) {
|
||||
return <Redirect to={'/quiz'}/>
|
||||
}
|
||||
let navigate = useNavigate();
|
||||
if (!test) {
|
||||
navigate('/quiz')
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
return (
|
||||
<>
|
||||
<HeaderPageTestsQuiz isVisibilityButton={false}/>
|
||||
<Results/>
|
||||
</>
|
||||
)
|
||||
</>
|
||||
)
|
||||
};
|
||||
Reference in New Issue
Block a user