From 811ef4f69d0ad429191e499471821612cd6d31c7 Mon Sep 17 00:00:00 2001 From: Gubar Nikita Date: Mon, 8 Apr 2024 04:30:59 +0300 Subject: [PATCH 1/2] remake layout report for day --- .../ProfileCalendar/ProfileCalendar.jsx | 18 +- .../ProfileCalendar/profileCalendar.scss | 19 ++ src/pages/Summary/Summary.jsx | 4 +- src/pages/Summary/summary.scss | 8 + src/pages/ViewReport/ViewReport.jsx | 164 ++++++++--------- src/pages/ViewReport/viewReport.scss | 172 +++++++++--------- 6 files changed, 208 insertions(+), 177 deletions(-) diff --git a/src/components/ProfileCalendar/ProfileCalendar.jsx b/src/components/ProfileCalendar/ProfileCalendar.jsx index cbb0ea5c..d7d9ffe2 100644 --- a/src/components/ProfileCalendar/ProfileCalendar.jsx +++ b/src/components/ProfileCalendar/ProfileCalendar.jsx @@ -95,11 +95,21 @@ export const ProfileCalendar = () => { alt="avatar" />

- {profileInfo?.fio || profileInfo?.username},{" "} - {profileInfo.specification} разработчик + {profileInfo?.fio || profileInfo?.username}{" "} + {profileInfo.specification}

+
+
Front End
+
Middle+
- +
+

Ключевые навыки:

+
Java
+
Java
+
Solid
+
Java
+
+ {/* - + */} {loader ? (
diff --git a/src/components/ProfileCalendar/profileCalendar.scss b/src/components/ProfileCalendar/profileCalendar.scss index 54f0cef4..0c018490 100644 --- a/src/components/ProfileCalendar/profileCalendar.scss +++ b/src/components/ProfileCalendar/profileCalendar.scss @@ -22,6 +22,25 @@ @media (max-width: 500px) { padding-right: 5px; } + + .summary__skill { + color: #6f6f6f; + font-size: 14px; + font-weight: 300; + display: flex; + flex-direction: row; + align-items: center; + column-gap: 10px; + + div { + font-size: 12px; + font-weight: 400; + + border: #8dc63f 0.5px solid; + border-radius: 44px; + padding: 3px 20px; + } + } } .loader__wrapper { diff --git a/src/pages/Summary/Summary.jsx b/src/pages/Summary/Summary.jsx index 874429c1..78a9c4e2 100644 --- a/src/pages/Summary/Summary.jsx +++ b/src/pages/Summary/Summary.jsx @@ -116,8 +116,8 @@ export const Summary = () => { alt="avatar" />

- {profileInfo?.fio || profileInfo?.username},{" "} - {profileInfo.specification} разработчик + {profileInfo?.fio || profileInfo?.username}{" "} + {profileInfo.specification}

Front End
diff --git a/src/pages/Summary/summary.scss b/src/pages/Summary/summary.scss index 1763d84d..d92174c7 100644 --- a/src/pages/Summary/summary.scss +++ b/src/pages/Summary/summary.scss @@ -36,6 +36,7 @@ } &__info { + width: 100%; min-height: 110px; background: white; border-radius: 12px; @@ -64,6 +65,12 @@ align-items: center; column-gap: 20px; + hr { + background-color: #00000081; + height: 30px; + width: 1px; + } + @media (max-width: 825px) { column-gap: 20px; } @@ -131,6 +138,7 @@ border-radius: 44px; font-size: 14px; font-weight: 400; + padding: 5px 17px; } &__git { diff --git a/src/pages/ViewReport/ViewReport.jsx b/src/pages/ViewReport/ViewReport.jsx index 6169cf6f..85329069 100644 --- a/src/pages/ViewReport/ViewReport.jsx +++ b/src/pages/ViewReport/ViewReport.jsx @@ -170,101 +170,87 @@ export const ViewReport = () => {
)} -
-
previousDay()}> - -
- arrow -
- -
-

{getCorrectDate(params.date)}

- -
nextDay()} - className={`${ - getCreatedDate(currentDay) === params.date ? "disable" : "" - }`} - > - -
- arrow -
- -
-
{loader && } {Boolean(taskText.length) && (
-
- - - - - - - - - {taskText.length && - taskText.map((task, index) => { - return ( - - - - - ); - })} - - - - - -
-

Выполненные задачи

- 		-

Время

-
-

- {index + 1}. {task.task} -

- 		-
- {Math.floor(task.hours)} -

- {hourOfNum(Math.floor(task.hours))} -

-
-
- - Всего: {totalHours} {hourOfNum(totalHours)} - -
+
+
previousDay()}> + +
+ arrow +
+ +
+ +

{getCorrectDate(params.date)}

+ +
nextDay()} + className={`${ + getCreatedDate(currentDay) === params.date ? "disable" : "" + }`} + > + +
+ arrow +
+ +
- {Boolean(difficulties.length) && ( -
-

Возникшие сложности

- {difficulties.map((item, index) => { - return

{item}

; +
+

Выполненные задачи

+ {taskText.length && + taskText.map((task, index) => { + return ( +
+
+

+ {index + 1}. {task.task} +

+
+ +
+ {Math.floor(task.hours)} +

+ / {hourOfNum(Math.floor(task.hours))} +

+
+
Задача ( On Review ) - Уведомления
+
+ ); })} -
- )} - {Boolean(tomorrowTask.length) && ( -
-

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

- {tomorrowTask.map((item, index) => { - return

{item}

; - })} -
- )} + +

+ Всего: {totalHours} / {hourOfNum(totalHours)} +

+
+
+ {Boolean(difficulties.length) && ( +
+

Возникшие сложности

+ {difficulties.map((item, index) => { + return

{item}

; + })} +
+ )} + {Boolean(tomorrowTask.length) && ( +
+

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

+ {tomorrowTask.map((item, index) => { + return

{item}

; + })} +
+ )} +
)} {!Boolean(taskText.length) && !loader && ( diff --git a/src/pages/ViewReport/viewReport.scss b/src/pages/ViewReport/viewReport.scss index a8792d50..b7dc2c34 100644 --- a/src/pages/ViewReport/viewReport.scss +++ b/src/pages/ViewReport/viewReport.scss @@ -16,6 +16,12 @@ } } + &__content { + background-color: #ffffff; + border-bottom-left-radius: 12px; + border-bottom-right-radius: 12px; + } + &__info { display: flex; flex-direction: column; @@ -60,7 +66,8 @@ display: flex; margin-top: 20px; background: #ffffff; - border-radius: 12px; + border-top-left-radius: 12px; + border-top-right-radius: 12px; padding: 20px 33px; align-items: center; column-gap: 20px; @@ -121,10 +128,10 @@ &__switch-date { display: flex; - margin: 20px 0; - justify-content: center; column-gap: 30px; align-items: center; + padding: 20px 20px 20px 30px; + border-bottom: #eeeeee 1px solid; @media (max-width: 500px) { column-gap: 0; @@ -132,17 +139,16 @@ } p { - font-weight: 400; - font-size: 18px; - line-height: 32px; - color: #000000; + font-weight: 500; + font-size: 22px; + color: #2e3a59; } .switch-date { - width: 48px; - height: 48px; - background: #8dc63f; - border-radius: 50px; + width: 20px; + height: 47px; + background-color: #e5f1fb; + border-radius: 5px; display: flex; justify-content: center; align-items: center; @@ -186,6 +192,34 @@ border-collapse: separate; border-spacing: 28px 0; + h2 { + color: #1458dd; + font-size: 20px; + font-weight: 500; + padding: 35px; + } + + &-task { + display: grid; + grid-template-columns: 40% 15% 30%; + align-items: center; + font-size: 15px; + font-weight: 500; + color: #111112; + justify-content: space-evenly; + margin: 0 0 20px 0; + + div { + background-color: #f4f7ff; + height: 61px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 10px; + padding: 10px 20px; + } + } + @media (max-width: 1205px) { display: grid; border-collapse: collapse; @@ -309,57 +343,17 @@ } &__item { - display: flex; - column-gap: 25px; - align-items: center; - min-width: 155px; - - .hours { - font-size: 15px; - - @media (max-width: 1170px) { - font-size: 13px; - text-align: center; - } - } - - @media (max-width: 900px) { - column-gap: 0; - justify-content: space-between; - min-width: auto; - width: 100%; - } - - @media (max-width: 775px) { - flex-direction: column; - justify-content: center; - row-gap: 10px; - } - span { - max-width: 48px; - height: 48px; - background: #8dc63f; - border-radius: 50px; - display: flex; - align-items: center; - justify-content: center; font-weight: 700; - font-size: 22px; - line-height: 32px; + font-size: 20px; color: #000000; - width: 100%; - - @media (max-width: 900px) { - max-width: 40px; - height: 40px; - } + margin: 5px; } p { font-weight: 400; - font-size: 12px; - line-height: 32px; + font-size: 15px; + color: #6f6f6f; } } @@ -369,40 +363,54 @@ line-height: 32px; } } - } - &__item { - display: flex; - flex-direction: column; - row-gap: 10px; - background: #ffffff; - border-radius: 12px; - margin: 20px 0; - padding: 15px; - - h3 { + &-total-hours { + color: #000000; + font-size: 20px; font-weight: 500; - font-size: 22px; - line-height: 32px; + margin: 35px 0 0 30px; - @media (max-width: 650px) { - font-size: 16px; - line-height: 20px; - } - } - - p { - font-weight: 400; - font-size: 15px; - - @media (max-width: 650px) { - font-size: 13px; + span { + font-weight: 400; + font-size: 15px; + color: #6f6f6f; } } } - &__item:last-child { - margin-bottom: 0; + &__addition { + display: grid; + grid-template-columns: 55% 45%; + column-gap: 15px; + padding: 35px; + + &-item { + display: flex; + flex-direction: column; + row-gap: 10px; + background-color: #f4f7ff; + border-radius: 10px; + padding: 15px; + + h3 { + color: #1458dd; + font-weight: 500; + font-size: 20px; + + @media (max-width: 650px) { + font-size: 16px; + } + } + + p { + font-weight: 400; + font-size: 15px; + + @media (max-width: 650px) { + font-size: 13px; + } + } + } } &__no-task { From 271374b6c6fb110bd9454bc92b2ef6aee77ff05b Mon Sep 17 00:00:00 2001 From: Gubar Nikita Date: Mon, 8 Apr 2024 04:32:56 +0300 Subject: [PATCH 2/2] + --- .../ProfileCalendar/ProfileCalendarComponent.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx index 0e076717..8e24284c 100644 --- a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx +++ b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx @@ -289,16 +289,16 @@ export const ProfileCalendarComponent = React.memo( ? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}` : `${getCorrectDate(endDate)} - ${getCorrectDate(startDate)}` : activePeriod - ? "Выберите диапазон на календаре" - : "Выбрать диапазон"} + ? "Выберите диапазон на календаре" + : "Выбрать диапазон"} {totalRangeHours ? `${totalRangeHours} ${hourOfNum(totalRangeHours)}` : endDate - ? "0 часов" - : ""} + ? "0 часов" + : ""} {endDate && (