apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed candidate pages

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

22
src/components/CandidateSidebar/CandidateSidebar.js
View File

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

15
src/components/CandidateSidebar/candidateSidebar.scss
View File

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

11
src/components/UI/ModalAspt/ModalAspt.js
View File

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

9
src/components/UI/ModalAspt/modalAspt.scss
View File

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