refactoring allStyles styleStyle -> style-style
This commit is contained in:
@ -95,11 +95,11 @@ export const ViewReport = () => {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="viewReport">
|
||||
<div className="view-report">
|
||||
<ProfileHeader />
|
||||
<Navigation />
|
||||
<div className="container">
|
||||
<div className="viewReport__info">
|
||||
<div className="view-report__info">
|
||||
{localStorage.getItem("role_status") !== "18" && (
|
||||
<>
|
||||
<ProfileBreadcrumbs
|
||||
@ -109,13 +109,13 @@ export const ViewReport = () => {
|
||||
{ name: "Просмотр отчета за день", link: "/profile/view" }
|
||||
]}
|
||||
/>
|
||||
<h2 className="viewReport__title">
|
||||
<h2 className="view-report__title">
|
||||
Ваши отчеты - <span>просмотр отчета за день</span>
|
||||
</h2>
|
||||
</>
|
||||
)}
|
||||
<Link
|
||||
className="viewReport__back"
|
||||
className="view-report__back"
|
||||
to={
|
||||
localStorage.getItem("role_status") === "18"
|
||||
? `/profile/employees/report/${params.id}`
|
||||
@ -126,8 +126,8 @@ export const ViewReport = () => {
|
||||
<p>Вернуться</p>
|
||||
</Link>
|
||||
{localStorage.getItem("role_status") !== "18" && (
|
||||
<div className="viewReport__bar">
|
||||
<button className="viewReport__bar__edit">Редактировать</button>
|
||||
<div className="view-report__bar">
|
||||
<button className="view-report__bar__edit">Редактировать</button>
|
||||
{deleteLoader ? (
|
||||
<Loader style={"green"} />
|
||||
) : (
|
||||
@ -135,8 +135,8 @@ export const ViewReport = () => {
|
||||
onClick={deleteReport}
|
||||
className={
|
||||
taskText.length
|
||||
? "viewReport__bar__delete"
|
||||
: "viewReport__bar__delete disable"
|
||||
? "view-report__bar__delete"
|
||||
: "view-report__bar__delete disable"
|
||||
}
|
||||
>
|
||||
Удалить отчет
|
||||
@ -145,14 +145,14 @@ export const ViewReport = () => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="viewReport__switch-date">
|
||||
<div className="view-report__switch-date">
|
||||
<div onClick={() => previousDay()}>
|
||||
<Link
|
||||
to={`/profile/calendar/view/${getCreatedDate(
|
||||
previousReportDay
|
||||
)}/${params.id}`}
|
||||
>
|
||||
<div className="viewReport__switch-date__prev switch-date">
|
||||
<div className="view-report__switch-date__prev switch-date">
|
||||
<img src={arrowSwitchDate} alt="arrow" />
|
||||
</div>
|
||||
</Link>
|
||||
@ -171,7 +171,7 @@ export const ViewReport = () => {
|
||||
params.id
|
||||
}`}
|
||||
>
|
||||
<div className={`viewReport__switch-date__next switch-date`}>
|
||||
<div className={`view-report__switch-date__next switch-date`}>
|
||||
<img src={arrowSwitchDate} alt="arrow" />
|
||||
</div>
|
||||
</Link>
|
||||
@ -179,9 +179,9 @@ export const ViewReport = () => {
|
||||
</div>
|
||||
{loader && <Loader width={75} height={75} />}
|
||||
{Boolean(taskText.length) && (
|
||||
<div className="viewReport__content">
|
||||
<div className="view-report__content">
|
||||
<div className="table__container">
|
||||
<table className="viewReport__done">
|
||||
<table className="view-report__done">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
@ -203,7 +203,7 @@ export const ViewReport = () => {
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<div className="viewReport__done__hours__item">
|
||||
<div className="view-report__done__hours__item">
|
||||
<span>{Math.floor(task.hours)}</span>
|
||||
<p className="hours">
|
||||
{hourOfNum(Math.floor(task.hours))}
|
||||
@ -225,7 +225,7 @@ export const ViewReport = () => {
|
||||
</table>
|
||||
</div>
|
||||
{Boolean(difficulties.length) && (
|
||||
<div className="viewReport__item">
|
||||
<div className="view-report__item">
|
||||
<h3>Какие сложности возникли?</h3>
|
||||
{difficulties.map((item, index) => {
|
||||
return <p key={index}>{item}</p>;
|
||||
@ -233,7 +233,7 @@ export const ViewReport = () => {
|
||||
</div>
|
||||
)}
|
||||
{Boolean(tomorrowTask.length) && (
|
||||
<div className="viewReport__item">
|
||||
<div className="view-report__item">
|
||||
<h3>Что планируется сделать завтра?</h3>
|
||||
{tomorrowTask.map((item, index) => {
|
||||
return <p key={index}>{item}</p>;
|
||||
@ -243,7 +243,7 @@ export const ViewReport = () => {
|
||||
</div>
|
||||
)}
|
||||
{!Boolean(taskText.length) && !loader && (
|
||||
<div className="viewReport__noTask">
|
||||
<div className="view-report__no-task">
|
||||
{localStorage.getItem("role_status") === "4" ? (
|
||||
<p>
|
||||
В этот день вы <span>не заполняли</span> отчет
|
||||
|
@ -1,8 +1,8 @@
|
||||
.viewReport {
|
||||
background: #F1F1F1;
|
||||
.view-report {
|
||||
background: #f1f1f1;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
font-family: 'LabGrotesque', sans-serif;
|
||||
font-family: "LabGrotesque", sans-serif;
|
||||
|
||||
.container {
|
||||
max-width: 1160px;
|
||||
@ -25,7 +25,7 @@
|
||||
line-height: 32px;
|
||||
color: #000000;
|
||||
span {
|
||||
color: #52B709;
|
||||
color: #52b709;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
@ -56,7 +56,7 @@
|
||||
&__bar {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
background: #FFFFFF;
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 20px 33px;
|
||||
align-items: center;
|
||||
@ -73,7 +73,7 @@
|
||||
}
|
||||
|
||||
&__edit {
|
||||
background: #E1FCCF;
|
||||
background: #e1fccf;
|
||||
border-radius: 44px;
|
||||
border: none;
|
||||
}
|
||||
@ -81,7 +81,7 @@
|
||||
&__delete {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
border: 1px dashed #8BCC60;
|
||||
border: 1px dashed #8bcc60;
|
||||
}
|
||||
|
||||
.disable {
|
||||
@ -124,7 +124,7 @@
|
||||
.switch-date {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: #8DC63F;
|
||||
background: #8dc63f;
|
||||
border-radius: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -169,7 +169,6 @@
|
||||
border-collapse: separate;
|
||||
border-spacing: 28px 0;
|
||||
|
||||
|
||||
@media (max-width: 1205px) {
|
||||
display: grid;
|
||||
border-collapse: collapse;
|
||||
@ -278,7 +277,7 @@
|
||||
|
||||
&__hours {
|
||||
width: 25%;
|
||||
background: #FFFFFF;
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 32px 40px 18px;
|
||||
display: flex;
|
||||
@ -323,7 +322,7 @@
|
||||
span {
|
||||
max-width: 48px;
|
||||
height: 48px;
|
||||
background: #8DC63F;
|
||||
background: #8dc63f;
|
||||
border-radius: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -360,7 +359,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 10px;
|
||||
background: #FFFFFF;
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
margin: 20px 0;
|
||||
padding: 15px;
|
||||
@ -390,9 +389,9 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__noTask {
|
||||
&__no-task {
|
||||
padding: 25px 10px;
|
||||
background: #FFFFFF;
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
|
||||
@ -407,7 +406,7 @@
|
||||
}
|
||||
|
||||
span {
|
||||
color: #8BCC60;
|
||||
color: #8bcc60;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user