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

new design calendar and report

Browse Source
This commit is contained in:
Николай Полтщук 2023-01-13 15:53:07 +03:00
parent 1234427b12
commit 6315a4e7bb
13 changed files with 214 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.js
View File

@ -46,9 +46,9 @@ const App = () => {
path='/candidate/:id/form'
component={FormPage}
/>
<ProtectedRoute exact path='/report' component={ReportPage} />
<ProtectedRoute exact path='/profile/report' component={ReportPage} />
<ProtectedRoute path='/report/:id' component={SingleReportPage} />
<ProtectedRoute path='/ProfileCalendar' component={ProfileCalendarPage} />
<ProtectedRoute path='/profile/profilecalendar' component={ProfileCalendarPage} />
<ProtectedRoute path='/quiz' component={QuizPage} />
<ProtectedRoute
path='/quiz-interjacent'

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

@ -1,6 +1,6 @@
.calendar-component {
position: relative;
margin-top: 80px;
margin-top: 30px;
margin-bottom: 60px;
background-color: #f9f9f9;
padding-left: 68px;

6
src/components/Profile/profile.scss
View File

@ -49,6 +49,12 @@
border-radius: 12px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
transform: scale(1.02);
}
@media (max-width: 1175px) {
width: 48%;

5
src/components/Profile/profileHeader.scss
View File

@ -57,6 +57,11 @@
font-size: 18px;
line-height: 32px;
color: #807777 !important;
transition: all 0.3s ease;
&:hover {
color: #261a1a !important;
}
}
@media (max-width: 800px) {

12
src/components/Profile/summary.scss
View File

@ -121,6 +121,12 @@
line-height: 32px;
color: white;
border: none;
transition: all 0.3s ease;
&:hover {
box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
transform: scale(1.02);
}
@media (max-width: 690px) {
width: 120px;
@ -257,6 +263,12 @@
background: #FFFFFF;
border-radius: 12px;
padding: 35px 30px 30px 45px;
transition: all 0.3s ease;
&:hover {
box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
transform: scale(1.02);
}
@media (max-width: 825px) {
width: 100%;

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

@ -9,6 +9,7 @@ import moment from "moment";
import rectangle from '../../images/rectangle_secondPage.png'
import {currentMonth, getReports} from '../Calendar/calendarHelper'
import {ProfileCalendarComponent} from "./ProfileCalendarComponent";
import { ProfileHeader } from "../Profile/ProfileHeader";
import { Footer } from '../Footer/Footer'
import './profileCalendar.scss'
@ -48,33 +49,19 @@ export const ProfileCalendar = () => {
}, [month])
return (
<section className='calendar'>
<div className='profile__calendar'>
<Link className='calendar__back' to={`/profile`}>
<div><img src={arrow} alt=''/>Вернуться назад</div>
</Link>
<h2 className='calendar__profile'>
Добрый день, <span>{profileInfo.fio}</span>
</h2>
<div className='col-12 col-xl-12 d-flex justify-content-between align-items-center flex-column flex-sm-row'>
<div className='calendar__info'>
<img className='calendar__info-img' src={profileInfo.photo} alt='img' />
<h3 className='calendar__info-name'>{}</h3>
<div className='calendar'>
<ProfileHeader/>
<div className='container'>
<h2 className='summary__title'>Ваши отчеты</h2>
<div className='summary__info'>
<div className='summary__person'>
<img src={profileInfo.photo} className='summary__avatar' alt='avatar'/>
<p className='summary__name'>{profileInfo.fio} {profileInfo.specification}</p>
</div>
<div className='calendar__title'>
<h3 className='calendar__title-text'>{profileInfo.position_name}</h3>
<img className='calendar__title-img' src={rectangle} alt='img' />
</div>
<div>
<Link to='/report'>
<button className='calendar__btn' onClick={() => {
dispatch(setReportDate(value))
}}>Заполнить отчет за день</button>
<Link to='/profile/report'>
<button className="calendar__btn">Заполнить отчет за день</button>
</Link>
</div>
</div>
</div>
<div className='row'>
<div className='col-12 col-xl-12'>
<ProfileCalendarComponent reportsDates={reports} />
@ -83,7 +70,8 @@ export const ProfileCalendar = () => {
</p>
</div>
</div>
</div>
<Footer />
</section>
</div>
)
};

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

@ -85,7 +85,7 @@ export const ProfileCalendarComponent = ({reportsDates}) => {
<div className='calendar-component__form'>
{calendar.map((week) =>
week.map((day) => (
<Link to='/report'>
<Link to='/profile/report' key={day}>
<button
onClick={() => {
dispatch(setReportDate(day))

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

@ -1,5 +1,21 @@
.calendar {
font-family: 'LabGrotesque', sans-serif;
background: #F1F1F1;
height: 100%;
min-height: 100vh;
font-family: "LabGrotesque", sans-serif;
.container {
max-width: 1160px;
margin-top: 23px;
@media (max-width: 570px) {
margin-top: 0;
}
}
.summary__info {
padding-right: 25px;
}
.profile__calendar {
margin-top: 20px;
}
@ -17,4 +33,11 @@
&__profile {
margin-top: 42px;
}
&__btn {
transition: all 0.3s ease;
&:hover {
transform: scale(1.02);
}
}
}

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

@ -11,6 +11,8 @@ import ellipse from '../../images/ellipse.png'
import remove from '../../images/remove.png'
import addIcon from '../../images/addIcon.png'
import {currentMonthAndDay, getReports} from '../Calendar/calendarHelper'
import {ProfileHeader} from "../Profile/ProfileHeader";
import {Footer} from "../Footer/Footer";
import './reportForm.scss'
import arrow from "../../images/right-arrow.png";
@ -53,14 +55,21 @@ const ReportForm = () => {
return (
<section className='report-form'>
<div className='row'>
<div className='col-xl-12 report__head'>
<Link className='calendar__back' to={`/ProfileCalendar`}>
<div><img src={arrow} alt=''/>Вернуться назад</div>
<ProfileHeader/>
<div className='container'>
<h2 className='summary__title'>Ваши отчеты - <span>добавить отчет</span></h2>
<div>
<div className='report__head'>
<Link className='calendar__back' to={`/profile/profilecalendar`}>
<div><img src={arrow} alt=''/>Вернуться</div>
</Link>
</div>
</div>
<div className='report-form__content'>
<div className='report-form__block'>
<div className='report-form__block-title'>
<h2>Добавить отчет</h2>
<h2>Добавление отчета за день</h2>
<h3>Дата заполнения отчета:</h3>
</div>
<div className='report-form__block-img'>
@ -77,8 +86,6 @@ const ReportForm = () => {
<span>Какие задачи были выполнены?</span>
</div>
</div>
</div>
</div>
<div className='row'>
<div className='col-8'>
@ -188,6 +195,9 @@ const ReportForm = () => {
</div>
</div>
</div>
</div>
</div>
<Footer/>
</section>
)
};

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

@ -1,14 +1,33 @@
.report-form {
background: #F1F1F1;
height: 100%;
min-height: 100vh;
font-family: "LabGrotesque", sans-serif;
.container {
max-width: 1160px;
margin-top: 23px;
@media (max-width: 570px) {
margin-top: 0;
}
}
&__content {
background: #FFFFFF;
border-radius: 12px;
margin: 25px 0 80px;
padding: 50px 40px;
}
.report__head {
margin-top: 20px;
}
&__block-title {
margin-top: 15px;
h2 {
color: #282828;
color: #52B709;
font-family: 'GT Eesti Pro Display';
font-size: 3.3em;
font-weight: 700;

2
src/pages/Profile.js
View File

@ -28,7 +28,7 @@ export const Profile = () => {
</div>
</div>
<div className='profile__items'>
<Link to={'/ProfileCalendar'} className='item'>
<Link to={'/profile/profilecalendar'} className='item'>
<div className='item__about'>
<img src={reportsIcon} alt='report'/>
<h3>Ваша отчетность</h3>

2
src/pages/ProfileCalendarPage.js
View File

@ -3,7 +3,7 @@ import { WithLogout } from '../hoc/withLogout';
import { ProfileCalendar } from '../../src/components/ProfileCalendar/ProfileCalendar';
const ProfileCalendarPage = () => {
return <WithLogout><ProfileCalendar/></WithLogout>;
return <ProfileCalendar/>;
};
export default ProfileCalendarPage;

2
src/pages/ReportFormPage.js
View File

@ -2,6 +2,6 @@ import React from 'react';
import { WithLogout } from '../hoc/withLogout';
import ReportForm from '../components/ReportForm/ReportForm';
const ReportFormPage = () => <WithLogout><ReportForm /></WithLogout>;
const ReportFormPage = () => <ReportForm />;
export default ReportFormPage;