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

Merge pull request #50 from apuc/fixes-report

Browse Source 
fixes
This commit is contained in:
NikoM1k 2023-02-17 14:20:30 +02:00 committed by GitHub
commit 740659e1f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 492 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.js
View File

@ -19,6 +19,9 @@ import {ResultPage} from './pages/quiz/ResultPage'
import {Profile} from './pages/Profile/Profile.js' import {Profile} from './pages/Profile/Profile.js'
import {Summary} from './pages/Summary/Summary' import {Summary} from './pages/Summary/Summary'
import {ViewReport} from './pages/ViewReport/ViewReport' import {ViewReport} from './pages/ViewReport/ViewReport'
import {Tracker} from './pages/Tracker/Tracker'
import {Payouts} from './pages/Payouts/Payouts'
import {Settings} from './pages/Settings/Settings'
import './fonts/stylesheet.css' import './fonts/stylesheet.css'
import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/css/bootstrap.min.css'
@ -58,6 +61,9 @@ const App = () => {
<Route exact path='calendar' element={<ProfileCalendar/>}/> <Route exact path='calendar' element={<ProfileCalendar/>}/>
<Route exact path='summary' element={<Summary/>}/> <Route exact path='summary' element={<Summary/>}/>
<Route exact path='view' element={<ViewReport/>}/> <Route exact path='view' element={<ViewReport/>}/>
<Route exact path='tracker' element={<Tracker/>}/>
<Route exact path='payouts' element={<Payouts/>}/>
<Route exact path='settings' element={<Settings/>}/>
</Route> </Route>
<Route path="*" element={<Navigate to="/" replace/>}/> <Route path="*" element={<Navigate to="/" replace/>}/>

15
src/components/Calendar/calendar.scss
View File

@ -95,6 +95,18 @@
box-shadow: 6px 5px 20px rgb(87 98 80 / 21%); box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
transform: scale(1.02); transform: scale(1.02);
} }
@media (max-width: 800px) {
width: auto;
height: auto;
padding: 15px;
white-space: nowrap;
}
@media (max-width: 590px) {
padding: 8px;
font-size: 12px;
}
} }
&__hours { &__hours {
@ -104,7 +116,8 @@
letter-spacing: normal; letter-spacing: normal;
line-height: 30px; line-height: 30px;
text-align: left; text-align: left;
margin-left: 68px; margin: 50px 0 0;
text-transform: capitalize;
span { span {
font-weight: 100; font-weight: 100;

280
src/components/Calendar/calendarComponent.scss
View File

@ -6,7 +6,7 @@
padding-left: 68px; padding-left: 68px;
padding-right: 54px; padding-right: 54px;
padding-top: 48px; padding-top: 48px;
padding-bottom: 94px; padding-bottom: 40px;
font-family: 'LabGrotesque', sans-serif; font-family: 'LabGrotesque', sans-serif;
&__header { &__header {
@ -20,6 +20,10 @@
letter-spacing: normal; letter-spacing: normal;
line-height: 30px; line-height: 30px;
text-align: left; text-align: left;
@media (max-width: 500px) {
font-size: 1.7em;
}
} }
&-box { &-box {
@ -42,6 +46,10 @@
text-align: left; text-align: left;
margin-left: 10px; margin-left: 10px;
cursor: pointer; cursor: pointer;
@media (max-width: 500px) {
font-size: 1.2em;
}
} }
} }
} }
@ -79,8 +87,9 @@
button { button {
margin: 0 auto; margin: 0 auto;
width: 125px; //width: 125px;
height: 42px; //height: 42px;
padding: 0 5px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05); box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 5px; border-radius: 5px;
border: 1px solid #c4c4c4; border: 1px solid #c4c4c4;
@ -94,35 +103,67 @@
text-align: center; text-align: center;
a { a {
display: flex;
align-items: center;
justify-content: center;
width: 115px;
height: 42px;
text-decoration: none; text-decoration: none;
color: #000000; color: #000000;
img {
width: 16px;
height: 16px;
margin: 0 10px 0 0;
}
@media (max-width: 1200px) {
width: 90px;
height: 40px;
}
@media (max-width: 968px) {
width: 62px;
height: 40px;
font-size: 10px;
img {
margin-right: 2px;
}
}
@media (max-width: 610px) {
img {
display: none;
}
width: auto;
height: auto;
}
}
@media (max-width: 610px) {
width: 55px;
height: 45px;
}
@media (max-width: 480px) {
width: 45px;
height: 35px;
} }
} }
} }
} }
@media (max-width: 1200px) {
.calendar-component {
&__form {
button {
width: 100px;
height: 40px;
}
}
}
}
@media (max-width: 968px) { @media (max-width: 968px) {
.calendar-component { .calendar-component {
margin-bottom: 40px; margin-bottom: 40px;
padding: 28px 0 48px 0; padding: 28px 10px 48px 10px;
&__header { &__header {
h3 { //h3 {
position: absolute; // position: absolute;
top: -10%; // top: -10%;
left: 25%; // left: 25%;
} //}
&-box { &-box {
margin-left: 20px; margin-left: 20px;
@ -132,114 +173,103 @@
&__rectangle { &__rectangle {
margin: 24px 0; margin: 24px 0;
} }
&__form {
button {
width: 72px;
height: 40px;
img {
display: none;
}
}
}
} }
} }
@media (max-width: 768px) { //@media (max-width: 768px) {
.calendar-component__form > button { // .calendar-component__form > button {
width: 70px; // width: 70px;
height: 40px; // height: 40px;
//
// img {
// display: none;
// }
// }
//}
img { //@media (max-width: 540.98px) {
display: none; // .calendar-component__form > button {
} // width: 68px;
} // height: 40px;
} // }
//}
@media (max-width: 540.98px) { //
.calendar-component__form > button { //@media (max-width: 520.98px) {
width: 68px; // .calendar-component__form > button {
height: 40px; // width: 66px;
} // height: 40px;
} // }
//}
@media (max-width: 520.98px) { //
.calendar-component__form > button { //@media (max-width: 500.98px) {
width: 66px; // .calendar-component__form > button {
height: 40px; // width: 64px;
} // height: 40px;
} // }
//}
@media (max-width: 500.98px) { //
.calendar-component__form > button { //@media (max-width: 480.98px) {
width: 64px; // .calendar-component__form > button {
height: 40px; // width: 60px;
} // height: 40px;
} // }
//}
@media (max-width: 480.98px) { //
.calendar-component__form > button { //@media (max-width: 460.98px) {
width: 60px; // .calendar-component__form > button {
height: 40px; // width: 56px;
} // height: 40px;
} // }
//}
@media (max-width: 460.98px) { //
.calendar-component__form > button { //@media (max-width: 440.98px) {
width: 56px; // .calendar-component__form > button {
height: 40px; // width: 52px;
} // height: 40px;
} // }
//}
@media (max-width: 440.98px) { //
.calendar-component__form > button { //@media (max-width: 428.98px) {
width: 52px; // .calendar-component__form > button {
height: 40px; // width: 50px;
} // height: 40px;
} // }
//}
@media (max-width: 428.98px) { //
.calendar-component__form > button { //@media (max-width: 414.98px) {
width: 50px; // .calendar-component__form > button {
height: 40px; // width: 49px;
} // height: 40px;
} // }
//}
@media (max-width: 414.98px) { //
.calendar-component__form > button { //@media (max-width: 395.98px) {
width: 49px; // .calendar-component__form > button {
height: 40px; // width: 46px;
} // height: 40px;
} // }
//}
@media (max-width: 395.98px) { //
.calendar-component__form > button { //@media (max-width: 350.98px) {
width: 46px; // .calendar-component__form > button {
height: 40px; // width: 44px;
} // height: 40px;
} // }
//}
@media (max-width: 350.98px) { //
.calendar-component__form > button { //@media (max-width: 349.98px) {
width: 44px; // .calendar-component__form > button {
height: 40px; // width: 42px;
} // height: 40px;
} // }
//}
@media (max-width: 349.98px) { //
.calendar-component__form > button { //@media (max-width: 346.98px) {
width: 42px; // .calendar-component__form > button {
height: 40px; // width: 40px;
} // height: 40px;
} // }
//}
@media (max-width: 346.98px) {
.calendar-component__form > button {
width: 40px;
height: 40px;
}
}
.calendar__icon { .calendar__icon {
margin-right: 10px; margin-right: 10px;

16
src/components/Calendar/calendarHelper.js
View File

@ -30,6 +30,18 @@ export function getReports(value) {
return getReports; return getReports;
} }
export function 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}`
}
}
export function currentMonth() { export function currentMonth() {
const currentMonth = moment().format('MMMM'); const currentMonth = moment().format('MMMM');
@ -40,6 +52,10 @@ export function currentMonthAndDay(day) {
return day.format('D MMMM'); return day.format('D MMMM');
} }
export function getCorrectDate(day) {
return `${new Date(day).getDate()}-${new Date(day).getMonth() + 1}-${new Date(day).getFullYear()}`
};
export function currentMonthAndDayReportPage() { export function currentMonthAndDayReportPage() {
return moment().format('D MMMM'); return moment().format('D MMMM');
} }

14
src/components/ProfileCalendar/ProfileCalendar.js
View File

@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import {useDispatch, useSelector} from 'react-redux' import {useDispatch, useSelector} from 'react-redux'
import {currentMonth, getReports} from '../Calendar/calendarHelper' import {getReports} from '../Calendar/calendarHelper'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import moment from "moment"; import moment from "moment";
@ -24,7 +24,6 @@ export const ProfileCalendar = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const profileInfo = useSelector(getProfileInfo) const profileInfo = useSelector(getProfileInfo)
const requestDates = useSelector(getRequestDates) const requestDates = useSelector(getRequestDates)
const [month, setMonth] = useState('');
const [value, setValue] = useState(moment()) const [value, setValue] = useState(moment())
const [reports, setReports] = useState([]); const [reports, setReports] = useState([]);
const [totalHours, setTotalHours] = useState(0); const [totalHours, setTotalHours] = useState(0);
@ -59,10 +58,6 @@ export const ProfileCalendar = () => {
}) })
}, [requestDates]); }, [requestDates]);
useEffect(() => {
setMonth(currentMonth)
}, [month]);
return ( return (
<div className='profile__calendar'> <div className='profile__calendar'>
<ProfileHeader/> <ProfileHeader/>
@ -71,7 +66,7 @@ export const ProfileCalendar = () => {
<div className='summary__info'> <div className='summary__info'>
<div className='summary__person'> <div className='summary__person'>
<img src={urlForLocal(profileInfo.photo)} className='summary__avatar' alt='avatar'/> <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> </div>
<Link to='/report'> <Link to='/report'>
<button className="calendar__btn" onClick={() => { <button className="calendar__btn" onClick={() => {
@ -84,10 +79,7 @@ export const ProfileCalendar = () => {
: :
<div className='row'> <div className='row'>
<div className='col-12 col-xl-12'> <div className='col-12 col-xl-12'>
<ProfileCalendarComponent setValueHandler={setValueHandler} value={value} reports={reports} /> <ProfileCalendarComponent setValueHandler={setValueHandler} value={value} reports={reports} totalHours={totalHours} />
<p className='calendar__hours'>
{month} : <span> {totalHours} часов </span>
</p>
</div> </div>
</div> </div>
} }

17
src/components/ProfileCalendar/ProfileCalendarComponent.js
View File

@ -3,7 +3,7 @@ import ellipse from '../../images/ellipse.png'
import rectangle from '../../images/rectangle__calendar.png' import rectangle from '../../images/rectangle__calendar.png'
import calendarIcon from '../../images/calendar_icon.png' import calendarIcon from '../../images/calendar_icon.png'
import moment from 'moment' import moment from 'moment'
import {calendarHelper, currentMonthAndDay, getReports} from '../Calendar/calendarHelper' import {calendarHelper, currentMonth, currentMonthAndDay, getReports} from '../Calendar/calendarHelper'
import {setReportDate, setRequestDate} from '../../redux/reportSlice'; import {setReportDate, setRequestDate} from '../../redux/reportSlice';
import {useDispatch} from "react-redux"; import {useDispatch} from "react-redux";
import {Link} from "react-router-dom"; import {Link} from "react-router-dom";
@ -11,18 +11,19 @@ import {Link} from "react-router-dom";
import 'moment/locale/ru' import 'moment/locale/ru'
import './../Calendar/calendarComponent.scss' import './../Calendar/calendarComponent.scss'
export const ProfileCalendarComponent = React.memo(({value, setValueHandler, reports}) => { export const ProfileCalendarComponent = React.memo(({value, setValueHandler, reports, totalHours}) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const [currentDay] = useState(moment()) const [currentDay] = useState(moment())
const [calendar, setCalendar] = useState([]) const [calendar, setCalendar] = useState([])
const [month, setMonth] = useState('');
useEffect(() => { useEffect(() => {
setCalendar(calendarHelper(value)) setCalendar(calendarHelper(value))
}, [value]) }, [value])
// function beforeToday(day) { useEffect(() => {
// return day.isBefore(new Date(), 'day') setMonth(value.format('MMMM'))
// } }, [month]);
function isToday(day) { function isToday(day) {
return day.isSame(new Date(), 'day') return day.isSame(new Date(), 'day')
@ -76,6 +77,9 @@ export const ProfileCalendarComponent = React.memo(({value, setValueHandler, rep
{prevMonth().format('MMMM')} {prevMonth().format('MMMM')}
</span> </span>
</div> </div>
<div className='calendar-component__header-box'>
<span>{value.format('YYYY')}</span>
</div>
<div className='calendar-component__header-box'> <div className='calendar-component__header-box'>
<img src={ellipse} alt='' /> <img src={ellipse} alt='' />
<span onClick={() => { <span onClick={() => {
@ -124,6 +128,9 @@ export const ProfileCalendarComponent = React.memo(({value, setValueHandler, rep
)} )}
</div> </div>
</div> </div>
<p className='calendar__hours'>
{month} : <span> {totalHours} часов </span>
</p>
</div> </div>
) )
}) })

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

@ -15,6 +15,10 @@
.summary__info { .summary__info {
padding-right: 25px; padding-right: 25px;
@media (max-width: 500px) {
padding-right: 5px;
}
} }
.loader { .loader {

10
src/components/ProfileHeader/ProfileHeader.js
View File

@ -55,14 +55,16 @@ export const ProfileHeader = () => {
<nav className='profileHeader__nav'> <nav className='profileHeader__nav'>
<NavLink end to={'/profile/summary'}>Резюме</NavLink> <NavLink end to={'/profile/summary'}>Резюме</NavLink>
<NavLink end to={'/profile'}>Отчетность</NavLink> <NavLink end to={'/profile'}>Отчетность</NavLink>
<NavLink end to={'/'}>Трекер</NavLink> <NavLink end to={'/profile/tracker'}>Трекер</NavLink>
<NavLink end to={'/'}>Выплаты</NavLink> <NavLink end to={'/profile/payouts'}>Выплаты</NavLink>
<NavLink end to={'/'}>Настройки</NavLink> <NavLink end to={'/profile/settings'}>Настройки</NavLink>
</nav> </nav>
<div className='profileHeader__personalInfo'> <div className='profileHeader__personalInfo'>
<h3 className='profileHeader__personalInfoName'>{profileInfo?.fio}</h3> <h3 className='profileHeader__personalInfoName'>{profileInfo?.fio}</h3>
<img src={profileInfo.photo ? urlForLocal(profileInfo.photo) : ""} className='profileHeader__personalInfoAvatar' alt='avatar'/> <NavLink end to={'/profile'}>
<img src={profileInfo.photo ? urlForLocal(profileInfo.photo) : ""} className='profileHeader__personalInfoAvatar' alt='avatar'/>
</NavLink>
</div> </div>
</div> </div>
</div> </div>

4
src/components/ProfileHeader/profileHeader.scss
View File

@ -71,6 +71,10 @@
font-size: 12px; font-size: 12px;
} }
} }
@media (max-width: 450px) {
column-gap: 8px;
}
} }
&__personalInfo { &__personalInfo {

18
src/components/ReportForm/ReportForm.js
View File

@ -2,6 +2,7 @@ import React, {useState, useEffect} from 'react'
import {useSelector} from 'react-redux' import {useSelector} from 'react-redux'
import {Link, useNavigate} from 'react-router-dom' import {Link, useNavigate} from 'react-router-dom'
import DatePicker, { registerLocale } from "react-datepicker" import DatePicker, { registerLocale } from "react-datepicker"
import {getCorrectDate, getCreatedDate} from '../Calendar/calendarHelper'
import ru from "date-fns/locale/ru" import ru from "date-fns/locale/ru"
registerLocale("ru", ru); registerLocale("ru", ru);
@ -27,18 +28,6 @@ const ReportForm = () => {
const navigate= useNavigate(); const navigate= useNavigate();
const reportDate = useSelector(getReportDate); const reportDate = useSelector(getReportDate);
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}`
}
};
useEffect(() => { useEffect(() => {
initListeners() initListeners()
}, []) }, [])
@ -130,7 +119,7 @@ const ReportForm = () => {
src={calendarIcon} src={calendarIcon}
alt='' alt=''
/> />
{getCreatedDate(startDate)} {getCorrectDate(startDate)}
</div> </div>
<DatePicker <DatePicker
className='datePicker' className='datePicker'
@ -184,9 +173,11 @@ const ReportForm = () => {
: input : input
}))}/> }))}/>
</div> </div>
{index > 0 &&
<div className='report-form__task-remove'> <div className='report-form__task-remove'>
<img onClick={() => deleteInput(index)} src={remove} alt=''/> <img onClick={() => deleteInput(index)} src={remove} alt=''/>
</div> </div>
}
</form> </form>
) )
})} })}
@ -196,7 +187,6 @@ const ReportForm = () => {
<span>Добавить еще </span> <span>Добавить еще </span>
</div> </div>
</div> </div>
<div className='col-4'></div>
</div> </div>
<div className='row'> <div className='row'>

60
src/components/ReportForm/reportForm.scss
View File

@ -18,6 +18,10 @@
border-radius: 12px; border-radius: 12px;
margin: 25px 0 80px; margin: 25px 0 80px;
padding: 50px 40px; padding: 50px 40px;
@media (max-width: 555px) {
padding: 25px 20px;
}
} }
.report__head { .report__head {
@ -53,6 +57,10 @@
letter-spacing: normal; letter-spacing: normal;
line-height: 48.74px; line-height: 48.74px;
text-align: left; text-align: left;
@media (max-width: 555px) {
font-size: 2.5em;
}
} }
h3 { h3 {
@ -65,6 +73,11 @@
text-align: left; text-align: left;
margin-top: 52px; margin-top: 52px;
margin-bottom: 35px; margin-bottom: 35px;
@media (max-width: 555px) {
margin-top: 25px;
margin-bottom: 15px;
}
} }
} }
@ -84,6 +97,7 @@
letter-spacing: normal; letter-spacing: normal;
line-height: normal; line-height: normal;
text-align: left; text-align: left;
cursor: pointer;
img { img {
margin-left: 20px; margin-left: 20px;
@ -102,7 +116,7 @@
font-style: normal; font-style: normal;
letter-spacing: normal; letter-spacing: normal;
line-height: 48.74px; line-height: 48.74px;
width: 40px; width: 12px;
} }
&-list { &-list {
@ -144,16 +158,25 @@
line-height: normal; line-height: normal;
text-align: left; text-align: left;
margin-bottom: 26px; margin-bottom: 26px;
white-space: nowrap;
} }
} }
&-title { &-title {
&--description { //&--description {
margin-left: 20px; // margin-left: 20px;
} //}
&--hours { &--hours {
margin-left: 330px; margin-left: 330px;
@media (max-width: 810px) {
margin-left: 125px;
}
@media (max-width: 610px) {
margin-left: 25px;
}
} }
} }
@ -161,6 +184,10 @@
margin-left: 20px; margin-left: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
img {
cursor: pointer;
}
} }
&-form { &-form {
@ -186,6 +213,14 @@
font-size: 1.8em; font-size: 1.8em;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
@media (max-width: 810px) {
width: 250px;
}
@media (max-width: 610px) {
width: 150px;
}
} }
} }
@ -200,6 +235,18 @@
outline: none; outline: none;
font-size: 1.8em; font-size: 1.8em;
text-align: center; text-align: center;
@media (max-width: 500px) {
width: 100px;
}
@media (max-width: 440px) {
width: 75px;
}
@media (max-width: 410px) {
width: 50px;
}
} }
} }
} }
@ -235,6 +282,11 @@
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
outline: none; outline: none;
@media (max-width: 610px) {
max-width: 460px;
width: 100%;
}
} }
} }

4
src/helper.js
View File

@ -3,7 +3,7 @@ export function createMarkup(text) {
} }
export function transformHtml(text) { export function transformHtml(text) {
let startHtml = {__html: text.split('<h2>').join('<br><h2>').split('<br>')}; let startHtml = {__html: text.split('<h4> || <h3> || <h2> || <h1>').join('<br><h2>').split('<br>')};
startHtml = startHtml.__html.filter((el) => startHtml = startHtml.__html.filter((el) =>
el !== null && el !== "" || el === 0 el !== null && el !== "" || el === 0
); );
@ -37,4 +37,4 @@ export const getToken = () => {
export const urlHasParams = (url) => url.indexOf('?') > 0 ? `${url}&${window.location.search.substr(1)}` : `${url}${window.location.search}`; export const urlHasParams = (url) => url.indexOf('?') > 0 ? `${url}&${window.location.search.substr(1)}` : `${url}${window.location.search}`;
export const urlForLocal = (url) => process.env.NODE_ENV === 'development' ? `https://itguild.info${url}` : url; export const urlForLocal = (url) => process.env.NODE_ENV === 'development' ? `https://itguild.info${url}` : url;

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__info'>
<div className='summary__person'> <div className='summary__person'>
<img src={profileInfo.photo ? urlForLocal(profileInfo.photo) : ''} className='summary__avatar' alt='avatar'/> <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> </div>
<div className='profile__items'> <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__info'>
<div className='summary__person'> <div className='summary__person'>
<img src={urlForLocal(profileInfo.photo)} className='summary__avatar' alt='avatar'/> <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> </div>
{!openGit && {!openGit &&
<button className='summary__git' onClick={() => setOpenGit(true)}>Git</button> <button className='summary__git' onClick={() => setOpenGit(true)}>Git</button>

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

@ -62,6 +62,10 @@
padding: 0 20px; padding: 0 20px;
min-height: 80px; min-height: 80px;
} }
@media (max-width: 500px) {
padding: 0 5px;
}
} }
&__person { &__person {
@ -72,6 +76,10 @@
@media (max-width: 690px) { @media (max-width: 690px) {
column-gap: 20px; column-gap: 20px;
} }
@media (max-width: 550px) {
column-gap: 10px;
}
} }
&__avatar { &__avatar {
@ -92,6 +100,14 @@
font-size: 16px; font-size: 16px;
line-height: 32px; line-height: 32px;
position: relative; position: relative;
white-space: nowrap;
@media (max-width: 915px) {
max-width: 220px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
@media (max-width: 690px) { @media (max-width: 690px) {
font-size: 14px; font-size: 14px;
@ -99,6 +115,18 @@
line-height: 15px; 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 { &:after {
content: ''; content: '';
position: absolute; 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 arrow from "../../images/right-arrow.png";
import arrowSwitchDate from "../../images/arrowViewReport.png"; import arrowSwitchDate from "../../images/arrowViewReport.png";
import {apiRequest} from "../../api/request";
import {getCorrectDate, getCreatedDate} from '../../components/Calendar/calendarHelper'
import './viewReport.scss' import './viewReport.scss'
import {apiRequest} from "../../api/request";
export const ViewReport = () => { 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 reportDate = useSelector(getReportDate);
const [taskText, setTaskText] = useState([]); const [taskText, setTaskText] = useState([]);
@ -91,7 +81,7 @@ export const ViewReport = () => {
<img src={arrow} alt='arrow'/><p>Вернуться</p> <img src={arrow} alt='arrow'/><p>Вернуться</p>
</Link> </Link>
<div className='viewReport__bar'> <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> <p className='viewReport__bar__hours'>Вами потрачено на работу : <span>{totalHours} часов</span></p>
{/*<div className='viewReport__bar__progressBar'>*/} {/*<div className='viewReport__bar__progressBar'>*/}
{/* <span></span>*/} {/* <span></span>*/}
@ -103,7 +93,7 @@ export const ViewReport = () => {
<div className='viewReport__switchDate__prev switchDate' onClick={() => previousDay()}> <div className='viewReport__switchDate__prev switchDate' onClick={() => previousDay()}>
<img src={arrowSwitchDate} alt='arrow'/> <img src={arrowSwitchDate} alt='arrow'/>
</div> </div>
<p>{getCreatedDate(reportDay)}</p> <p>{getCorrectDate(reportDay)}</p>
<div className={`viewReport__switchDate__next switchDate ${getCreatedDate(currentDay) === getCreatedDate(reportDay) ? 'disable' : ''}`} onClick={() => nextDay()}> <div className={`viewReport__switchDate__next switchDate ${getCreatedDate(currentDay) === getCreatedDate(reportDay) ? 'disable' : ''}`} onClick={() => nextDay()}>
<img src={arrowSwitchDate} alt='arrow'/> <img src={arrowSwitchDate} alt='arrow'/>
</div> </div>

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

@ -27,6 +27,10 @@
span { span {
color: #52B709; color: #52B709;
} }
@media (max-width: 500px) {
font-size: 18px;
}
} }
&__back { &__back {
@ -60,11 +64,20 @@
height: 72px; height: 72px;
justify-content: space-between; justify-content: space-between;
@media (max-width: 500px) {
column-gap: 0;
justify-content: space-between;
}
&__date { &__date {
font-weight: 500; font-weight: 500;
font-size: 22px; font-size: 22px;
line-height: 32px; line-height: 32px;
color: #000000; color: #000000;
@media (max-width: 500px) {
font-size: 16px;
}
} }
&__hours { &__hours {
@ -73,6 +86,10 @@
line-height: 32px; line-height: 32px;
color: #000000; color: #000000;
@media (max-width: 500px) {
font-size: 11px;
}
span { span {
color: #52B709; color: #52B709;
font-weight: 700; font-weight: 700;
@ -120,6 +137,11 @@
column-gap: 140px; column-gap: 140px;
align-items: center; align-items: center;
@media (max-width: 500px) {
column-gap: 0;
justify-content: space-between;
}
p { p {
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
@ -164,6 +186,10 @@
margin: 0 -28px; margin: 0 -28px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@media (max-width: 1205px) {
margin: 0;
}
} }
&__done { &__done {
@ -171,6 +197,58 @@
border-collapse: separate; border-collapse: separate;
border-spacing: 28px 0; 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 { th {
padding: 32px 40px; padding: 32px 40px;
background: white; background: white;
@ -179,6 +257,11 @@
font-size: 22px; font-size: 22px;
line-height: 32px; line-height: 32px;
color: #000000; color: #000000;
@media (max-width: 650px) {
font-size: 16px;
line-height: 20px;
}
} }
td { td {
@ -190,6 +273,16 @@
font-size: 12px; font-size: 12px;
line-height: 24px; line-height: 24px;
color: #000000; 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; font-size: 17px;
line-height: 32px; line-height: 32px;
color: #000000; 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; align-items: center;
min-width: 155px; 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 { span {
width: 48px; width: 48px;
height: 48px; height: 48px;
@ -240,6 +355,12 @@
font-size: 22px; font-size: 22px;
line-height: 32px; line-height: 32px;
color: #000000; color: #000000;
@media (max-width: 900px) {
width: 25px;
height: 25px;
font-size: 18px;
}
} }
p { p {
@ -266,16 +387,30 @@
margin: 25px 0; margin: 25px 0;
padding: 25px 35px; padding: 25px 35px;
@media (max-width: 650px) {
padding: 15px 20px;
}
h3 { h3 {
font-weight: 500; font-weight: 500;
font-size: 22px; font-size: 22px;
line-height: 32px; line-height: 32px;
@media (max-width: 650px) {
font-size: 16px;
line-height: 20px;
}
} }
p { p {
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 24px; line-height: 24px;
@media (max-width: 650px) {
font-size: 10px;
line-height: 18px;
}
} }
} }
@ -295,6 +430,10 @@
line-height: 32px; line-height: 32px;
color: #000000; color: #000000;
@media (max-width: 500px) {
font-size: 18px;
}
span { span {
color: #8BCC60; color: #8BCC60;
font-weight: 500; font-weight: 500;
@ -304,5 +443,9 @@
footer { footer {
margin-top: 70px; margin-top: 70px;
@media (max-width: 575px) {
margin-top: 0;
}
} }
} }