From 2bc1fb3570832654863cee625cc08c1b105a76b7 Mon Sep 17 00:00:00 2001 From: kurpfish Date: Tue, 28 Sep 2021 12:46:16 +0300 Subject: [PATCH] single report page and mobile avatar fix --- src/App.js | 52 +++++---- src/components/Description/Description.js | 2 +- .../Description/Description.module.css | 7 +- src/components/TaskItem/TaskItem.js | 16 +++ src/components/TaskItem/taskItem.scss | 72 ++++++++++++ src/images/nextDateArrow.svg | 1 + src/images/prevDateArrow.svg | 1 + src/index.css | 8 ++ src/pages/SingleReportPage.js | 107 ++++++++++++++++++ src/pages/singleReportPage.scss | 97 ++++++++++++++++ 10 files changed, 339 insertions(+), 24 deletions(-) create mode 100644 src/components/TaskItem/TaskItem.js create mode 100644 src/components/TaskItem/taskItem.scss create mode 100644 src/images/nextDateArrow.svg create mode 100644 src/images/prevDateArrow.svg create mode 100644 src/pages/SingleReportPage.js create mode 100644 src/pages/singleReportPage.scss diff --git a/src/App.js b/src/App.js index cad6d725..2716efae 100644 --- a/src/App.js +++ b/src/App.js @@ -1,26 +1,28 @@ import React, { Suspense, lazy } from 'react' import { BrowserRouter as Router, Route, Switch } from 'react-router-dom' import { useSelector } from 'react-redux' -import { selectAuth } from './redux/outstaffingSlice'; +import { selectAuth } from './redux/outstaffingSlice' import 'bootstrap/dist/css/bootstrap.min.css' import './fonts/stylesheet.css' -import { ProtectedRoute } from './components/ProtectedRoute/ProtectedRoute'; +import { ProtectedRoute } from './components/ProtectedRoute/ProtectedRoute' -import { YMInitializer } from 'react-yandex-metrika'; +import { YMInitializer } from 'react-yandex-metrika' -import AuthPageForDevelopers from './pages/AuthPageForDevelopers'; -import AuthPageForPartners from './pages/AuthPageForPartners'; -import HomePage from './pages/HomePage'; -import CandidatePage from './pages/CandidatePage'; -import CalendarPage from'./pages/CalendarPage'; -import ReportPage from './pages/ReportFormPage.js'; -import FormPage from './pages/FormPage.js'; +import AuthPageForDevelopers from './pages/AuthPageForDevelopers' +import AuthPageForPartners from './pages/AuthPageForPartners' +import HomePage from './pages/HomePage' +import CandidatePage from './pages/CandidatePage' +import CalendarPage from './pages/CalendarPage' +import ReportPage from './pages/ReportFormPage.js' +import FormPage from './pages/FormPage.js' +import SingleReportPage from './pages/SingleReportPage' const App = (props) => { const isAuth = useSelector(selectAuth) - return (<> -

IT Аутстаффинг в России

- + return ( + <> +

IT Аутстаффинг в России

+ @@ -29,15 +31,24 @@ const App = (props) => { - + - - -
Page not found
} /> + + + +
Page not found
} /> - - - {/* + + {/* { ) } - export default App diff --git a/src/components/Description/Description.js b/src/components/Description/Description.js index 08c31995..10a6cf2d 100644 --- a/src/components/Description/Description.js +++ b/src/components/Description/Description.js @@ -35,7 +35,7 @@ const Description = ({ onLoadMore, isLoadingMore }) => { { candidatesListArr && candidatesListArr.length > 0 ? candidatesListArr.map((el) => (
-
+
diff --git a/src/components/Description/Description.module.css b/src/components/Description/Description.module.css index fc5ac83f..a280d355 100644 --- a/src/components/Description/Description.module.css +++ b/src/components/Description/Description.module.css @@ -30,8 +30,11 @@ @media (max-width: 575.98px) { .description__img { position: absolute; - top: 80px; - left: 0; + top: 100px; + left: calc(50% - 60px); + } + .description__wrapper { + padding: 45px 40px 0 40px; } } diff --git a/src/components/TaskItem/TaskItem.js b/src/components/TaskItem/TaskItem.js new file mode 100644 index 00000000..9a9c2467 --- /dev/null +++ b/src/components/TaskItem/TaskItem.js @@ -0,0 +1,16 @@ +import React from 'react' + +import './taskItem.scss' + +export const TaskItem = ({ index, text, hours }) => { + return ( +
+
{index}.
+
{text}
+
+
{hours}
+
Количество часов
+
+
+ ) +} diff --git a/src/components/TaskItem/taskItem.scss b/src/components/TaskItem/taskItem.scss new file mode 100644 index 00000000..0a6f10f5 --- /dev/null +++ b/src/components/TaskItem/taskItem.scss @@ -0,0 +1,72 @@ +.task-item { + display: flex; + justify-content: flex-start; + align-items: center; + + &__index { + margin-top: 0.2rem; + color: #282828; + font-family: 'GT Eesti Pro Display'; + font-size: 20px; + font-weight: 700; + line-height: 48.74px; + text-align: left; + letter-spacing: 0.34px; + } + + &__text { + min-width: 525px; + max-width: 525px; + margin-left: 1.6rem; + color: #000000; + font-family: 'GT Eesti Pro Display'; + font-size: 15px; + font-weight: 400; + letter-spacing: normal; + line-height: normal; + text-align: left; + } + + &__hours { + margin-left: 3.3rem; + display: flex; + &-value { + width: 34px; + height: 34px; + display: flex; + justify-content: center; + align-items: center; + box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21); + border-radius: 50%; + background-color: #ffffff; + background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%), + linear-gradient( + 36deg, + rgba(255, 255, 255, 0) 0%, + rgba(255, 255, 255, 0.16) 47%, + rgba(255, 255, 255, 0.17) 50%, + rgba(255, 255, 255, 0) 100% + ); + + color: #ffffff; + font-family: 'Muller Extra Bold'; + font-size: 16px; + font-weight: 400; + text-align: left; + letter-spacing: 0.8px; + } + + &-text { + margin-left: 1rem; + width: 69px; + height: 25px; + color: #000000; + font-family: 'GT Eesti Pro Display - Thin'; + font-size: 13px; + font-weight: 400; + letter-spacing: normal; + line-height: normal; + text-align: left; + } + } +} diff --git a/src/images/nextDateArrow.svg b/src/images/nextDateArrow.svg new file mode 100644 index 00000000..10c1120a --- /dev/null +++ b/src/images/nextDateArrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/prevDateArrow.svg b/src/images/prevDateArrow.svg new file mode 100644 index 00000000..ac2e970d --- /dev/null +++ b/src/images/prevDateArrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/index.css b/src/index.css index 38d2390e..0a8ccf69 100644 --- a/src/index.css +++ b/src/index.css @@ -24,4 +24,12 @@ h1 { .container { position: relative !important; +} + +@media (max-width: 568px) { + .col-xs-12 { + width: 100% !important; + max-width: 100%; + flex: initial; + } } \ No newline at end of file diff --git a/src/pages/SingleReportPage.js b/src/pages/SingleReportPage.js new file mode 100644 index 00000000..66d7cb67 --- /dev/null +++ b/src/pages/SingleReportPage.js @@ -0,0 +1,107 @@ +import React from 'react' +import { WithLogout } from '../hoc/withLogout' +import arrowLeft from '../images/right-arrow.png' + +import SVG from 'react-inlinesvg' + +import prevDateArrowIcon from '../images/prevDateArrow.svg' +import nextDateArrowIcon from '../images/nextDateArrow.svg' + +import './singleReportPage.scss' +import { TaskItem } from '../components/TaskItem/TaskItem' + +const tasks = [ + { + index: 1, + text: 'Задача «67 – Навигационная система – Главное меню – Обновить иконки» заблокирована из-за отсутствия новых иконок', + hours: 3 + }, + { + index: 2, + text: 'Задача «83 – Навигационная система – Поиск по почтовому индексу – Добавить экран поиска по почтовому индексу» не может быть завершена, т.к. работа над задачей «82 – Навигационная система – Разработать модуль поиска по почтовому индексу» ещё не начата', + hours: 3 + } +] + +const SingleReportPage = () => { + return ( + +
+
+
+ +
+
+ Вернуться к списку +
+
+ +
+
Отчет за день
+
+
+ +
+
+ +

+
+
+ +
+
+
+ +
+
+
+

Какие задачи были выполнены?

+
+ {tasks.map((task) => { + return ( +
+ +
+ ) + })} +
+ +
+
+
+

Какие сложности возникли?

+
+
+ 91 – Навигационная система – Поиск адреса – Разобраться, почему + находятся несколько пересечений Невского пр. и Казанской ул. +
+
+ +
+
+
+

Что планируется сделать завтра?

+
+
+ 91 – Навигационная система – Поиск адреса – Разобраться, почему + находятся несколько пересечений Невского пр. и Казанской ул. +
+
+ +
+
+
+
+
+
+
+
+ + ) +} + +export default SingleReportPage diff --git a/src/pages/singleReportPage.scss b/src/pages/singleReportPage.scss new file mode 100644 index 00000000..f5cd9f04 --- /dev/null +++ b/src/pages/singleReportPage.scss @@ -0,0 +1,97 @@ +.single-report-page { + padding-top: 4.6rem; + + &__back { + display: flex; + justify-content: flex-start; + align-items: center; + + &-text { + margin-left: 3.1rem; + color: #000000; + font-family: 'GT Eesti Pro Display - Thin'; + font-size: 18px; + font-weight: 400; + letter-spacing: normal; + line-height: 36px; + text-align: left; + } + } + + &__title { + display: flex; + justify-content: flex-start; + align-items: center; + margin-top: 3rem; + + &-text { + color: #282828; + font-family: 'GT Eesti Pro Display'; + font-size: 33px; + font-weight: 700; + line-height: 48.74px; + text-align: left; + letter-spacing: 0.56px; + } + + &-date { + margin-top: 0.2rem; + margin-left: 3rem; + display: flex; + justify-content: flex-start; + align-items: center; + } + + button { + border: none; + outline: none; + width: 31px; + height: 31px; + background-color: #f6f6f6; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + } + } + + &__marker { + width: 6px; + height: 6px; + background-color: #18586e; + border-radius: 50%; + margin-right: 0.8rem; + } + + &__tasks, + &__troubles, + &__scheduled { + margin-top: 3.7rem; + &-title { + display: flex; + justify-content: flex-start; + align-items: center; + h3 { + color: #18586e; + font-family: 'GT Eesti Pro Display'; + font-size: 20px; + font-weight: 500; + letter-spacing: normal; + line-height: normal; + text-align: left; + } + } + + &-item { + margin-top: 2.4rem; + width: 580px; + color: #000000; + font-family: 'GT Eesti Pro Display'; + font-size: 15px; + font-weight: 400; + letter-spacing: normal; + line-height: normal; + text-align: left; + } + } +}