finished reports adaptive

This commit is contained in:
Victor Batischev 2023-12-22 15:18:13 +03:00
parent 72766efa39
commit fc5d67dc2d
4 changed files with 22 additions and 39 deletions

View File

@ -170,7 +170,7 @@ const ReportForm = () => {
/>
<div className="report-form__task-list">
<img src={ellipse} alt="" />
<span>Какие задачи были выполнены?</span>
<span>Какие задачи выполнены?</span>
</div>
</div>

View File

@ -166,7 +166,7 @@
}
@media (max-width: 610px) {
margin-left: 85px;
margin-left: 80px;
}
}
}
@ -472,12 +472,6 @@
max-width: 141px;
}
}
&-list {
img {
display: none;
}
}
}
}
}

View File

@ -59,13 +59,12 @@ export const ViewReport = () => {
task: task.task,
id: task.id
};
if (task.hours_spent) {
spendTime += Number(task.hours_spent);
}
spendTime += Math.floor(task.hours_spent);
setTaskText((prevArray) => [...prevArray, taskInfo]);
});
}
setTotalHours(spendTime);
setTotalHours(Math.floor(spendTime));
setLoader(false);
});
previousReportDay.setDate(previousReportDay.getDate() - 1);
@ -106,7 +105,7 @@ export const ViewReport = () => {
<img src={arrow} alt="#" />
<p>Вернуться</p>
</Link>
<div className="viewReport__bar">
{/* <div className="viewReport__bar">
<h3 className="viewReport__bar__date">
{getCorrectDate(dateReport.id)}
</h3>
@ -116,16 +115,12 @@ export const ViewReport = () => {
{totalHours} {hourOfNum(totalHours)}
</span>
</p>
</div> */}
</div>
</div>
<div className="viewReport__switchDate">
<div
onClick={() => {
previousDay();
}}
>
<div className="viewReport__switch-date">
<div onClick={() => previousDay()}>
<Link to={`../view/${getCreatedDate(previousReportDay)}`}>
<div className="viewReport__switchDate__prev switchDate">
<div className="viewReport__switch-date__prev switch-date">
<img src={arrowSwitchDate} alt="arrow" />
</div>
</Link>
@ -140,7 +135,7 @@ export const ViewReport = () => {
}`}
>
<Link to={`../view/${getCreatedDate(nextReportDay)}`}>
<div className={`viewReport__switchDate__next switchDate`}>
<div className={`viewReport__switch-date__next switch-date`}>
<img src={arrowSwitchDate} alt="arrow" />
</div>
</Link>
@ -154,7 +149,7 @@ export const ViewReport = () => {
<thead>
<tr>
<th>
<p>Какие задачи были выполнены?</p>
<p>Какие задачи выполнены?</p>
</th>
<th>
<p>Время</p>
@ -173,9 +168,9 @@ export const ViewReport = () => {
</td>
<td>
<div className="viewReport__done__hours__item">
<span>{task.hours}</span>
<span>{Math.floor(task.hours)}</span>
<p className="hours">
{hourOfNum(task.hours)} на задачу
{hourOfNum(Math.floor(task.hours))}
</p>
</div>
</td>

View File

@ -139,11 +139,11 @@
margin-bottom: 0;
}
&__switchDate {
&__switch-date {
display: flex;
margin: 30px 0;
margin: 20px 0;
justify-content: center;
column-gap: 140px;
column-gap: 30px;
align-items: center;
@media (max-width: 500px) {
@ -158,7 +158,7 @@
color: #000000;
}
.switchDate {
.switch-date {
width: 48px;
height: 48px;
background: #8DC63F;
@ -396,15 +396,11 @@
&__item {
display: flex;
flex-direction: column;
row-gap: 22px;
row-gap: 10px;
background: #FFFFFF;
border-radius: 12px;
margin: 25px 0;
padding: 25px 35px;
@media (max-width: 650px) {
padding: 15px 20px;
}
margin: 20px 0;
padding: 15px;
h3 {
font-weight: 500;
@ -420,11 +416,9 @@
p {
font-weight: 400;
font-size: 15px;
line-height: 20px;
@media (max-width: 650px) {
font-size: 10px;
line-height: 18px;
font-size: 13px;
}
}
}