From 28a0c7f84316fc6f512af0697c1238d072419d44 Mon Sep 17 00:00:00 2001 From: M1kola Date: Wed, 1 Mar 2023 00:28:58 +0300 Subject: [PATCH 1/2] new fixes --- .../Calendar/calendarComponent.scss | 16 ++++++ src/components/Calendar/calendarHelper.js | 6 +++ .../ProfileCalendar/ProfileCalendar.js | 6 ++- .../ProfileCalendarComponent.js | 52 ++++++++++--------- .../ProfileCalendar/profileCalendar.scss | 21 +++++++- src/components/ProfileHeader/ProfileHeader.js | 28 ++++++---- .../ProfileHeader/profileHeader.scss | 6 +++ src/components/ReportForm/ReportForm.js | 19 ++++--- src/components/ReportForm/reportForm.scss | 23 +++++--- src/pages/Summary/Summary.js | 6 +-- src/pages/Summary/summary.scss | 13 +++-- src/pages/ViewReport/ViewReport.js | 6 +-- src/pages/ViewReport/viewReport.scss | 2 +- 13 files changed, 141 insertions(+), 63 deletions(-) diff --git a/src/components/Calendar/calendarComponent.scss b/src/components/Calendar/calendarComponent.scss index ba69a3c7..2a774ea9 100644 --- a/src/components/Calendar/calendarComponent.scss +++ b/src/components/Calendar/calendarComponent.scss @@ -11,6 +11,21 @@ &__header { display: flex; + justify-content: space-between; + + &-info { + display: flex; + + .calendar__hours { + margin: 0 10px; + line-height: 0; + font-weight: 500; + } + } + + &-switcher { + display: flex; + } h3 { @@ -20,6 +35,7 @@ letter-spacing: normal; line-height: 30px; text-align: left; + margin-bottom: 0; @media (max-width: 500px) { font-size: 1.7em; diff --git a/src/components/Calendar/calendarHelper.js b/src/components/Calendar/calendarHelper.js index 30d8c7c7..73afcb39 100644 --- a/src/components/Calendar/calendarHelper.js +++ b/src/components/Calendar/calendarHelper.js @@ -60,3 +60,9 @@ export function getCorrectDate(day) { export function currentMonthAndDayReportPage() { return moment().format('D MMMM'); } + +export function hourOfNum(number) { + const hours = [' час', ' часа', ' часов']; + const cases = [2, 0, 1, 1, 1, 2]; + return hours[(number % 100 > 4 && number % 100 < 20) ? 2 : cases[(number % 10 < 5) ? number % 10 : 5]]; +} diff --git a/src/components/ProfileCalendar/ProfileCalendar.js b/src/components/ProfileCalendar/ProfileCalendar.js index a81a2325..7bf845af 100644 --- a/src/components/ProfileCalendar/ProfileCalendar.js +++ b/src/components/ProfileCalendar/ProfileCalendar.js @@ -80,9 +80,11 @@ export const ProfileCalendar = () => { {loader ? - +
+ +
: -
+
diff --git a/src/components/ProfileCalendar/ProfileCalendarComponent.js b/src/components/ProfileCalendar/ProfileCalendarComponent.js index ef20a698..e895ed6c 100644 --- a/src/components/ProfileCalendar/ProfileCalendarComponent.js +++ b/src/components/ProfileCalendar/ProfileCalendarComponent.js @@ -3,7 +3,7 @@ import arrow from '../../images/arrowCalendar.png' import rectangle from '../../images/rectangle__calendar.png' import calendarIcon from '../../images/calendar_icon.png' import moment from 'moment' -import {calendarHelper, currentMonth, currentMonthAndDay, getReports} from '../Calendar/calendarHelper' +import {calendarHelper, currentMonthAndDay, getReports, hourOfNum} from '../Calendar/calendarHelper' import {setReportDate, setRequestDate} from '../../redux/reportSlice'; import {useDispatch} from "react-redux"; import {Link} from "react-router-dom"; @@ -67,28 +67,35 @@ export const ProfileCalendarComponent = React.memo(({value, setValueHandler, rep return (
-

Мои отчеты

-
{ - setValueHandler(prevMonth()) - dispatch(setRequestDate(getReports(prevMonth()))) - }}> - - - {prevMonth().format('MMMM')} - +
+

Мои отчеты:

+

+ {month} - {totalHours} {hourOfNum(totalHours)} +

-
- {value.format('YYYY')} -
-
{ - setValueHandler(nextMonth()) - dispatch(setRequestDate(getReports(nextMonth()))) +
+
{ + setValueHandler(prevMonth()) + dispatch(setRequestDate(getReports(prevMonth()))) + }}> + + + {prevMonth().format('MMMM')} + +
+
+ {value.format('YYYY')} +
+
{ + setValueHandler(nextMonth()) + dispatch(setRequestDate(getReports(nextMonth()))) - }}> - - {nextMonth().format('MMMM')} - - + }}> + + {nextMonth().format('MMMM')} + + +
@@ -128,9 +135,6 @@ export const ProfileCalendarComponent = React.memo(({value, setValueHandler, rep )}
-

- {month} : {totalHours} часов -

) }) diff --git a/src/components/ProfileCalendar/profileCalendar.scss b/src/components/ProfileCalendar/profileCalendar.scss index 36d8c739..c4af09df 100644 --- a/src/components/ProfileCalendar/profileCalendar.scss +++ b/src/components/ProfileCalendar/profileCalendar.scss @@ -21,8 +21,27 @@ } } + .loader__wrapper { + min-height: 719px; + display: flex; + justify-content: center; + align-items: center; + + @media (max-width: 1000px) { + min-height: 645px; + } + } + + + .calendar__wrapper { + min-height: 719px; + + @media (max-width: 1000px) { + min-height: auto; + } + } + .loader { - margin: 20px 0 50px; &:hover { path { fill: #ffffff; diff --git a/src/components/ProfileHeader/ProfileHeader.js b/src/components/ProfileHeader/ProfileHeader.js index 1496dc52..200cb0fd 100644 --- a/src/components/ProfileHeader/ProfileHeader.js +++ b/src/components/ProfileHeader/ProfileHeader.js @@ -46,18 +46,26 @@ export const ProfileHeader = () => { }, ], partner: [ - { - path: '/employees', - name: 'Сотрудники' - }, - { - path: '', - name: 'Отчетность' - }, { path: '/requests', name: 'Запросы' }, + { + path: '/employees', + name: 'Персонал' + }, + { + path: '/tracker', + name: 'Трекер' + }, + { + path: '/payouts', + name: 'Договора' + }, + { + path: '/settings', + name: 'Настройки' + }, ] }) @@ -86,14 +94,14 @@ export const ProfileHeader = () => {
-

itguild. + itguild. {user === 'developer' ? 'для разработчиков' : 'для партнеров' } -

+ diff --git a/src/components/ProfileHeader/profileHeader.scss b/src/components/ProfileHeader/profileHeader.scss index 66a08994..417669ec 100644 --- a/src/components/ProfileHeader/profileHeader.scss +++ b/src/components/ProfileHeader/profileHeader.scss @@ -23,10 +23,16 @@ font-size: 20px; line-height: 32px; margin-bottom: 0; + color: black; span { color: #52B709; } + + &:hover { + color: black; + text-decoration: none; + } } &__logout { diff --git a/src/components/ReportForm/ReportForm.js b/src/components/ReportForm/ReportForm.js index 02dc26cd..9fbb2e88 100644 --- a/src/components/ReportForm/ReportForm.js +++ b/src/components/ReportForm/ReportForm.js @@ -2,7 +2,7 @@ import React, {useState, useEffect} from 'react' import {useSelector} from 'react-redux' import {Link, Navigate, useNavigate} from 'react-router-dom' import DatePicker, { registerLocale } from "react-datepicker" -import {getCorrectDate, getCreatedDate} from '../Calendar/calendarHelper' +import {getCorrectDate, getCreatedDate, hourOfNum} from '../Calendar/calendarHelper' import ru from "date-fns/locale/ru" registerLocale("ru", ru); @@ -67,10 +67,12 @@ const ReportForm = () => { }; const handler = () => { - if(!inputs[0].task || !inputs[0].hours_spent) { - setReportSuccess('Заполните задачи'); - setTimeout(() => setReportSuccess(''), 1000) - return + for (let input of inputs) { + if(!input.task || !input.hours_spent) { + setReportSuccess('Заполните задачи'); + setTimeout(() => setReportSuccess(''), 2000) + return + } } apiRequest('/reports/create', { method: 'POST', @@ -158,7 +160,8 @@ const ReportForm = () => { {index + 1}.
- setInputs(inputs.map((input, inputIndex) => { + setInputs(inputs.map((input, inputIndex) => { return index === inputIndex ? { ...input, @@ -168,7 +171,7 @@ const ReportForm = () => { }))}/>
- setInputs(inputs.map((input, inputIndex) => { return index === inputIndex ? { @@ -217,7 +220,7 @@ const ReportForm = () => { {isFetching ? : 'Отправить'}

- Всего за день : {totalHours} часов + Всего за день : {totalHours} {hourOfNum(totalHours)}

{reportSuccess &&

{reportSuccess}

diff --git a/src/components/ReportForm/reportForm.scss b/src/components/ReportForm/reportForm.scss index 635d4acf..226bb528 100644 --- a/src/components/ReportForm/reportForm.scss +++ b/src/components/ReportForm/reportForm.scss @@ -151,8 +151,7 @@ p { font-family: 'GT Eesti Pro Display'; - font-size: 1.3em; - font-weight: 100; + font-size: 1.5em; font-style: normal; letter-spacing: normal; line-height: normal; @@ -168,10 +167,10 @@ //} &--hours { - margin-left: 330px; + margin-left: 310px; @media (max-width: 810px) { - margin-left: 125px; + margin-left: 100px; } @media (max-width: 610px) { @@ -202,6 +201,11 @@ margin-left: 20px; &--description { + + .checkTask { + border-color: #fc0000; + } + input { width: 460px; height: 42px; @@ -225,6 +229,14 @@ } &--hours { + @media (max-width: 610px) { + margin-left: 45px; + } + + .checkTask { + border-color: #fc0000; + } + input { width: 141px; height: 42px; @@ -257,8 +269,7 @@ span { font-family: 'GT Eesti Pro Display'; - font-size: 1.3em; - font-weight: 100; + font-size: 1.5em; font-style: normal; letter-spacing: normal; line-height: normal; diff --git a/src/pages/Summary/Summary.js b/src/pages/Summary/Summary.js index c496e028..63abf220 100644 --- a/src/pages/Summary/Summary.js +++ b/src/pages/Summary/Summary.js @@ -60,7 +60,7 @@ export const Summary = () => {
{profileInfo.skillValues && profileInfo.skillValues.map((skill) => - {skill.skill.name} + {skill.skill.name}, )}
@@ -86,7 +86,7 @@ export const Summary = () => {
{Boolean(gitInfo.length) && gitInfo.map((itemGit) => { - return
+ return diff --git a/src/pages/Summary/summary.scss b/src/pages/Summary/summary.scss index 4880debe..c383d0cd 100644 --- a/src/pages/Summary/summary.scss +++ b/src/pages/Summary/summary.scss @@ -51,7 +51,7 @@ margin-top: 30px; display: flex; align-items: center; - padding: 0 130px 0 45px; + padding: 0 25px 0 45px; justify-content: space-between; @media (max-width: 930px) { @@ -150,16 +150,16 @@ } &__git { - background: #52B709; - border-radius: 44px; + border-radius: 31px; width: 177px; - height: 50px; + height: 62px; font-weight: 500; - font-size: 16px; + font-size: 1.9em; line-height: 32px; color: white; border: none; transition: all 0.3s ease; + 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%); &:hover { box-shadow: 6px 5px 20px rgb(87 98 80 / 21%); @@ -168,6 +168,7 @@ @media (max-width: 690px) { width: 120px; + height: 50px; } } @@ -307,10 +308,12 @@ border-radius: 12px; padding: 35px 30px 30px 45px; transition: all 0.3s ease; + color: #000000; &:hover { box-shadow: 6px 5px 20px rgb(87 98 80 / 21%); transform: scale(1.02); + text-decoration: none; } @media (max-width: 825px) { diff --git a/src/pages/ViewReport/ViewReport.js b/src/pages/ViewReport/ViewReport.js index 4c6fbed6..c6767f52 100644 --- a/src/pages/ViewReport/ViewReport.js +++ b/src/pages/ViewReport/ViewReport.js @@ -12,7 +12,7 @@ import {Footer} from "../../components/Footer/Footer"; import arrow from "../../images/right-arrow.png"; import arrowSwitchDate from "../../images/arrowViewReport.png"; import {apiRequest} from "../../api/request"; -import {getCorrectDate, getCreatedDate} from '../../components/Calendar/calendarHelper' +import {getCorrectDate, getCreatedDate, hourOfNum} from '../../components/Calendar/calendarHelper' import './viewReport.scss' @@ -90,7 +90,7 @@ export const ViewReport = () => {

{getCorrectDate(reportDay)}

-

Вами потрачено на работу : {totalHours} часов

+

Вами потрачено на работу : {totalHours} {hourOfNum(totalHours)}

{/*
*/} {/* */} {/*
*/} @@ -128,7 +128,7 @@ export const ViewReport = () => {
{task.hours} -

часов на задачу

+

{hourOfNum(task.hours)} на задачу

diff --git a/src/pages/ViewReport/viewReport.scss b/src/pages/ViewReport/viewReport.scss index 6f429da5..2dc82795 100644 --- a/src/pages/ViewReport/viewReport.scss +++ b/src/pages/ViewReport/viewReport.scss @@ -82,7 +82,7 @@ &__hours { font-weight: 400; - font-size: 12px; + font-size: 15px; line-height: 32px; color: #000000; From fceaa1d190c2f3466b5612ed773ec66119569e6e Mon Sep 17 00:00:00 2001 From: M1kola Date: Wed, 1 Mar 2023 23:40:23 +0300 Subject: [PATCH 2/2] new fixes --- .../Calendar/calendarComponent.scss | 38 +++++++++++++++++++ src/components/ReportForm/reportForm.scss | 9 ++++- src/pages/ViewReport/viewReport.scss | 13 ++++++- 3 files changed, 57 insertions(+), 3 deletions(-) diff --git a/src/components/Calendar/calendarComponent.scss b/src/components/Calendar/calendarComponent.scss index 2a774ea9..7aab544f 100644 --- a/src/components/Calendar/calendarComponent.scss +++ b/src/components/Calendar/calendarComponent.scss @@ -13,18 +13,46 @@ display: flex; justify-content: space-between; + @media (max-width: 560px) { + flex-direction: column; + row-gap: 15px; + } + &-info { display: flex; + @media (max-width: 685px) { + font-size: 7px; + } + + @media (max-width: 560px) { + font-size: 10px; + } + + @media (max-width: 560px) { + justify-content: center; + } + .calendar__hours { margin: 0 10px; line-height: 0; font-weight: 500; + display: flex; + align-items: center; } } &-switcher { display: flex; + + @media (max-width: 590px) { + font-size: 8px; + } + + @media (max-width: 560px) { + justify-content: center; + font-size: 12px; + } } h3 { @@ -74,6 +102,10 @@ font-size: 1.2em; } } + + @media (max-width: 560px) { + margin-left: 0 !important; + } } } @@ -199,6 +231,12 @@ } } +@media (max-width: 560px) { + .calendar-component { + padding-top: 10px; + } +} + //@media (max-width: 768px) { // .calendar-component__form > button { // width: 70px; diff --git a/src/components/ReportForm/reportForm.scss b/src/components/ReportForm/reportForm.scss index 226bb528..62a29881 100644 --- a/src/components/ReportForm/reportForm.scss +++ b/src/components/ReportForm/reportForm.scss @@ -158,12 +158,15 @@ text-align: left; margin-bottom: 26px; white-space: nowrap; + + @media (max-width: 450px) { + font-size: 13px; + } } } &-title { //&--description { - // margin-left: 20px; //} &--hours { @@ -233,6 +236,10 @@ margin-left: 45px; } + @media (max-width: 450px) { + margin-left: 22px; + } + .checkTask { border-color: #fc0000; } diff --git a/src/pages/ViewReport/viewReport.scss b/src/pages/ViewReport/viewReport.scss index 2dc82795..b67bc59f 100644 --- a/src/pages/ViewReport/viewReport.scss +++ b/src/pages/ViewReport/viewReport.scss @@ -64,6 +64,11 @@ height: 72px; justify-content: space-between; + @media (max-width: 540px) { + padding: 10px 15px; + height: 60px; + } + @media (max-width: 500px) { column-gap: 0; justify-content: space-between; @@ -75,9 +80,13 @@ line-height: 32px; color: #000000; - @media (max-width: 500px) { + @media (max-width: 660px) { font-size: 16px; } + + @media (max-width: 490px) { + font-size: 12px; + } } &__hours { @@ -86,7 +95,7 @@ line-height: 32px; color: #000000; - @media (max-width: 500px) { + @media (max-width: 660px) { font-size: 11px; }