From 288f060575c3cf6bf9caa8b1c584c09414e9c1fc Mon Sep 17 00:00:00 2001 From: kurpfish Date: Wed, 18 Aug 2021 15:56:24 +0300 Subject: [PATCH] interview page and design fixes --- package-lock.json | 19 +++ package.json | 1 + src/components/Calendar/Calendar.js | 2 - src/components/Candidate/Candidate.js | 47 ++++--- src/components/Candidate/SectionSkills.js | 4 +- .../{Candidate.module.css => candidate.css} | 4 + .../Description/Description.module.css | 4 +- src/components/Form/Form.js | 17 +-- src/components/Form/Form.module.css | 27 +--- src/components/LogoutButton/logoutButton.css | 2 +- src/components/Outstaffing/Outstaffing.js | 6 +- src/components/ReportForm/ReportForm.js | 2 - src/components/Select/TagSelect.js | 2 - src/hoc/withLogout.js | 10 +- src/images/telegram-icon.svg | 1 + src/index.css | 3 + src/pages/FormPage.js | 73 +++++++++- src/pages/formPage.scss | 126 ++++++++++++++++++ 18 files changed, 271 insertions(+), 79 deletions(-) rename src/components/Candidate/{Candidate.module.css => candidate.css} (98%) create mode 100644 src/images/telegram-icon.svg create mode 100644 src/pages/formPage.scss diff --git a/package-lock.json b/package-lock.json index 0a6c6bb4..34ecb04b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6395,6 +6395,11 @@ "strip-eof": "^1.0.0" } }, + "exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=" + }, "exit": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz", @@ -12801,6 +12806,20 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz", "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==" }, + "react-from-dom": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/react-from-dom/-/react-from-dom-0.6.1.tgz", + "integrity": "sha512-7aAZx7LhRnmR51W5XtmTBYHGFl2n1AdEk1uoXLuzHa1OoGXrxOW/iwLcudvgp6BGX/l4Yh1rtMrIzvhlvbVddg==" + }, + "react-inlinesvg": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/react-inlinesvg/-/react-inlinesvg-2.3.0.tgz", + "integrity": "sha512-fEGOdDf4k4bcveArbEpj01pJcH8pOCKLxmSj2POFdGvEk5YK0NZVnH6BXpW/PzACHPRsuh1YKAhNZyFnD28oxg==", + "requires": { + "exenv": "^1.2.2", + "react-from-dom": "^0.6.0" + } + }, "react-input-autosize": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-3.0.0.tgz", diff --git a/package.json b/package.json index 80cb9f1d..f9b0e868 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "react": "^17.0.2", "react-bootstrap": "^1.6.0", "react-dom": "^17.0.2", + "react-inlinesvg": "^2.3.0", "react-loader-spinner": "^4.0.0", "react-outside-click-handler": "^1.3.0", "react-phone-input-2": "^2.14.0", diff --git a/src/components/Calendar/Calendar.js b/src/components/Calendar/Calendar.js index e091b5bd..f36f0a32 100644 --- a/src/components/Calendar/Calendar.js +++ b/src/components/Calendar/Calendar.js @@ -23,7 +23,6 @@ const Calendar = () => { return (
-

Добрый день, Александр ! @@ -53,7 +52,6 @@ const Calendar = () => {

-
); }; diff --git a/src/components/Candidate/Candidate.js b/src/components/Candidate/Candidate.js index f98b823b..93139604 100644 --- 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 ( -
-
+
-
+

Аутстаффинг it-персонала

@@ -82,41 +86,41 @@ const Candidate = () => {
-
-
history.push('/')}> -
+
+
history.push('/')}> +
-
+
Вернуться к списку
-
+

{header}

-
+
-
+
-

# Описание опыта

+

# Описание опыта

{text ? ( -
+
) : ( -

+

{currentCandidateObj.vc_text ? currentCandidateObj.vc_text : 'Описание отсутствует...' }

)} - @@ -125,8 +129,7 @@ const Candidate = () => {
-
-
+ ); }; diff --git a/src/components/Candidate/SectionSkills.js b/src/components/Candidate/SectionSkills.js index 0e05d935..103818f6 100644 --- 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 ( -
+

Навыки:

    {skillsArr && skillsArr.map((skills) =>
  • {skills.skill.name}
    • )}
diff --git a/src/components/Candidate/Candidate.module.css b/src/components/Candidate/candidate.css similarity index 98% rename from src/components/Candidate/Candidate.module.css rename to src/components/Candidate/candidate.css index bbb577d9..f0a02aa8 100644 --- a/src/components/Candidate/Candidate.module.css +++ b/src/components/Candidate/candidate.css @@ -277,3 +277,7 @@ text-align: left; line-height: 28px; } + +.candidate + .logout-button{ + top: 80px !important; +} \ No newline at end of file diff --git a/src/components/Description/Description.module.css b/src/components/Description/Description.module.css index d8f1cf54..c14fef86 100644 --- 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; } diff --git a/src/components/Form/Form.js b/src/components/Form/Form.js index d492fa30..d332e6c2 100644 --- 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 ( -
+ <> {status && { />}
-
goBack()}> -
- -
-
- Вернуться к кандидату -
-
{
-
+ ); }; diff --git a/src/components/Form/Form.module.css b/src/components/Form/Form.module.css index 97aa9649..b61f1d15 100644 --- 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 { diff --git a/src/components/LogoutButton/logoutButton.css b/src/components/LogoutButton/logoutButton.css index 4f872af4..15c89138 100644 --- 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; diff --git a/src/components/Outstaffing/Outstaffing.js b/src/components/Outstaffing/Outstaffing.js index 059b4622..777ca784 100644 --- a/src/components/Outstaffing/Outstaffing.js +++ b/src/components/Outstaffing/Outstaffing.js @@ -27,7 +27,6 @@ const Outstaffing = () => { return ( <>
-
@@ -43,7 +42,7 @@ const Outstaffing = () => { tag.name === 'skills_front')} img={front} - header="Фронтенд" + header="Frontend" positionId='2' isSelected={positionId==='2'} onSelect={id=>onSelectPosition(id)} @@ -53,7 +52,7 @@ const Outstaffing = () => { tag.name === 'skills_back')} img={back} - header="Бэкенд" + header="Backend" positionId='1' isSelected={positionId==='1'} onSelect={id=>onSelectPosition(id)} @@ -70,7 +69,6 @@ const Outstaffing = () => { />
-
diff --git a/src/components/ReportForm/ReportForm.js b/src/components/ReportForm/ReportForm.js index fda03ab5..fe7b7a00 100644 --- a/src/components/ReportForm/ReportForm.js +++ b/src/components/ReportForm/ReportForm.js @@ -24,7 +24,6 @@ const ReportForm = () => { return (
-
@@ -87,7 +86,6 @@ const ReportForm = () => {
-
); }; diff --git a/src/components/Select/TagSelect.js b/src/components/Select/TagSelect.js index 33567040..0da18aad 100644 --- a/src/components/Select/TagSelect.js +++ b/src/components/Select/TagSelect.js @@ -30,7 +30,6 @@ const TagSelect = () => { return ( <>
-

Найти специалиста по навыкам

@@ -52,7 +51,6 @@ const TagSelect = () => {
-
); diff --git a/src/hoc/withLogout.js b/src/hoc/withLogout.js index c4b4ffda..76e702d8 100644 --- a/src/hoc/withLogout.js +++ b/src/hoc/withLogout.js @@ -2,8 +2,10 @@ import React from 'react'; import { LogoutButton } from '../components/LogoutButton/LogoutButton'; export const WithLogout = (props) => { - return <> - - {props.children} - + return ( +
+ {props.children} + +
+ ) } \ No newline at end of file diff --git a/src/images/telegram-icon.svg b/src/images/telegram-icon.svg new file mode 100644 index 00000000..78e1cb1f --- /dev/null +++ b/src/images/telegram-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/index.css b/src/index.css index 802f4aa6..38d2390e 100644 --- a/src/index.css +++ b/src/index.css @@ -22,3 +22,6 @@ h1 { display: none; } +.container { + position: relative !important; +} \ No newline at end of file diff --git a/src/pages/FormPage.js b/src/pages/FormPage.js index 2f325117..471b3a06 100644 --- a/src/pages/FormPage.js +++ b/src/pages/FormPage.js @@ -1,7 +1,78 @@ import React from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { useHistory, useParams, } from 'react-router-dom'; +import { currentCandidate, selectCurrentCandidate } from '../redux/outstaffingSlice'; +import SVG from 'react-inlinesvg'; import { WithLogout } from '../hoc/withLogout'; import Form from '../components/Form/Form'; +import { LEVELS, SKILLS } from '../components/constants/constants'; +import { fetchItemsForId } from '../server/server'; -const FormPage = () =>
; +import arrow from '../images/right-arrow.png'; +import rectangle from '../images/rectangle_secondPage.png'; +import telegramIcon from '../images/telegram-icon.svg'; + +import './formPage.scss'; + +const goBack = (history) => { + history.goBack(); + }; + +const FormPage = () => { + const params = useParams(); + const history = useHistory(); + const dispatch = useDispatch(); + const candidate = useSelector(selectCurrentCandidate) + + if(!candidate.id) { + fetchItemsForId(`${process.env.REACT_APP_API_URL}/api/profile/`, Number(params.id)).then((el) => + dispatch(currentCandidate(el)) + ); + } + + return ( + +
+
+
goBack(history)}> +
+ +
+
+ Вернуться к кандидату +
+
+
+
+
+ +
+
+
+ {candidate.specification} {SKILLS[candidate.position_id]}, {LEVELS[candidate.level]} +
+
+ + Выбранный кандидат +
+
+
+
+
+
+
+
или
+
+
+
Заявка на собеседование через телеграм
+
+ +
+
+
+
+ + ) +} export default FormPage; diff --git a/src/pages/formPage.scss b/src/pages/formPage.scss new file mode 100644 index 00000000..63cd27f4 --- /dev/null +++ b/src/pages/formPage.scss @@ -0,0 +1,126 @@ +.form-page { + &__arrow { + display: flex; + justify-content: flex-start; + align-items: center; + margin-top: 80px; + margin-left: -32px; + + &-img { + cursor: pointer; + } + } + + &__candidate { + margin-top: 60px; + margin-left: 48px; + display: flex; + } + + &__back-to-candidate { + margin-left: 40px; + margin-right: 120px; + font-family: 'GT Eesti Pro Display'; + font-size: 1.8em; + font-weight: 100; + line-height: 36px; + } + + &__avatar { + img { + width: 61px; + height: 61px; + } + margin-right: 16px; + } + + &__position { + color: #000000; + font-family: "GT Eesti Pro Display"; + font-size: 22px; + font-weight: 700; + line-height: 36px; + } + + &__selected { + span { + color: #000000; + font-family: "GT Eesti Pro Display"; + font-size: 10px; + font-weight: 300; + line-height: 22.38px; + } + + img { + width: 152px; + margin-right: 18px; + } + } + + &__interview { + display: flex; + justify-content: center; + align-items: center; + } + + &__form { + width: 45%; + } + + &__separator { + width: 10%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + &__line { + width: 3px; + height: 135px; + background-color: #e4f1f6; + margin-bottom: 26px; + } + + &__option { + color: #000000; + font-family: "GT Eesti Pro Display"; + font-size: 18px; + font-weight: 400; + font-style: normal; + letter-spacing: normal; + line-height: 36px; + text-align: center; + font-style: normal; + letter-spacing: normal; + line-height: normal; + } + + &__telegram { + width: 45%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + &-text { + width: 225px; + color: #000000; + font-family: "GT Eesti Pro Display"; + font-size: 18px; + font-weight: 400; + font-style: normal; + letter-spacing: normal; + line-height: 33px; + text-align: center; + font-style: normal; + letter-spacing: normal; + margin-bottom: 29px; + } + } +} + +.form-page + .logout-button{ + top: 0px !important; + right: 2.5rem; +} \ No newline at end of file