fixes

2023-02-17 15:19:49 +03:00
parent 4da9497531
commit 6b5eeb2942
20 changed files with 492 additions and 182 deletions
--- a/src/components/Calendar/calendar.scss
+++ b/src/components/Calendar/calendar.scss
@ -95,6 +95,18 @@
      box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
      transform: scale(1.02);
    }
+
+    @media (max-width: 800px) {
+      width: auto;
+      height: auto;
+      padding: 15px;
+      white-space: nowrap;
+    }
+
+    @media (max-width: 590px) {
+      padding: 8px;
+      font-size: 12px;
+    }
  }

  &__hours {
@ -104,7 +116,8 @@
    letter-spacing: normal;
    line-height: 30px;
    text-align: left;
-    margin-left: 68px;
+    margin: 50px 0 0;
+    text-transform: capitalize;

    span {
      font-weight: 100;
--- a/src/components/Calendar/calendarComponent.scss
+++ b/src/components/Calendar/calendarComponent.scss
@ -6,7 +6,7 @@
  padding-left: 68px;
  padding-right: 54px;
  padding-top: 48px;
-  padding-bottom: 94px;
+  padding-bottom: 40px;
  font-family: 'LabGrotesque', sans-serif;

  &__header {
@ -20,6 +20,10 @@
      letter-spacing: normal;
      line-height: 30px;
      text-align: left;
+
+      @media (max-width: 500px) {
+        font-size: 1.7em;
+      }
    }

    &-box {
@ -42,6 +46,10 @@
        text-align: left;
        margin-left: 10px;
        cursor: pointer;
+
+        @media (max-width: 500px) {
+          font-size: 1.2em;
+        }
      }
    }
  }
@ -79,8 +87,9 @@

    button {
      margin: 0 auto;
-      width: 125px;
-      height: 42px;
+      //width: 125px;
+      //height: 42px;
+      padding: 0 5px;
      box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
      border-radius: 5px;
      border: 1px solid #c4c4c4;
@ -94,35 +103,67 @@
      text-align: center;

      a {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 115px;
+        height: 42px;
        text-decoration: none;
        color: #000000;
+
+        img {
+          width: 16px;
+          height: 16px;
+          margin: 0 10px 0 0;
+        }
+
+        @media (max-width: 1200px) {
+          width: 90px;
+          height: 40px;
+        }
+
+        @media (max-width: 968px) {
+          width: 62px;
+          height: 40px;
+          font-size: 10px;
+
+          img {
+            margin-right: 2px;
+          }
+        }
+
+        @media (max-width: 610px) {
+          img {
+            display: none;
+          }
+          width: auto;
+          height: auto;
+        }
+      }
+
+      @media (max-width: 610px) {
+        width: 55px;
+        height: 45px;
+      }
+
+      @media (max-width: 480px) {
+        width: 45px;
+        height: 35px;
      }
    }
  }
 }
-
-@media (max-width: 1200px) {
-  .calendar-component {
-    &__form {
-      button {
-        width: 100px;
-        height: 40px;
-      }
-    }
-  }
-}
-
@media (max-width: 968px) {
  .calendar-component {
    margin-bottom: 40px;
-    padding: 28px 0 48px 0;
+    padding: 28px 10px 48px 10px;

    &__header {
-      h3 {
-        position: absolute;
-        top: -10%;
-        left: 25%;
-      }
+      //h3 {
+      //  position: absolute;
+      //  top: -10%;
+      //  left: 25%;
+      //}

      &-box {
        margin-left: 20px;
@ -132,114 +173,103 @@
    &__rectangle {
      margin: 24px 0;
    }
-
-    &__form {
-      button {
-        width: 72px;
-        height: 40px;
-
-        img {
-          display: none;
-        }
-      }
-    }
  }
 }

-@media (max-width: 768px) {
-  .calendar-component__form > button {
-    width: 70px;
-    height: 40px;
+//@media (max-width: 768px) {
+//  .calendar-component__form > button {
+//    width: 70px;
+//    height: 40px;
+//
+//    img {
+//      display: none;
+//    }
+//  }
+//}

-    img {
-      display: none;
-    }
-  }
-}
-
-@media (max-width: 540.98px) {
-  .calendar-component__form > button {
-    width: 68px;
-    height: 40px;
-  }
-}
-
-@media (max-width: 520.98px) {
-  .calendar-component__form > button {
-    width: 66px;
-    height: 40px;
-  }
-}
-
-@media (max-width: 500.98px) {
-  .calendar-component__form > button {
-    width: 64px;
-    height: 40px;
-  }
-}
-
-@media (max-width: 480.98px) {
-  .calendar-component__form > button {
-    width: 60px;
-    height: 40px;
-  }
-}
-
-@media (max-width: 460.98px) {
-  .calendar-component__form > button {
-    width: 56px;
-    height: 40px;
-  }
-}
-
-@media (max-width: 440.98px) {
-  .calendar-component__form > button {
-    width: 52px;
-    height: 40px;
-  }
-}
-
-@media (max-width: 428.98px) {
-  .calendar-component__form > button {
-    width: 50px;
-    height: 40px;
-  }
-}
-
-@media (max-width: 414.98px) {
-  .calendar-component__form > button {
-    width: 49px;
-    height: 40px;
-  }
-}
-
-@media (max-width: 395.98px) {
-  .calendar-component__form > button {
-    width: 46px;
-    height: 40px;
-  }
-}
-
-@media (max-width: 350.98px) {
-  .calendar-component__form > button {
-    width: 44px;
-    height: 40px;
-  }
-}
-
-@media (max-width: 349.98px) {
-  .calendar-component__form > button {
-    width: 42px;
-    height: 40px;
-  }
-}
-
-@media (max-width: 346.98px) {
-  .calendar-component__form > button {
-    width: 40px;
-    height: 40px;
-  }
-}
+//@media (max-width: 540.98px) {
+//  .calendar-component__form > button {
+//    width: 68px;
+//    height: 40px;
+//  }
+//}
+//
+//@media (max-width: 520.98px) {
+//  .calendar-component__form > button {
+//    width: 66px;
+//    height: 40px;
+//  }
+//}
+//
+//@media (max-width: 500.98px) {
+//  .calendar-component__form > button {
+//    width: 64px;
+//    height: 40px;
+//  }
+//}
+//
+//@media (max-width: 480.98px) {
+//  .calendar-component__form > button {
+//    width: 60px;
+//    height: 40px;
+//  }
+//}
+//
+//@media (max-width: 460.98px) {
+//  .calendar-component__form > button {
+//    width: 56px;
+//    height: 40px;
+//  }
+//}
+//
+//@media (max-width: 440.98px) {
+//  .calendar-component__form > button {
+//    width: 52px;
+//    height: 40px;
+//  }
+//}
+//
+//@media (max-width: 428.98px) {
+//  .calendar-component__form > button {
+//    width: 50px;
+//    height: 40px;
+//  }
+//}
+//
+//@media (max-width: 414.98px) {
+//  .calendar-component__form > button {
+//    width: 49px;
+//    height: 40px;
+//  }
+//}
+//
+//@media (max-width: 395.98px) {
+//  .calendar-component__form > button {
+//    width: 46px;
+//    height: 40px;
+//  }
+//}
+//
+//@media (max-width: 350.98px) {
+//  .calendar-component__form > button {
+//    width: 44px;
+//    height: 40px;
+//  }
+//}
+//
+//@media (max-width: 349.98px) {
+//  .calendar-component__form > button {
+//    width: 42px;
+//    height: 40px;
+//  }
+//}
+//
+//@media (max-width: 346.98px) {
+//  .calendar-component__form > button {
+//    width: 40px;
+//    height: 40px;
+//  }
+//}

 .calendar__icon {
  margin-right: 10px;
--- a/src/components/Calendar/calendarHelper.js
+++ b/src/components/Calendar/calendarHelper.js
@ -30,6 +30,18 @@ export function getReports(value) {
  return getReports;
 }

+export function getCreatedDate(day) {
+  if (day) {
+    return `${new Date(day).getFullYear()}-${new Date(day).getMonth() + 1}-${new Date(day).getDate()}`
+  } else {
+    const date = new Date();
+    const dd = String(date.getDate()).padStart(2, '0');
+    const mm = String(date.getMonth() + 1).padStart(2, '0');
+    const yyyy = date.getFullYear();
+    return `${yyyy}-${mm}-${dd}`
+  }
+}
+
 export function currentMonth() {
  const currentMonth = moment().format('MMMM');

@ -40,6 +52,10 @@ export function currentMonthAndDay(day) {
  return day.format('D MMMM');
 }

+export function getCorrectDate(day) {
+  return `${new Date(day).getDate()}-${new Date(day).getMonth() + 1}-${new Date(day).getFullYear()}`
+};
+
 export function currentMonthAndDayReportPage() {
  return moment().format('D MMMM');
 }
--- a/src/components/ProfileCalendar/ProfileCalendar.js
+++ b/src/components/ProfileCalendar/ProfileCalendar.js
@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import {useDispatch, useSelector} from 'react-redux'

-import {currentMonth, getReports} from '../Calendar/calendarHelper'
+import {getReports} from '../Calendar/calendarHelper'
 import { Link } from 'react-router-dom'
 import moment from "moment";

@ -24,7 +24,6 @@ export const ProfileCalendar = () => {
    const dispatch = useDispatch();
    const profileInfo = useSelector(getProfileInfo)
    const requestDates = useSelector(getRequestDates)
-    const [month, setMonth] = useState('');
    const [value, setValue] = useState(moment())
    const [reports, setReports] = useState([]);
    const [totalHours, setTotalHours] = useState(0);
@ -59,10 +58,6 @@ export const ProfileCalendar = () => {
            })
    }, [requestDates]);

-    useEffect(() => {
-        setMonth(currentMonth)
-    }, [month]);
-
    return (
        <div className='profile__calendar'>
            <ProfileHeader/>
@ -71,7 +66,7 @@ export const ProfileCalendar = () => {
                <div className='summary__info'>
                    <div className='summary__person'>
                        <img src={urlForLocal(profileInfo.photo)} className='summary__avatar'  alt='avatar'/>
-                        <p className='summary__name'>{profileInfo.fio} {profileInfo.specification}</p>
+                        <p className='summary__name'>{profileInfo.fio}, {profileInfo.specification} разработчик</p>
                    </div>
                    <Link to='/report'>
                        <button className="calendar__btn" onClick={() => {
@ -84,10 +79,7 @@ export const ProfileCalendar = () => {
                    :
                    <div className='row'>
                        <div className='col-12 col-xl-12'>
-                            <ProfileCalendarComponent setValueHandler={setValueHandler} value={value} reports={reports} />
-                            <p className='calendar__hours'>
-                                {month} : <span> {totalHours} часов </span>
-                            </p>
+                            <ProfileCalendarComponent setValueHandler={setValueHandler} value={value} reports={reports} totalHours={totalHours} />
                        </div>
                    </div>
                }
--- a/src/components/ProfileCalendar/ProfileCalendarComponent.js
+++ b/src/components/ProfileCalendar/ProfileCalendarComponent.js
@ -3,7 +3,7 @@ import ellipse from '../../images/ellipse.png'
 import rectangle from '../../images/rectangle__calendar.png'
 import calendarIcon from '../../images/calendar_icon.png'
 import moment from 'moment'
-import {calendarHelper, currentMonthAndDay, getReports} from '../Calendar/calendarHelper'
+import {calendarHelper, currentMonth, currentMonthAndDay, getReports} from '../Calendar/calendarHelper'
 import {setReportDate, setRequestDate} from '../../redux/reportSlice';
 import {useDispatch} from "react-redux";
 import {Link} from "react-router-dom";
@ -11,18 +11,19 @@ import {Link} from "react-router-dom";
 import 'moment/locale/ru'
 import './../Calendar/calendarComponent.scss'

-export const ProfileCalendarComponent = React.memo(({value, setValueHandler, reports}) => {
+export const ProfileCalendarComponent = React.memo(({value, setValueHandler, reports, totalHours}) => {
    const dispatch = useDispatch();
    const [currentDay] = useState(moment())
    const [calendar, setCalendar] = useState([])
+    const [month, setMonth] = useState('');

    useEffect(() => {
        setCalendar(calendarHelper(value))
    }, [value])

-    // function beforeToday(day) {
-    //     return day.isBefore(new Date(), 'day')
-    // }
+    useEffect(() => {
+        setMonth(value.format('MMMM'))
+    }, [month]);

    function isToday(day) {
        return day.isSame(new Date(), 'day')
@ -76,6 +77,9 @@ export const ProfileCalendarComponent = React.memo(({value, setValueHandler, rep
                        {prevMonth().format('MMMM')}
                    </span>
                </div>
+                <div className='calendar-component__header-box'>
+                    <span>{value.format('YYYY')}</span>
+                </div>
                <div className='calendar-component__header-box'>
                    <img src={ellipse} alt='' />
                    <span onClick={() => {
@ -124,6 +128,9 @@ export const ProfileCalendarComponent = React.memo(({value, setValueHandler, rep
                    )}
                </div>
            </div>
+            <p className='calendar__hours'>
+                {month} : <span> {totalHours} часов </span>
+            </p>
        </div>
    )
 })
--- a/src/components/ProfileCalendar/profileCalendar.scss
+++ b/src/components/ProfileCalendar/profileCalendar.scss
@ -15,6 +15,10 @@

  .summary__info {
    padding-right: 25px;
+
+    @media (max-width: 500px) {
+      padding-right: 5px;
+    }
  }

  .loader {
--- a/src/components/ProfileHeader/ProfileHeader.js
+++ b/src/components/ProfileHeader/ProfileHeader.js
@ -55,14 +55,16 @@ export const ProfileHeader = () => {
            <nav className='profileHeader__nav'>
              <NavLink end to={'/profile/summary'}>Резюме</NavLink>
              <NavLink end to={'/profile'}>Отчетность</NavLink>
-              <NavLink end to={'/'}>Трекер</NavLink>
-              <NavLink end to={'/'}>Выплаты</NavLink>
-              <NavLink end to={'/'}>Настройки</NavLink>
+              <NavLink end to={'/profile/tracker'}>Трекер</NavLink>
+              <NavLink end to={'/profile/payouts'}>Выплаты</NavLink>
+              <NavLink end to={'/profile/settings'}>Настройки</NavLink>
            </nav>

            <div className='profileHeader__personalInfo'>
              <h3 className='profileHeader__personalInfoName'>{profileInfo?.fio}</h3>
-              <img src={profileInfo.photo ? urlForLocal(profileInfo.photo) : ""} className='profileHeader__personalInfoAvatar' alt='avatar'/>
+              <NavLink end to={'/profile'}>
+                <img src={profileInfo.photo ? urlForLocal(profileInfo.photo) : ""} className='profileHeader__personalInfoAvatar' alt='avatar'/>
+              </NavLink>
            </div>
          </div>
        </div>
--- a/src/components/ProfileHeader/profileHeader.scss
+++ b/src/components/ProfileHeader/profileHeader.scss
@ -71,6 +71,10 @@
        font-size: 12px;
      }
    }
+
+    @media (max-width: 450px) {
+      column-gap: 8px;
+    }
  }

  &__personalInfo {
--- a/src/components/ReportForm/ReportForm.js
+++ b/src/components/ReportForm/ReportForm.js
@ -2,6 +2,7 @@ import React, {useState, useEffect} from 'react'
 import {useSelector} from 'react-redux'
 import {Link, useNavigate} from 'react-router-dom'
 import DatePicker, { registerLocale } from "react-datepicker"
+import {getCorrectDate, getCreatedDate} from '../Calendar/calendarHelper'
 import ru from "date-fns/locale/ru"
 registerLocale("ru", ru);

@ -27,18 +28,6 @@ const ReportForm = () => {
  const navigate= useNavigate();
  const reportDate = useSelector(getReportDate);

-  const getCreatedDate = (day) => {
-    if (day) {
-      return `${new Date(day).getFullYear()}-${new Date(day).getMonth() + 1}-${new Date(day).getDate()}`
-    } else {
-      const date = new Date();
-      const dd = String(date.getDate()).padStart(2, '0');
-      const mm = String(date.getMonth() + 1).padStart(2, '0');
-      const yyyy = date.getFullYear();
-      return `${yyyy}-${mm}-${dd}`
-    }
-  };
-
  useEffect(() => {
    initListeners()
  }, [])
@ -130,7 +119,7 @@ const ReportForm = () => {
                    src={calendarIcon}
                    alt=''
                />
-                {getCreatedDate(startDate)}
+                {getCorrectDate(startDate)}
              </div>
              <DatePicker
                  className='datePicker'
@ -184,9 +173,11 @@ const ReportForm = () => {
                                       : input
                                 }))}/>
                        </div>
+                        {index > 0 &&
                        <div className='report-form__task-remove'>
                          <img onClick={() => deleteInput(index)} src={remove} alt=''/>
                        </div>
+                        }
                      </form>
                  )
                })}
@ -196,7 +187,6 @@ const ReportForm = () => {
                  <span>Добавить еще </span>
                </div>
              </div>
-              <div className='col-4'></div>
            </div>

        <div className='row'>
--- a/src/components/ReportForm/reportForm.scss
+++ b/src/components/ReportForm/reportForm.scss
@ -18,6 +18,10 @@
    border-radius: 12px;
    margin: 25px 0 80px;
    padding: 50px 40px;
+
+    @media (max-width: 555px) {
+      padding: 25px 20px;
+    }
  }

  .report__head {
@ -53,6 +57,10 @@
      letter-spacing: normal;
      line-height: 48.74px;
      text-align: left;
+
+      @media (max-width: 555px) {
+        font-size: 2.5em;
+      }
    }

    h3 {
@ -65,6 +73,11 @@
      text-align: left;
      margin-top: 52px;
      margin-bottom: 35px;
+
+      @media (max-width: 555px) {
+        margin-top: 25px;
+        margin-bottom: 15px;
+      }
    }
  }

@ -84,6 +97,7 @@
    letter-spacing: normal;
    line-height: normal;
    text-align: left;
+    cursor: pointer;

    img {
      margin-left: 20px;
@ -102,7 +116,7 @@
      font-style: normal;
      letter-spacing: normal;
      line-height: 48.74px;
-      width: 40px;
+      width: 12px;
    }

    &-list {
@ -144,16 +158,25 @@
        line-height: normal;
        text-align: left;
        margin-bottom: 26px;
+        white-space: nowrap;
      }
    }

    &-title {
-      &--description {
-        margin-left: 20px;
-      }
+      //&--description {
+      //  margin-left: 20px;
+      //}

      &--hours {
        margin-left: 330px;
+
+        @media (max-width: 810px) {
+          margin-left: 125px;
+        }
+
+        @media (max-width: 610px) {
+          margin-left: 25px;
+        }
      }
    }

@ -161,6 +184,10 @@
      margin-left: 20px;
      display: flex;
      align-items: center;
+
+      img {
+        cursor: pointer;
+      }
    }

    &-form {
@ -186,6 +213,14 @@
          font-size: 1.8em;
          padding-left: 20px;
          padding-right: 20px;
+
+          @media (max-width: 810px) {
+            width: 250px;
+          }
+
+          @media (max-width: 610px) {
+            width: 150px;
+          }
        }
      }

@ -200,6 +235,18 @@
          outline: none;
          font-size: 1.8em;
          text-align: center;
+
+          @media (max-width: 500px) {
+            width: 100px;
+          }
+
+          @media (max-width: 440px) {
+            width: 75px;
+          }
+
+          @media (max-width: 410px) {
+            width: 50px;
+          }
        }
      }
    }
@ -235,6 +282,11 @@
      padding-left: 20px;
      padding-right: 20px;
      outline: none;
+
+      @media (max-width: 610px) {
+        max-width: 460px;
+        width: 100%;
+      }
    }
  }