apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

remake layout report for day

Browse Source
This commit is contained in:
Никита Губарь 2024-04-08 04:30:59 +03:00
parent 7400319650
commit 811ef4f69d
6 changed files with 208 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/ProfileCalendar/ProfileCalendar.jsx
View File

@ -95,11 +95,21 @@ export const ProfileCalendar = () => {
alt="avatar"
/>
<p className="summary__name">
{profileInfo?.fio || profileInfo?.username},{" "}
{profileInfo.specification} разработчик
{profileInfo?.fio || profileInfo?.username}{" "}
{profileInfo.specification}
</p>
<hr />
<div className="summary__direction">Front End</div>
<div className="summary__level">Middle+</div>
</div>
<Link to="/profile/calendar/report">
<div className="summary__skill">
<p>Ключевые навыки:</p>
<div>Java</div>
<div>Java</div>
<div>Solid</div>
<div>Java</div>
</div>
{/* <Link to="/profile/calendar/report">
<button
className="calendar__btn"
onClick={() => {
@ -109,7 +119,7 @@ export const ProfileCalendar = () => {
>
Заполнить отчет
</button>
</Link>
</Link> */}
</div>
{loader ? (
<div className="loader__wrapper">

19
src/components/ProfileCalendar/profileCalendar.scss
View File

@ -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 {

4
src/pages/Summary/Summary.jsx
View File

@ -116,8 +116,8 @@ export const Summary = () => {
alt="avatar"
/>
<p className="summary__name">
{profileInfo?.fio || profileInfo?.username},{" "}
{profileInfo.specification} разработчик
{profileInfo?.fio || profileInfo?.username}{" "}
{profileInfo.specification}
</p>
<hr />
<div className="summary__direction">Front End</div>

8
src/pages/Summary/summary.scss
View File

@ -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 {

62
src/pages/ViewReport/ViewReport.jsx
View File

@ -170,6 +170,10 @@ export const ViewReport = () => {
</div>
)}
</div>
{loader && <Loader width={75} height={75} />}
{Boolean(taskText.length) && (
<div className="view-report__content">
<div className="view-report__switch-date">
<div onClick={() => previousDay()}>
<Link
@ -192,9 +196,9 @@ export const ViewReport = () => {
}`}
>
<Link
to={`/profile/calendar/view/${getCreatedDate(nextReportDay)}/${
params.id
}`}
to={`/profile/calendar/view/${getCreatedDate(
nextReportDay
)}/${params.id}`}
>
<div className={`view-report__switch-date__next switch-date`}>
<img src={arrowSwitchDate} alt="arrow" />
@ -202,55 +206,36 @@ export const ViewReport = () => {
</Link>
</div>
</div>
{loader && <Loader width={75} height={75} />}
{Boolean(taskText.length) && (
<div className="view-report__content">
<div className="table__container">
<table className="view-report__done">
<thead>
<tr>
<th>
<p>Выполненные задачи</p>
</th>
<th>
<p>Время</p>
</th>
</tr>
</thead>
<tbody>
<div className="view-report__done">
<h2>Выполненные задачи</h2>
{taskText.length &&
taskText.map((task, index) => {
return (
<tr key={task.id}>
<td>
<div className="view-report__done-task" key={task.id}>
<div>
<p>
{index + 1}. {task.task}
</p>
</td>
<td>
</div>
<div className="view-report__done__hours__item">
<span>{Math.floor(task.hours)}</span>
<p className="hours">
{hourOfNum(Math.floor(task.hours))}
/ {hourOfNum(Math.floor(task.hours))}
</p>
</div>
</td>
</tr>
<div>Задача ( On Review ) - Уведомления </div>
</div>
);
})}
<tr>
<td></td>
<td>
<span>
Всего: {totalHours} {hourOfNum(totalHours)}
</span>
</td>
</tr>
</tbody>
</table>
<p className="view-report__done-total-hours">
Всего: {totalHours} <span>/ {hourOfNum(totalHours)}</span>
</p>
</div>
<div className="view-report__addition">
{Boolean(difficulties.length) && (
<div className="view-report__item">
<div className="view-report__addition-item">
<h3>Возникшие сложности</h3>
{difficulties.map((item, index) => {
return <p key={index}>{item}</p>;
@ -258,7 +243,7 @@ export const ViewReport = () => {
</div>
)}
{Boolean(tomorrowTask.length) && (
<div className="view-report__item">
<div className="view-report__addition-item">
<h3>Что планируется сделать завтра?</h3>
{tomorrowTask.map((item, index) => {
return <p key={index}>{item}</p>;
@ -266,6 +251,7 @@ export const ViewReport = () => {
</div>
)}
</div>
</div>
)}
{!Boolean(taskText.length) && !loader && (
<div className="view-report__no-task">

138
src/pages/ViewReport/viewReport.scss
View File

@ -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,25 +363,42 @@
line-height: 32px;
}
}
&-total-hours {
color: #000000;
font-size: 20px;
font-weight: 500;
margin: 35px 0 0 30px;
span {
font-weight: 400;
font-size: 15px;
color: #6f6f6f;
}
}
}
&__item {
&__addition {
display: grid;
grid-template-columns: 55% 45%;
column-gap: 15px;
padding: 35px;
&-item {
display: flex;
flex-direction: column;
row-gap: 10px;
background: #ffffff;
border-radius: 12px;
margin: 20px 0;
background-color: #f4f7ff;
border-radius: 10px;
padding: 15px;
h3 {
color: #1458dd;
font-weight: 500;
font-size: 22px;
line-height: 32px;
font-size: 20px;
@media (max-width: 650px) {
font-size: 16px;
line-height: 20px;
}
}
@ -400,9 +411,6 @@
}
}
}
&__item:last-child {
margin-bottom: 0;
}
&__no-task {