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

fixes

Browse Source
This commit is contained in:
Николай Полтщук
2023-02-17 15:19:49 +03:00
parent 4da9497531
commit 6b5eeb2942
20 changed files with 492 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/pages/Payouts/Payouts.js Normal file
View File

@ -0,0 +1,11 @@
import React from 'react';
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
export const Payouts = () => {
return (
<div className='payouts'>
<ProfileHeader />
</div>
)
};

2
src/pages/Profile/Profile.js
View File

@ -31,7 +31,7 @@ export const Profile = () => {
<div className='summary__info'>
<div className='summary__person'>
<img src={profileInfo.photo ? urlForLocal(profileInfo.photo) : ''} className='summary__avatar' alt='avatar'/>
<p className='summary__name'>{profileInfo.fio} {profileInfo.specification}</p>
<p className='summary__name'>{profileInfo.fio}, {profileInfo.specification} разработчик</p>
</div>
</div>
<div className='profile__items'>

11
src/pages/Settings/Settings.js Normal file
View File

@ -0,0 +1,11 @@
import React from 'react';
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
export const Settings = () => {
return (
<div className='settings'>
<ProfileHeader />
</div>
)
};

2
src/pages/Summary/Summary.js
View File

@ -34,7 +34,7 @@ export const Summary = () => {
<div className='summary__info'>
<div className='summary__person'>
<img src={urlForLocal(profileInfo.photo)} className='summary__avatar' alt='avatar'/>
<p className='summary__name'>{profileInfo.fio} {profileInfo.specification}</p>
<p className='summary__name'>{profileInfo.fio}, {profileInfo.specification} разработчик</p>
</div>
{!openGit &&
<button className='summary__git' onClick={() => setOpenGit(true)}>Git</button>

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

@ -62,6 +62,10 @@
padding: 0 20px;
min-height: 80px;
}
@media (max-width: 500px) {
padding: 0 5px;
}
}
&__person {
@ -72,6 +76,10 @@
@media (max-width: 690px) {
column-gap: 20px;
}
@media (max-width: 550px) {
column-gap: 10px;
}
}
&__avatar {
@ -92,6 +100,14 @@
font-size: 16px;
line-height: 32px;
position: relative;
white-space: nowrap;
@media (max-width: 915px) {
max-width: 220px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
@media (max-width: 690px) {
font-size: 14px;
@ -99,6 +115,18 @@
line-height: 15px;
}
@media (max-width: 640px) {
max-width: 180px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0;
}
@media (max-width: 450px) {
max-width: 120px;
}
&:after {
content: '';
position: absolute;

11
src/pages/Tracker/Tracker.js Normal file
View File

@ -0,0 +1,11 @@
import React from 'react';
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
export const Tracker = () => {
return (
<div className='tacker'>
<ProfileHeader />
</div>
)
};

18
src/pages/ViewReport/ViewReport.js
View File

@ -10,22 +10,12 @@ 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 './viewReport.scss'
import {apiRequest} from "../../api/request";
export const ViewReport = () => {
const getCreatedDate = (day) => {
if (day) {
return `${new Date(day).getFullYear()}-${new Date(day).getMonth() + 1}-${new Date(day).getDate()}`
} else {
const date = new Date();
const dd = String(date.getDate()).padStart(2, '0');
const mm = String(date.getMonth() + 1).padStart(2, '0');
const yyyy = date.getFullYear();
return `${yyyy}-${mm}-${dd}`
}
};
const reportDate = useSelector(getReportDate);
const [taskText, setTaskText] = useState([]);
@ -91,7 +81,7 @@ export const ViewReport = () => {
<img src={arrow} alt='arrow'/><p>Вернуться</p>
</Link>
<div className='viewReport__bar'>
<h3 className='viewReport__bar__date'>{getCreatedDate(reportDay)}</h3>
<h3 className='viewReport__bar__date'>{getCorrectDate(reportDay)}</h3>
<p className='viewReport__bar__hours'>Вами потрачено на работу : <span>{totalHours} часов</span></p>
{/*<div className='viewReport__bar__progressBar'>*/}
{/* <span></span>*/}
@ -103,7 +93,7 @@ export const ViewReport = () => {
<div className='viewReport__switchDate__prev switchDate' onClick={() => previousDay()}>
<img src={arrowSwitchDate} alt='arrow'/>
</div>
<p>{getCreatedDate(reportDay)}</p>
<p>{getCorrectDate(reportDay)}</p>
<div className={`viewReport__switchDate__next switchDate ${getCreatedDate(currentDay) === getCreatedDate(reportDay) ? 'disable' : ''}`} onClick={() => nextDay()}>
<img src={arrowSwitchDate} alt='arrow'/>
</div>

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

@ -27,6 +27,10 @@
span {
color: #52B709;
}
@media (max-width: 500px) {
font-size: 18px;
}
}
&__back {
@ -60,11 +64,20 @@
height: 72px;
justify-content: space-between;
@media (max-width: 500px) {
column-gap: 0;
justify-content: space-between;
}
&__date {
font-weight: 500;
font-size: 22px;
line-height: 32px;
color: #000000;
@media (max-width: 500px) {
font-size: 16px;
}
}
&__hours {
@ -73,6 +86,10 @@
line-height: 32px;
color: #000000;
@media (max-width: 500px) {
font-size: 11px;
}
span {
color: #52B709;
font-weight: 700;
@ -120,6 +137,11 @@
column-gap: 140px;
align-items: center;
@media (max-width: 500px) {
column-gap: 0;
justify-content: space-between;
}
p {
font-weight: 400;
font-size: 18px;
@ -164,6 +186,10 @@
margin: 0 -28px;
overflow: hidden;
position: relative;
@media (max-width: 1205px) {
margin: 0;
}
}
&__done {
@ -171,6 +197,58 @@
border-collapse: separate;
border-spacing: 28px 0;
@media (max-width: 1205px) {
display: grid;
border-collapse: collapse;
thead {
display: grid;
tr {
display: grid;
grid-template-columns: 74% calc(26% - 28px);
column-gap: 28px;
}
}
tbody {
display: grid;
tr {
display: grid;
grid-template-columns: 74% calc(26% - 28px);
column-gap: 28px;
}
}
}
@media (max-width: 900px) {
thead {
tr {
th {
padding: 15px;
}
}
}
tbody {
tr {
td {
padding: 15px;
display: flex;
justify-content: space-between;
}
}
}
}
@media (max-width: 650px) {
tr {
grid-template-columns: 74% calc(26% - 10px) !important;
column-gap: 10px !important;
}
}
th {
padding: 32px 40px;
background: white;
@ -179,6 +257,11 @@
font-size: 22px;
line-height: 32px;
color: #000000;
@media (max-width: 650px) {
font-size: 16px;
line-height: 20px;
}
}
td {
@ -190,6 +273,16 @@
font-size: 12px;
line-height: 24px;
color: #000000;
@media (max-width: 750px) {
font-size: 10px;
line-height: 18px;
}
@media (max-width: 465px) {
text-align: center;
line-height: 14px;
}
}
}
@ -203,6 +296,15 @@
font-size: 17px;
line-height: 32px;
color: #000000;
@media (max-width: 750px) {
font-size: 14px;
line-height: 20px;
}
@media (max-width: 575px) {
text-align: center;
}
}
}
@ -228,6 +330,19 @@
align-items: center;
min-width: 155px;
@media (max-width: 900px) {
column-gap: 0;
justify-content: space-between;
min-width: auto;
width: 100%;
}
@media (max-width: 575px) {
flex-direction: column;
justify-content: center;
row-gap: 10px;
}
span {
width: 48px;
height: 48px;
@ -240,6 +355,12 @@
font-size: 22px;
line-height: 32px;
color: #000000;
@media (max-width: 900px) {
width: 25px;
height: 25px;
font-size: 18px;
}
}
p {
@ -266,16 +387,30 @@
margin: 25px 0;
padding: 25px 35px;
@media (max-width: 650px) {
padding: 15px 20px;
}
h3 {
font-weight: 500;
font-size: 22px;
line-height: 32px;
@media (max-width: 650px) {
font-size: 16px;
line-height: 20px;
}
}
p {
font-weight: 400;
font-size: 12px;
line-height: 24px;
@media (max-width: 650px) {
font-size: 10px;
line-height: 18px;
}
}
}
@ -295,6 +430,10 @@
line-height: 32px;
color: #000000;
@media (max-width: 500px) {
font-size: 18px;
}
span {
color: #8BCC60;
font-weight: 500;
@ -304,5 +443,9 @@
footer {
margin-top: 70px;
@media (max-width: 575px) {
margin-top: 0;
}
}
}