interview page and design fixes

2021-08-18 15:56:24 +03:00
parent deecc0905a
commit 288f060575
18 changed files with 271 additions and 79 deletions
--- a/src/components/Calendar/Calendar.js
+++ b/src/components/Calendar/Calendar.js
@ -23,7 +23,6 @@ const Calendar = () => {

  return (
    <section className={style.calendar}>
-      <div className="container">
        <div className="row">
          <h2 className={style.calendar__title}>
            Добрый день, <span>Александр !</span>
@ -53,7 +52,6 @@ const Calendar = () => {
            </p>
          </div>
        </div>
-      </div>
    </section>
  );
 };
--- a/src/components/Candidate/Candidate.js
+++ b/src/components/Candidate/Candidate.js
@ -2,7 +2,6 @@ import React, { useEffect } from 'react';
 import { useHistory, useParams, Link } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
 import { currentCandidate, selectCurrentCandidate } from '../../redux/outstaffingSlice';
-import style from './Candidate.module.css';
 import arrow from '../../images/right-arrow.png';
 import rectangle from '../../images/rectangle_secondPage.png';
 import Sidebar from '../Sidebar/Sidebar';
@ -12,11 +11,17 @@ import back from '../../images/back_end.png';
 import design from '../../images/design.png';
 import { fetchItemsForId } from '../../server/server';

+import './candidate.css';
+
 const Candidate = () => {
  const history = useHistory();
  const { id: candidateId } = useParams();
  const dispatch = useDispatch();

+  useEffect(() => {
+    window.scrollTo(0, 0)
+  }, [])
+
  useEffect(() => {
    fetchItemsForId(`${process.env.REACT_APP_API_URL}/api/profile/`, Number(candidateId)).then((el) =>
      dispatch(currentCandidate(el))
@ -36,22 +41,22 @@ const Candidate = () => {

    switch (Number(position_id)) {
      case 1: {
-        styles.classes = style.back;
+        styles.classes = 'back';
        styles.header = 'Backend';
        styles.img = back;

        break;
      }
      case 2: {
-        styles.classes = style.des;
+        styles.classes = 'des';
        styles.header = 'Frontend';
        styles.img = front;
        break;
      }
      case 3: {
-        style.classes = style.front;
-        style.header = 'Design';
-        style.img = design;
+        styles.classes = 'front';
+        styles.header = 'Design';
+        styles.img = design;
        break;
      }
      default:
@ -68,11 +73,10 @@ const Candidate = () => {
  const { header, img, classes } = setStyles();

  return (
-    <section className={style.candidate}>
-      <div className="container">
+    <div className='candidate'>
        <div className="row">
          <div className="col-12">
-            <div className={style.candidate__title}>
+            <div className='candidate__title'>
              <h2>
                <span>Аутстаффинг</span> it-персонала
              </h2>
@ -82,41 +86,41 @@ const Candidate = () => {

        <div className="row">
          <div className="col-12">
-            <div className={style.candidate__header}>
-              <div className={style.arrow} onClick={() => history.push('/')}>
-                <div className={style.arrow__img}>
+            <div className='candidate__header'>
+              <div className='arrow' onClick={() => history.push('/')}>
+                <div className='arrow__img'>
                  <img src={arrow} alt="" />
                </div>
-                <div className={style.arrow__sp}>
+                <div className='arrow__sp'>
                  <span>Вернуться к списку</span>
                </div>
              </div>

-              <div className={style.icon}>
+              <div className='icon'>
                <h3>{header}</h3>
                <img className={classes} src={img} alt="" />
              </div>
            </div>
          </div>
        </div>
-        <div className={style.candidate__main}>
+        <div className='candidate__main'>
          <div className="row">
            <div className="col-12 col-xl-4">
              <Sidebar candidate={currentCandidateObj}  />
            </div>
            <div className="col-12 col-xl-8">
-              <div className={style.candidate__main__description}>
+              <div className='candidate__main__description'>
                <img src={rectangle} alt="" />
-                <p className={style.hashtag}># Описание опыта</p>
+                <p className='hashtag'># Описание опыта</p>
                {text ? (
-                  <div className={style.candidate__text} dangerouslySetInnerHTML={createMarkup(text)}></div>
+                  <div className='candidate__text' dangerouslySetInnerHTML={createMarkup(text)}></div>
                ) : (
-                  <p className={style.candidate__textSecondary}>
+                  <p className='candidate__textSecondary'>
                    {currentCandidateObj.vc_text ? currentCandidateObj.vc_text : 'Описание отсутствует...' }
                  </p>
                )}
                <Link to={`/candidate/${currentCandidateObj.id}/form`}>
-                  <button type="submit" className={style.candidate__btn}>
+                  <button type="submit" className='candidate__btn'>
                    Выбрать к собеседованию
                  </button>
                </Link>
@ -125,8 +129,7 @@ const Candidate = () => {
            </div>
          </div>
        </div>
-      </div>
-    </section>
+    </div>
  );
 };

--- a/src/components/Candidate/SectionSkills.js
+++ b/src/components/Candidate/SectionSkills.js
@ -1,9 +1,9 @@
 import React from 'react';
-import style from './Candidate.module.css';
+import './candidate.css';

 const SectionSkills = ({ skillsArr }) => {
  return (
-    <div className={style.SectionSkills}>
+    <div className='SectionSkills'>
      <h3>Навыки:</h3>
      <ul>{skillsArr && skillsArr.map((skills) => <li key={skills.id}>{skills.skill.name}</li>)}</ul>
    </div>
--- a/src/components/Candidate/Candidate.module.css
+++ b/src/components/Candidate/Candidate.module.css
@ -277,3 +277,7 @@
  text-align: left;
  line-height: 28px;
 }
+
+.candidate + .logout-button{
+  top: 80px !important;
+}
--- a/src/components/Description/Description.module.css
+++ b/src/components/Description/Description.module.css
@ -154,7 +154,7 @@
 }

 .description__list {
-  padding: 5px;
+  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
@ -168,7 +168,7 @@
  letter-spacing: normal;
  text-align: left;
  line-height: 36px;
-  margin-left: 10px;
+  margin-right: 10px;
  word-wrap: break-word;
 }

--- a/src/components/Form/Form.js
+++ b/src/components/Form/Form.js
@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import style from './Form.module.css';
 import { fetchForm } from '../../server/server';
-import arrow from '../../images/right-arrow.png';
 import { useHistory, useParams, Redirect } from 'react-router-dom';
 import PhoneInput from 'react-phone-input-2'
 import 'react-phone-input-2/lib/style.css'
@ -49,14 +48,12 @@ const Form = () => {
    )
  };

-  const goBack = () => {
-    history.goBack();
-  };
+

  console.log('s',status)

  return (
-    <div className="container">
+    <>
      {status && <SweetAlert
        show={!!status}
        text={status.errors ? status.errors[Object.keys(status.errors)[0]] : 'Форма отправлена'}
@ -64,14 +61,6 @@ const Form = () => {
      />}
      <div className="row">
        <div className="col-sm-12">
-          <div className={style.form__arrow} onClick={() => goBack()}>
-            <div className={style.form__arrow__img}>
-              <img src={arrow} alt="" />
-            </div>
-            <div className={style.form__arrow__sp}>
-              <span>Вернуться к кандидату</span>
-            </div>
-          </div>
          <form className={style.form} id="test">
            <label htmlFor="email">Емейл:</label>
            <input
@ -116,7 +105,7 @@ const Form = () => {
          </form>
        </div>
      </div>
-    </div>
+    </>
  );
 };

--- a/src/components/Form/Form.module.css
+++ b/src/components/Form/Form.module.css
@ -19,7 +19,7 @@

 .form > input {
  max-width: 366px;
-  height: 75px;
+  height: 62px;
  box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
  border-radius: 37px;
  border: 1px solid #c4c4c4;
@ -39,7 +39,7 @@

 .form > textarea {
  max-width: 366px;
-  height: 75px;
+  height: 62px;
  margin-bottom: 40px;
  box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
  border-radius: 37px;
@ -64,7 +64,7 @@ textarea {
 }

 .form__btn {
-  width: 288px;
+  width: 332px;
  height: 75px;
  box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
  border-radius: 38px;
@ -86,12 +86,7 @@ textarea {
  text-align: center;
 }

-.form__arrow {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  margin-top: 80px;
-}
+

@media (max-width: 575.98px) {
  .form__arrow {
@ -99,21 +94,7 @@ textarea {
  }
 }

-.form__arrow__img > img {
-  cursor: pointer;
-}

-.form__arrow__sp > span {
-  margin-left: 40px;
-  margin-right: 120px;
-  font-family: 'GT Eesti Pro Display';
-  font-size: 1.8em;
-  font-weight: 100;
-  font-style: normal;
-  letter-spacing: normal;
-  line-height: 36px;
-  text-align: left;
-}

@media (max-width: 575.98px) {
  .form__arrow__sp > span {
--- a/src/components/LogoutButton/logoutButton.css
+++ b/src/components/LogoutButton/logoutButton.css
@ -1,5 +1,5 @@
 .logout-button {
-    position: fixed;
+    position: absolute;
    top: 70px;
    right: 2.5rem;
    z-index: 100;
--- a/src/components/Outstaffing/Outstaffing.js
+++ b/src/components/Outstaffing/Outstaffing.js
@ -27,7 +27,6 @@ const Outstaffing = () => {
  return (
    <>
      <section className={style.outstaffing}>
-        <div className="container">
          <div className="row">
            <div className="col-12">
              <div className={style.outstaffing__title}>
@ -43,7 +42,7 @@ const Outstaffing = () => {
              <OutstaffingBlock
                dataTags={tagsArr && tagsArr.flat().filter((tag) => tag.name === 'skills_front')}
                img={front}
-                header="Фронтенд"
+                header="Frontend"
                positionId='2'
                isSelected={positionId==='2'}
                onSelect={id=>onSelectPosition(id)}
@ -53,7 +52,7 @@ const Outstaffing = () => {
              <OutstaffingBlock
                dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_back')}
                img={back}
-                header="Бэкенд"
+                header="Backend"
                positionId='1'
                isSelected={positionId==='1'}
                onSelect={id=>onSelectPosition(id)}
@ -70,7 +69,6 @@ const Outstaffing = () => {
              />
            </div>
          </div>
-        </div>
      </section>
      <TagSelect />
    </>
--- a/src/components/ReportForm/ReportForm.js
+++ b/src/components/ReportForm/ReportForm.js
@ -24,7 +24,6 @@ const ReportForm = () => {

  return (
    <section className="reportForm">
-      <div className="container">
        <div className="row">
          <div className="col-xl-12">
            <div className={style.reportForm__block}>
@ -87,7 +86,6 @@ const ReportForm = () => {
            </div>
          </div>
        </div>
-      </div>
    </section>
  );
 };
--- a/src/components/Select/TagSelect.js
+++ b/src/components/Select/TagSelect.js
@ -30,7 +30,6 @@ const TagSelect = () => {
  return (
    <>
      <section className={style.search}>
-        <div className="container">
          <div className="row">
            <div className="col-12">
              <h2 className={style.search__title}>Найти специалиста по навыкам</h2>
@ -52,7 +51,6 @@ const TagSelect = () => {
              </div>
            </div>
          </div>
-        </div>
      </section>
    </>
  );