Fixed candidate pages

2023-04-13 16:10:35 +03:00 · 2023-04-13 16:10:35 +03:00 · b91c8acd0c
commit b91c8acd0c
parent 2e7375f18e
5 changed files with 82 additions and 43 deletions
--- a/src/components/Candidate/candidate.scss
+++ b/src/components/Candidate/candidate.scss
@ -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,13 +331,12 @@
  top: 80px !important;
 }

-
-.candidate__works{
+.candidate__works {
  @media (min-width: 576px) {
    padding: 0 0 45px 0;
  }
 }
-.works__body{
+.works__body {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px -30px;
@ -331,7 +350,7 @@

  &__info {
    width: 100%;
-    background: #E1FCCF;
+    background: #e1fccf;
    border-radius: 12px 12px 0px 0px;
    padding: 20px 0 20px 50px;

@ -342,7 +361,7 @@
    }
  }
 }
-.item-works{
+.item-works {
  display: flex;
  flex-direction: column;
  flex: 0 1 49%;
@ -352,10 +371,10 @@
    flex: 0 1 100%;
  }

-  &__body{
+  &__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 {
--- a/src/components/CandidateSidebar/CandidateSidebar.js
+++ b/src/components/CandidateSidebar/CandidateSidebar.js
@ -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 &&
--- a/src/components/CandidateSidebar/candidateSidebar.scss
+++ b/src/components/CandidateSidebar/candidateSidebar.scss
@ -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;
--- a/src/components/UI/ModalAspt/ModalAspt.js
+++ b/src/components/UI/ModalAspt/ModalAspt.js
@ -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">
-              <div>
-                <img src={arrow}></img>
-              </div>
-              <p>Вернуться к списку</p>
+              <Link to={"/profile/catalog"}>
+                <div>
+                  <img src={arrow}></img>
+                </div>
+                <p>Вернуться к списку</p>
+              </Link>
            </div>
          </div>

@ -80,7 +85,7 @@ export const ModalAspt = ({ active, setActive }) => {
      <ModalAdd active={modalSend} setActive={setModalSend}>
        <div className="send">
          <img src={interview}></img>
-          <h2>Спасибо,собеседование назначено</h2>
+          <h2>Спасибо, собеседование назначено</h2>
          <p>
            Дата: <span>{date}</span>
          </p>
--- a/src/components/UI/ModalAspt/modalAspt.scss
+++ b/src/components/UI/ModalAspt/modalAspt.scss
@ -56,10 +56,17 @@
        }

        &_back {
-          display: flex;
-          align-items: center;
          margin: 40px 0 0 0;

+          a {
+            display: flex;
+            align-items: center;
+            font-size: 12px;
+            line-height: 16px;
+            color: #5b6871;
+            text-decoration: none;
+          }
+
          div {
            background: #8dc63f;
            opacity: 0.3;