Fixed candidate pages

This commit is contained in:
MaxOvs19 2023-04-13 16:10:35 +03:00
parent 2e7375f18e
commit b91c8acd0c
5 changed files with 82 additions and 43 deletions

View File

@ -1,12 +1,23 @@
@use 'sass:math';
@use "sass:math";
.candidate {
padding-top: 23px;
z-index: 0;
&__wrapper {
background: #F1F1F1;
background: #f1f1f1;
min-height: 100vh;
}
.profileBreadcrumbs {
position: relative;
z-index: -1;
}
.row {
position: relative;
z-index: -1;
}
&__header {
display: flex;
@ -19,14 +30,21 @@
}
}
.col-xl-8 {
position: relative;
z-index: -1;
}
&__main {
margin-top: 60px;
position: relative;
z-index: -1;
&-description {
padding-left: 16px;
h2 {
font-family: 'GT Eesti Pro Display', sans-serif;
font-family: "GT Eesti Pro Display", sans-serif;
font-size: 2.8em;
font-weight: 700;
font-style: normal;
@ -36,7 +54,7 @@
}
p {
font-family: 'GT Eesti Pro Display', sans-serif;
font-family: "GT Eesti Pro Display", sans-serif;
font-size: 1.2em;
font-weight: 300;
font-style: normal;
@ -50,7 +68,7 @@
&__text {
p {
font-family: 'GT Eesti Pro Display', sans-serif;
font-family: "GT Eesti Pro Display", sans-serif;
font-size: 1.6em;
font-weight: 100;
font-style: normal;
@ -63,7 +81,7 @@
}
&-secondary {
font-family: 'GT Eesti Pro Display', sans-serif;
font-family: "GT Eesti Pro Display", sans-serif;
font-size: 1.6em;
font-weight: 100;
font-style: normal;
@ -92,7 +110,7 @@
position: absolute;
right: 20%;
top: 40%;
font-family: 'GT Eesti Pro Display', sans-serif;
font-family: "GT Eesti Pro Display", sans-serif;
font-size: 1.8em;
font-weight: 400;
font-style: normal;
@ -112,7 +130,7 @@
display: flex;
justify-content: center;
align-items: center;
background: #D3E4BC;
background: #d3e4bc;
border-radius: 50px;
margin-right: 20px;
@ -122,7 +140,7 @@
}
&-sp {
font-size: 12px;
color: #5B6871;
color: #5b6871;
max-width: 75px;
@media (max-width: 768px) {
@ -133,6 +151,8 @@
footer {
margin-top: 2.5rem !important;
position: relative;
z-index: -2;
}
}
@ -235,7 +255,7 @@
rgba(255, 255, 255, 0) 100%
);
color: #ffffff;
font-family: 'Muller', sans-serif;
font-family: "Muller", sans-serif;
font-size: 1.3em;
letter-spacing: normal;
border: none;
@ -311,7 +331,6 @@
top: 80px !important;
}
.candidate__works {
@media (min-width: 576px) {
padding: 0 0 45px 0;
@ -331,7 +350,7 @@
&__info {
width: 100%;
background: #E1FCCF;
background: #e1fccf;
border-radius: 12px 12px 0px 0px;
padding: 20px 0 20px 50px;
@ -355,7 +374,7 @@
&__body {
display: flex;
flex-direction: column;
background: #FFFFFF;
background: #ffffff;
height: 170px;
padding: 25px 40px 25px 25px;
border-radius: 12px;
@ -376,7 +395,7 @@
align-items: center;
justify-content: center;
border-radius: 50px;
background: #DDEEC6;
background: #ddeec6;
margin: auto 0;
}
}
@ -395,11 +414,10 @@
width: 100%;
height: 8px;
border-radius: 12px;
background: #D4F123;
background: #d4f123;
bottom: -36%;
left: 10%;
}
}
&__project {

View File

@ -24,14 +24,27 @@ const getYearsString = (years) => {
const CandidateSidebar = ({ candidate, setActiveSnippet, activeSnippet }) => {
const userId = localStorage.getItem("id");
const [addAspt, setAddAspt] = useState(false);
const showSnippet = () => {
setActiveSnippet(!activeSnippet);
};
const [addAspt, setAddAspt] = useState(false);
let levelAspt = {
spec: candidate.specification,
skils: SKILLS[candidate.position_id],
level: LEVELS[candidate.level],
};
return (
<div className="candidate-sidebar">
<ModalAspt
active={addAspt}
setActive={setAddAspt}
level={levelAspt}
></ModalAspt>
<div className="candidate-sidebar__info">
<div className="candidate-sidebar__position">
<h2>
@ -49,8 +62,6 @@ const CandidateSidebar = ({ candidate, setActiveSnippet, activeSnippet }) => {
</>
)}
<ModalAspt active={addAspt} setActive={setAddAspt}></ModalAspt>
<button
className="candidate-sidebar__select"
onClick={() => setAddAspt(true)}
@ -60,11 +71,8 @@ const CandidateSidebar = ({ candidate, setActiveSnippet, activeSnippet }) => {
{userId && (
<>
<Link to={`/${candidate.id}/calendar`}>
<button className="candidate-sidebar__select">Отчёты</button>
</Link>
<button className="candidate-sidebar__select" onClick={showSnippet}>
{activeSnippet ? "Показать" : "Скрыть"}
{activeSnippet ? "Код разработчика" : "Скрыть"}
</button>
<div className="candidate-sidebar__achievements">
{candidate &&

View File

@ -5,7 +5,7 @@
border-radius: 12px;
border-bottom: none !important;
position: sticky;
background: #FFFFFF;
background: #ffffff;
top: 80px;
&__position {
@ -13,7 +13,7 @@
h2 {
font-size: 2.5rem;
font-family: 'GT Eesti Pro Display', sans-serif;
font-family: "GT Eesti Pro Display", sans-serif;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
@ -29,6 +29,7 @@
}
&__info {
padding-bottom: 40px;
text-align: center;
margin-top: 10px;
width: 100%;
@ -53,7 +54,7 @@
}
.candidate-sidebar__experience-title {
font-family: 'GT Eesti Pro Display', sans-serif;
font-family: "GT Eesti Pro Display", sans-serif;
font-size: 1.8em;
font-weight: normal;
font-style: normal;
@ -63,7 +64,7 @@
}
.candidate-sidebar__experience {
font-family: 'GT Eesti Pro Display', sans-serif;
font-family: "GT Eesti Pro Display", sans-serif;
font-size: 2.5em;
font-weight: 700;
font-style: normal;
@ -78,7 +79,7 @@
border: none;
background-color: #73c141;
color: #ffffff;
font-family: 'Muller', sans-serif;
font-family: "Muller", sans-serif;
font-size: 1.6em;
font-style: normal;
letter-spacing: normal;
@ -95,7 +96,7 @@
}
.candidate-sidebar__info__l {
font-family: 'GT Eesti Pro Display', sans-serif;
font-family: "GT Eesti Pro Display", sans-serif;
font-size: 1.8em;
font-weight: 600;
font-style: normal;
@ -134,7 +135,7 @@
.candidate-sidebar__arrows-sp {
color: #705fa3;
font-family: 'Circe', sans-serif;
font-family: "Circe", sans-serif;
font-size: 1.3em;
font-weight: 400;
font-style: normal;

View File

@ -5,11 +5,12 @@ import logoTg from "../../../images/TgLogo.svg";
import arrow from "../../../images/right-arrow.png";
import interview from "../../../images/interviewLogo.svg";
import { Link } from "react-router-dom";
import ModalAdd from "../ModalAdd/ModalAdd";
import "./modalAspt.scss";
export const ModalAspt = ({ active, setActive }) => {
export const ModalAspt = ({ active, setActive, level }) => {
const [date, setDate] = useState("");
const [time, setTime] = useState("");
const [modalSend, setModalSend] = useState(false);
@ -36,13 +37,17 @@ export const ModalAspt = ({ active, setActive }) => {
<div className="aspt-decs__avatar">
<div className="aspt-decs__avatar_title">
<img src={avatar}></img>
<p>Full-stack Back end - разработчик, Senior</p>
<p>
{level.spec} {level.skils}, {level.level}{" "}
</p>
</div>
<div className="aspt-decs__avatar_back">
<Link to={"/profile/catalog"}>
<div>
<img src={arrow}></img>
</div>
<p>Вернуться к списку</p>
</Link>
</div>
</div>

View File

@ -56,9 +56,16 @@
}
&_back {
margin: 40px 0 0 0;
a {
display: flex;
align-items: center;
margin: 40px 0 0 0;
font-size: 12px;
line-height: 16px;
color: #5b6871;
text-decoration: none;
}
div {
background: #8dc63f;