single report page and mobile avatar fix

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 AuthPageForDevelopers from './pages/AuthPageForDevelopers'
-import AuthPageForPartners from './pages/AuthPageForPartners';
+import AuthPageForPartners from './pages/AuthPageForPartners'
-import HomePage from './pages/HomePage';
+import HomePage from './pages/HomePage'
-import CandidatePage from './pages/CandidatePage';
+import CandidatePage from './pages/CandidatePage'
-import CalendarPage from'./pages/CalendarPage';
+import CalendarPage from './pages/CalendarPage'
-import ReportPage from './pages/ReportFormPage.js';
+import ReportPage from './pages/ReportFormPage.js'
-import FormPage from './pages/FormPage.js';
+import FormPage from './pages/FormPage.js'
+import SingleReportPage from './pages/SingleReportPage'
 
 const App = (props) => {
   const isAuth = useSelector(selectAuth)
-  return (<>
+  return (
-    <h1>IT Аутстаффинг в России</h1>
+    <>
-    <Router>
+      <h1>IT Аутстаффинг в России</h1>
+      <Router>
         <Switch>
           <Route path='/authdev' exact>
             <AuthPageForDevelopers />
@@ -29,15 +31,24 @@ const App = (props) => {
             <AuthPageForPartners />
           </Route>
           <ProtectedRoute exact path='/' component={HomePage} />
-          <ProtectedRoute exact path='/candidate/:id' component={CandidatePage} />
+          <ProtectedRoute
+            exact
+            path='/candidate/:id'
+            component={CandidatePage}
+          />
           <ProtectedRoute path='/calendar' component={CalendarPage} />
-          <ProtectedRoute exact path='/candidate/:id/form' component={FormPage} />
+          <ProtectedRoute
-          <ProtectedRoute path='/report' component={ReportPage} />
+            exact
-          <ProtectedRoute component={()=><div>Page not found</div>} />
+            path='/candidate/:id/form'
+            component={FormPage}
+          />
+          <ProtectedRoute exact path='/report' component={ReportPage} />
+          <ProtectedRoute path='/report/:id' component={SingleReportPage} />
+          <ProtectedRoute component={() => <div>Page not found</div>} />
         </Switch>
-    </Router>
+      </Router>
-    
+
-    {/* <YMInitializer 
+      {/* <YMInitializer 
       accounts={[84188125]} 
       options={{
         clickmap:true,
@@ -51,5 +62,4 @@ const App = (props) => {
   )
 }
 
-
 export default App

src/components/Description/Description.js

@@ -35,7 +35,7 @@ const Description = ({ onLoadMore, isLoadingMore }) => {
           {
             candidatesListArr && candidatesListArr.length > 0 ? candidatesListArr.map((el) => (
               <div className="row" key={el.id}>
-                <div className="col-2">
+                <div className="col-2 col-xs-12">
                   <img className={style.description__img} src={el.photo} alt="" />
                 </div>
                 <div className="col-12 col-xl-6">

src/components/Description/Description.module.css

@@ -30,8 +30,11 @@
 @media (max-width: 575.98px) {
   .description__img {
     position: absolute;
-    top: 80px;
+    top: 100px;
-    left: 0;
+    left: calc(50% - 60px);
+  }
+  .description__wrapper {
+    padding: 45px 40px 0 40px;
   }
 }
 

src/components/TaskItem/TaskItem.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import './taskItem.scss'
+
+export const TaskItem = ({ index, text, hours }) => {
+  return (
+    <div className='task-item'>
+      <div className='task-item__index'>{index}.</div>
+      <div className='task-item__text'>{text}</div>
+      <div className='task-item__hours'>
+        <div className='task-item__hours-value'>{hours}</div>
+        <div className='task-item__hours-text'>Количество часов</div>
+      </div>
+    </div>
+  )
+}

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;
+    }
+  }
+}

src/images/nextDateArrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="5" height="9" viewBox="0 0 5 9"><g><g><image width="5" height="9" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAJCAYAAAD6reaeAAAAZ0lEQVQImV2OvRFAUBCE10ju56WvMUZIATSgDxogph96EGjAnOSZw4a7O98uoLRDucdHwiOEDEFaN80yKM8QMijVHlRVDuEVQhcCFx7EGKB8QPl8N5fULBNTpsRsnvUhrXfOUtr+P2/kAxfNQ+wYfgAAAABJRU5ErkJggg=="/></g></g></svg>

src/images/prevDateArrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="5" height="9" viewBox="0 0 5 9"><g><g><image width="5" height="9" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAJCAYAAAD6reaeAAAAaklEQVQImVWOvRFAQBSE10jez6XXGCOkABrQBw0Q0w89CDRgnuDO3Nlw55tvF8ijPELpTIWTHkIG4TkS1ELIoLzCrAAcVxB6ILyjacrPc0P5gvcuc3EdyS2RwdkFpyzBmdaHuD79bsafxwt/CxfNS2+70AAAAABJRU5ErkJggg=="/></g></g></svg>

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;
+  }
 }

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 (
+    <WithLogout>
+      <div className='single-report-page'>
+        <div className='single-report-page__back'>
+          <div className='single-report-page__back-arrow'>
+            <img src={arrowLeft} />
+          </div>
+          <div className='single-report-page__back-text'>
+            Вернуться к списку
+          </div>
+        </div>
+
+        <div className='single-report-page__title'>
+          <div className='single-report-page__title-text'>Отчет за день</div>
+          <div className='single-report-page__title-date'>
+            <div className='single-report-page__title-date--prev'>
+              <button>
+                <SVG src={prevDateArrowIcon} />
+              </button>
+            </div>
+            <div className='single-report-page__title-date--actual'>
+              <img src='' />
+              <p></p>
+            </div>
+            <div className='single-report-page__title-date--next single-report-page__title-date--enabled'>
+              <button>
+                <SVG src={nextDateArrowIcon} />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className='single-report-page__tasks'>
+          <div className='single-report-page__tasks-title'>
+            <div className='single-report-page__marker'></div>
+            <h3>Какие задачи были выполнены?</h3>
+          </div>
+          {tasks.map((task) => {
+            return (
+              <div className='single-report-page__tasks-item'>
+                <TaskItem {...task} />
+              </div>
+            )
+          })}
+        </div>
+
+        <div className='single-report-page__troubles'>
+          <div className='single-report-page__troubles-title'>
+            <div className='single-report-page__marker'></div>
+            <h3>Какие сложности возникли?</h3>
+          </div>
+          <div className='single-report-page__troubles-item'>
+            91 – Навигационная система – Поиск адреса – Разобраться, почему
+            находятся несколько пересечений Невского пр. и Казанской ул.
+          </div>
+        </div>
+
+        <div className='single-report-page__scheduled'>
+          <div className='single-report-page__scheduled-title'>
+            <div className='single-report-page__marker'></div>
+            <h3>Что планируется сделать завтра?</h3>
+          </div>
+          <div className='single-report-page__scheduled-item'>
+            91 – Навигационная система – Поиск адреса – Разобраться, почему
+            находятся несколько пересечений Невского пр. и Казанской ул.
+          </div>
+        </div>
+
+        <div className='single-report-page__footer'>
+          <div className='single-report-page__footer-rectangle'></div>
+          <div className='single-report-page__hours'>
+            <div className='single-report-page__hours-value'></div>
+            <div className='single-report-page__hours-text'></div>
+          </div>
+        </div>
+      </div>
+    </WithLogout>
+  )
+}
+
+export default SingleReportPage

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;
+    }
+  }
+}