reports create, refactoring
This commit is contained in:
kurpfish
@ -1,61 +1,92 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { selectCurrentCandidate } from '../../redux/outstaffingSlice';
|
||||
import { Link } from 'react-router-dom';
|
||||
import style from './Calendar.module.css';
|
||||
import calendarMale from '../../images/medium_male.png';
|
||||
import rectangle from '../../images/rectangle_secondPage.png';
|
||||
import CalendarComponent from './CalendarComponent';
|
||||
import { currentMonth } from './calendarHelper';
|
||||
import { Footer } from '../Footer/Footer';
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { useDispatch, useSelector } from 'react-redux'
|
||||
import { selectCurrentCandidate, auth } from '../../redux/outstaffingSlice'
|
||||
import { Link, useHistory, useParams } from 'react-router-dom'
|
||||
import calendarMale from '../../images/medium_male.png'
|
||||
import rectangle from '../../images/rectangle_secondPage.png'
|
||||
import CalendarComponent from './CalendarComponent'
|
||||
import { currentMonth } from './calendarHelper'
|
||||
import { Footer } from '../Footer/Footer'
|
||||
|
||||
import { fetchReportList } from '../../server/server'
|
||||
import { getRole } from '../../redux/roleSlice'
|
||||
|
||||
import './calendar.scss'
|
||||
|
||||
const getDateParamString = ({ paramName, value }) => {
|
||||
return value ? `${paramName}=${value}` : ''
|
||||
}
|
||||
|
||||
const Calendar = () => {
|
||||
const candidateForCalendar = useSelector(selectCurrentCandidate);
|
||||
const dispatch = useDispatch()
|
||||
const candidateForCalendar = useSelector(selectCurrentCandidate)
|
||||
const role = useSelector(getRole)
|
||||
const { userId } = useParams()
|
||||
const [month, setMonth] = useState('')
|
||||
const [fromDate, setFromDate] = useState(null)
|
||||
const [toDate, setToDate] = useState(null)
|
||||
|
||||
const [month, setMonth] = useState('');
|
||||
const history = useHistory()
|
||||
|
||||
useEffect(() => {
|
||||
setMonth(currentMonth);
|
||||
}, [month]);
|
||||
fetchReportList({
|
||||
link: `${
|
||||
process.env.REACT_APP_API_URL
|
||||
}/api/reports/index?user_id=${userId}${getDateParamString({
|
||||
paramName: 'fromDate',
|
||||
value: fromDate
|
||||
})}${getDateParamString({
|
||||
paramName: 'toDate',
|
||||
value: toDate
|
||||
})}`,
|
||||
history,
|
||||
role,
|
||||
logout: () => dispatch(auth(false))
|
||||
})
|
||||
}, [])
|
||||
|
||||
const { name, skillsName, photo } = candidateForCalendar;
|
||||
useEffect(() => {
|
||||
setMonth(currentMonth)
|
||||
}, [month])
|
||||
|
||||
const abbreviatedName = name && name.substring(0, name.lastIndexOf(' '));
|
||||
const { name, skillsName, photo } = candidateForCalendar
|
||||
|
||||
const abbreviatedName = name && name.substring(0, name.lastIndexOf(' '))
|
||||
|
||||
return (
|
||||
<section className={style.calendar}>
|
||||
<div className="row">
|
||||
<h2 className={style.calendar__title}>
|
||||
Добрый день, <span>Александр !</span>
|
||||
</h2>
|
||||
<div className="col-12 col-xl-12 d-flex justify-content-between align-items-center flex-column flex-sm-row">
|
||||
<div className={style.calendarHeader__info}>
|
||||
<img className={style.calendarHeader__info__img} src={photo} alt="img" />
|
||||
<h3 className={style.calendarHeader__info__name}>{abbreviatedName}</h3>
|
||||
</div>
|
||||
<div className={style.calendarHeader__title}>
|
||||
<h3 className={style.calendarHeader__title__text}>{skillsName} разработчик</h3>
|
||||
<img className={style.calendarHeader__title__img} src={rectangle} alt="img" />
|
||||
</div>
|
||||
<div>
|
||||
<Link to="/report">
|
||||
<button className={style.calendarHeader__btn}>Заполнить отчет за день</button>
|
||||
</Link>
|
||||
</div>
|
||||
<section className='calendar'>
|
||||
<div className='row'>
|
||||
<h2 className='calendar__profile'>
|
||||
Добрый день, <span>Александр !</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={photo} alt='img' />
|
||||
<h3 className='calendar__info-name'>{abbreviatedName}</h3>
|
||||
</div>
|
||||
<div className='calendar__title'>
|
||||
<h3 className='calendar__title-text'>{skillsName} разработчик</h3>
|
||||
<img className='calendar__title-img' src={rectangle} alt='img' />
|
||||
</div>
|
||||
<div>
|
||||
<Link to='/report'>
|
||||
<button className='calendar__btn'>Заполнить отчет за день</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-12 col-xl-12">
|
||||
<CalendarComponent />
|
||||
<p className={style.calendarFooter__text}>
|
||||
{month} : <span> 60 часов </span>
|
||||
</p>
|
||||
</div>
|
||||
<div className='row'>
|
||||
<div className='col-12 col-xl-12'>
|
||||
<CalendarComponent />
|
||||
<p className='calendar__hours'>
|
||||
{month} : <span> 60 часов </span>
|
||||
</p>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
<Footer />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default Calendar;
|
||||
export default Calendar
|
||||
|
||||
@ -1,299 +0,0 @@
|
||||
.calendar {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.calendar__title {
|
||||
color: #282828;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 3.4em;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 48.74px;
|
||||
text-align: left;
|
||||
margin-top: 80px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.calendar__title {
|
||||
font-size: 5em;
|
||||
text-align: center;
|
||||
margin: 60px 0 40px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560.98px) {
|
||||
.calendar__title {
|
||||
font-size: 4.8em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 540.98px) {
|
||||
.calendar__title {
|
||||
font-size: 4.6em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520.98px) {
|
||||
.calendar__title {
|
||||
font-size: 4.4em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 486.98px) {
|
||||
.calendar__title {
|
||||
font-size: 4.2em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 466.98px) {
|
||||
.calendar__title {
|
||||
font-size: 4em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 446.98px) {
|
||||
.calendar__title {
|
||||
font-size: 3.8em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 425.98px) {
|
||||
.calendar__title {
|
||||
font-size: 3.6em;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar__title > span {
|
||||
color: #52b709;
|
||||
font-style: normal;
|
||||
letter-spacing: 0.56px;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.calendarHeader__info {
|
||||
background-color: #f9f9f9;
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 24%;
|
||||
height: 112px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.calendarHeader__info {
|
||||
width: 74%;
|
||||
height: 94px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375.98px) {
|
||||
.calendarHeader__info {
|
||||
width: 84%;
|
||||
height: 94px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.calendarHeader__info__img {
|
||||
position: absolute;
|
||||
width: 132px;
|
||||
height: 132px;
|
||||
left: -40px;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.calendarHeader__info__img {
|
||||
position: absolute;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.calendarHeader__info__name {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 2em;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 68%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.calendarHeader__title {
|
||||
margin-left: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 505.98px) {
|
||||
.calendarHeader__title {
|
||||
margin-left: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 455.98px) {
|
||||
.calendarHeader__title {
|
||||
margin-left: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375.98px) {
|
||||
.calendarHeader__title {
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 348.98px) {
|
||||
.calendarHeader__title {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.calendarHeader__title__text {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 2.7em;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 36px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.calendarHeader__title__text {
|
||||
font-size: 4.4em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 564.98px) {
|
||||
.calendarHeader__title__text {
|
||||
font-size: 4.2em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 544.98px) {
|
||||
.calendarHeader__title__text {
|
||||
font-size: 4em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 524.98px) {
|
||||
.calendarHeader__title__text {
|
||||
font-size: 3.6em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 504.98px) {
|
||||
.calendarHeader__title__text {
|
||||
font-size: 3.6em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 484.98px) {
|
||||
.calendarHeader__title__text {
|
||||
font-size: 3.4em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 464.98px) {
|
||||
.calendarHeader__title__text {
|
||||
font-size: 3.2em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 444.98px) {
|
||||
.calendarHeader__title__text {
|
||||
font-size: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375.98px) {
|
||||
.calendarHeader__title__text {
|
||||
font-size: 2.7em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 325.98px) {
|
||||
.calendarHeader__title__text {
|
||||
font-size: 2.7em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.calendarHeader__title__img {
|
||||
width: 60%;
|
||||
margin: 30px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 525.98px) {
|
||||
.calendarHeader__title__img {
|
||||
left: 15%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 414.98px) {
|
||||
.calendarHeader__title__img {
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375.98px) {
|
||||
.calendarHeader__title__img {
|
||||
left: 5%;
|
||||
}
|
||||
}
|
||||
|
||||
.calendarHeader__btn {
|
||||
width: 280px;
|
||||
height: 62px;
|
||||
box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
|
||||
border-radius: 31px;
|
||||
background-color: #ffffff;
|
||||
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
|
||||
linear-gradient(
|
||||
36deg,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 0.16) 47%,
|
||||
rgba(255, 255, 255, 0.17) 50%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
font-family: 'Muller';
|
||||
font-size: 1.6em;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendarFooter__text {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 2.2em;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
margin-left: 68px;
|
||||
}
|
||||
|
||||
.calendarFooter__text > span {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.calendar footer {
|
||||
margin-top: 2rem !important;
|
||||
}
|
||||
@ -1,69 +1,70 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import style from './CalendarComponent.module.css';
|
||||
import ellipse from '../../images/ellipse.png';
|
||||
import rectangle from '../../images/rectangle__calendar.png';
|
||||
import calendarIcon from '../../images/calendar_icon.png';
|
||||
import moment from 'moment';
|
||||
import 'moment/locale/ru';
|
||||
import { calendarHelper, currentMonthAndDay } from './calendarHelper';
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import ellipse from '../../images/ellipse.png'
|
||||
import rectangle from '../../images/rectangle__calendar.png'
|
||||
import calendarIcon from '../../images/calendar_icon.png'
|
||||
import moment from 'moment'
|
||||
import 'moment/locale/ru'
|
||||
import { calendarHelper, currentMonthAndDay } from './calendarHelper'
|
||||
|
||||
import './calendarComponent.scss'
|
||||
|
||||
const CalendarComponent = () => {
|
||||
const [value, setValue] = useState(moment());
|
||||
const [calendar, setCalendar] = useState([]);
|
||||
const [value, setValue] = useState(moment())
|
||||
const [calendar, setCalendar] = useState([])
|
||||
|
||||
useEffect(() => {
|
||||
setCalendar(calendarHelper(value));
|
||||
}, [value]);
|
||||
setCalendar(calendarHelper(value))
|
||||
}, [value])
|
||||
|
||||
function beforeToday(day) {
|
||||
return day.isBefore(new Date(), 'day');
|
||||
return day.isBefore(new Date(), 'day')
|
||||
}
|
||||
|
||||
function isToday(day) {
|
||||
return day.isSame(new Date(), 'day');
|
||||
return day.isSame(new Date(), 'day')
|
||||
}
|
||||
|
||||
function dayStyles(day) {
|
||||
if (beforeToday(day)) return `${style.before}`;
|
||||
if (isToday(day)) return `${style.today}`;
|
||||
if (day.day() === 6 || day.day() === 0) return `${style.selected}`;
|
||||
return '';
|
||||
if (beforeToday(day)) return `before`
|
||||
if (isToday(day)) return `today`
|
||||
if (day.day() === 6 || day.day() === 0) return `selected`
|
||||
return ''
|
||||
}
|
||||
|
||||
function prevMonth() {
|
||||
return value.clone().subtract(1, 'month');
|
||||
return value.clone().subtract(1, 'month')
|
||||
}
|
||||
|
||||
function nextMonth() {
|
||||
return value.clone().subtract(2, 'month');
|
||||
return value.clone().subtract(2, 'month')
|
||||
}
|
||||
|
||||
const prevMonthFirst = () => {
|
||||
return moment().subtract(1, 'month').format('MMMM');
|
||||
};
|
||||
return moment().subtract(1, 'month').format('MMMM')
|
||||
}
|
||||
const prevMonthSecond = () => {
|
||||
return moment().subtract(2, 'month').format('MMMM');
|
||||
};
|
||||
return moment().subtract(2, 'month').format('MMMM')
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={style.CalendarComponent}>
|
||||
<div className={style.CalendarComponent__header}>
|
||||
<div className='calendar-component'>
|
||||
<div className='calendar-component__header'>
|
||||
<h3>Мои отчеты</h3>
|
||||
<div className={style.CalendarComponent__header__box}>
|
||||
<img src={ellipse} alt="" />
|
||||
<div className='calendar-component__header-box'>
|
||||
<img src={ellipse} alt='' />
|
||||
<span onClick={() => setValue(prevMonth())}>{prevMonthFirst()}</span>
|
||||
</div>
|
||||
<div className={style.CalendarComponent__header__box}>
|
||||
<img src={ellipse} alt="" />
|
||||
<div className='calendar-component__header-box'>
|
||||
<img src={ellipse} alt='' />
|
||||
<span onClick={() => setValue(nextMonth())}>{prevMonthSecond()}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={style.CalendarComponent__rectangle}>
|
||||
<img src={rectangle} alt="" />
|
||||
<div className='calendar-component__rectangle'>
|
||||
<img src={rectangle} alt='' />
|
||||
</div>
|
||||
|
||||
<div className={style.CalendarComponent__body}>
|
||||
<div className='calendar-component__body'>
|
||||
<div>
|
||||
<p>Пн</p>
|
||||
<p>Вт</p>
|
||||
@ -74,7 +75,7 @@ const CalendarComponent = () => {
|
||||
<p>Вс</p>
|
||||
</div>
|
||||
|
||||
<div className={style.CalendarComponent__form}>
|
||||
<div className='calendar-component__form'>
|
||||
{calendar.map((week) =>
|
||||
week.map((day) => (
|
||||
<button
|
||||
@ -82,9 +83,9 @@ const CalendarComponent = () => {
|
||||
key={day}
|
||||
className={dayStyles(day)}
|
||||
name={day.format('dddd')}
|
||||
id="btn"
|
||||
id='btn'
|
||||
>
|
||||
<img className={style.calendarIcon} src={calendarIcon} alt="" />
|
||||
<img className={'calendar__icon'} src={calendarIcon} alt='' />
|
||||
{currentMonthAndDay(day)}
|
||||
</button>
|
||||
))
|
||||
@ -92,7 +93,7 @@ const CalendarComponent = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default CalendarComponent;
|
||||
export default CalendarComponent
|
||||
|
||||
@ -1,244 +0,0 @@
|
||||
.CalendarComponent {
|
||||
position: relative;
|
||||
margin-top: 80px;
|
||||
margin-bottom: 60px;
|
||||
background-color: #f9f9f9;
|
||||
padding-left: 68px;
|
||||
padding-right: 54px;
|
||||
padding-top: 48px;
|
||||
padding-bottom: 94px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.CalendarComponent {
|
||||
margin-bottom: 40px;
|
||||
padding: 28px 0 48px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.CalendarComponent__header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.CalendarComponent__header > h3 {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 2.5em;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.CalendarComponent__header > h3 {
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
left: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
.CalendarComponent__header__box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.CalendarComponent__header__box {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.CalendarComponent__header__box > img {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.CalendarComponent__header__box > span {
|
||||
color: #18586e;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.6em;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 16.81px;
|
||||
text-align: left;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.CalendarComponent__rectangle {
|
||||
margin: 36px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.CalendarComponent__rectangle {
|
||||
margin: 24px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.CalendarComponent__rectangle > img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.CalendarComponent__body > div {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.CalendarComponent__body > div > p {
|
||||
color: #398208;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 25px;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.CalendarComponent__form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.CalendarComponent__form > button {
|
||||
width: 125px;
|
||||
height: 42px;
|
||||
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
|
||||
border-radius: 5px;
|
||||
border: 1px solid #c4c4c4;
|
||||
background-color: #ffffff;
|
||||
margin-top: 20px;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.2em;
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: normal;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.CalendarComponent__form > button {
|
||||
width: 72px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560.98px) {
|
||||
.CalendarComponent__form > button {
|
||||
width: 70px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 540.98px) {
|
||||
.CalendarComponent__form > button {
|
||||
width: 68px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520.98px) {
|
||||
.CalendarComponent__form > button {
|
||||
width: 66px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500.98px) {
|
||||
.CalendarComponent__form > button {
|
||||
width: 64px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480.98px) {
|
||||
.CalendarComponent__form > button {
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 460.98px) {
|
||||
.CalendarComponent__form > button {
|
||||
width: 56px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 440.98px) {
|
||||
.CalendarComponent__form > button {
|
||||
width: 52px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 428.98px) {
|
||||
.CalendarComponent__form > button {
|
||||
width: 50px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 414.98px) {
|
||||
.CalendarComponent__form > button {
|
||||
width: 49px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 395.98px) {
|
||||
.CalendarComponent__form > button {
|
||||
width: 46px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 350.98px) {
|
||||
.CalendarComponent__form > button {
|
||||
width: 44px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 349.98px) {
|
||||
.CalendarComponent__form > button {
|
||||
width: 42px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 346.98px) {
|
||||
.CalendarComponent__form > button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.calendarIcon {
|
||||
margin-right: 10px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.calendarIcon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.before {
|
||||
background-color: #f0f7e0 !important;
|
||||
}
|
||||
|
||||
.today {
|
||||
font-weight: bold !important;
|
||||
border: 1px solid #398208 !important;
|
||||
}
|
||||
|
||||
.selected {
|
||||
background-color: #f9f9c3 !important;
|
||||
}
|
||||
301
src/components/Calendar/calendar.scss
Normal file
301
src/components/Calendar/calendar.scss
Normal file
@ -0,0 +1,301 @@
|
||||
.calendar {
|
||||
margin-bottom: 40px;
|
||||
|
||||
&__profile {
|
||||
color: #282828;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 3.4em;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 48.74px;
|
||||
text-align: left;
|
||||
margin-top: 80px;
|
||||
margin-bottom: 60px;
|
||||
|
||||
span {
|
||||
color: #52b709;
|
||||
font-style: normal;
|
||||
letter-spacing: 0.56px;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
background-color: #f9f9f9;
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 24%;
|
||||
height: 112px;
|
||||
|
||||
&-name {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 2em;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 68%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
&-img {
|
||||
position: absolute;
|
||||
width: 132px;
|
||||
height: 132px;
|
||||
left: -40px;
|
||||
top: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
&-text {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 2.7em;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 36px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
&__btn {
|
||||
width: 280px;
|
||||
height: 62px;
|
||||
box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
|
||||
border-radius: 31px;
|
||||
background-color: #ffffff;
|
||||
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
|
||||
linear-gradient(
|
||||
36deg,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 0.16) 47%,
|
||||
rgba(255, 255, 255, 0.17) 50%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
font-family: 'Muller';
|
||||
font-size: 1.6em;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__hours {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 2.2em;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
margin-left: 68px;
|
||||
|
||||
span {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 2rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.calendar__profile {
|
||||
font-size: 5em;
|
||||
text-align: center;
|
||||
margin: 60px 0 40px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560.98px) {
|
||||
.calendar__profile {
|
||||
font-size: 4.8em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 540.98px) {
|
||||
.calendar__profile {
|
||||
font-size: 4.6em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520.98px) {
|
||||
.calendar__profile {
|
||||
font-size: 4.4em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 486.98px) {
|
||||
.calendar__profile {
|
||||
font-size: 4.2em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 466.98px) {
|
||||
.calendar__profile {
|
||||
font-size: 4em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 446.98px) {
|
||||
.calendar__profile {
|
||||
font-size: 3.8em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 425.98px) {
|
||||
.calendar__profile {
|
||||
font-size: 3.6em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.calendar__info {
|
||||
width: 74%;
|
||||
height: 94px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375.98px) {
|
||||
.calendar__info {
|
||||
width: 84%;
|
||||
height: 94px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.calendar__info-img {
|
||||
position: absolute;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.calendar__title {
|
||||
margin-left: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 505.98px) {
|
||||
.calendarHeader__title {
|
||||
margin-left: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 455.98px) {
|
||||
.calendar__title {
|
||||
margin-left: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375.98px) {
|
||||
.calendar__title {
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 348.98px) {
|
||||
.calendar__title {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.calendar__title-text {
|
||||
font-size: 4.4em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 564.98px) {
|
||||
.calendar__title-text {
|
||||
font-size: 4.2em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 544.98px) {
|
||||
.calendar__title-text {
|
||||
font-size: 4em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 524.98px) {
|
||||
.calendar__title-text {
|
||||
font-size: 3.6em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 504.98px) {
|
||||
.calendar__title-text {
|
||||
font-size: 3.6em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 484.98px) {
|
||||
.calendar__title-text {
|
||||
font-size: 3.4em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 464.98px) {
|
||||
.calendar__title-text {
|
||||
font-size: 3.2em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 444.98px) {
|
||||
.calendar__title-text {
|
||||
font-size: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375.98px) {
|
||||
.calendar__title-text {
|
||||
font-size: 2.7em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 325.98px) {
|
||||
.calendar__title-text {
|
||||
font-size: 2.7em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.calendar__title-img {
|
||||
width: 60%;
|
||||
margin: 30px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 525.98px) {
|
||||
.calendar__title-img {
|
||||
left: 15%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 414.98px) {
|
||||
.calendar__title-img {
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375.98px) {
|
||||
.calendar__title-img {
|
||||
left: 5%;
|
||||
}
|
||||
}
|
||||
263
src/components/Calendar/calendarComponent.scss
Normal file
263
src/components/Calendar/calendarComponent.scss
Normal file
@ -0,0 +1,263 @@
|
||||
.calendar-component {
|
||||
position: relative;
|
||||
margin-top: 80px;
|
||||
margin-bottom: 60px;
|
||||
background-color: #f9f9f9;
|
||||
padding-left: 68px;
|
||||
padding-right: 54px;
|
||||
padding-top: 48px;
|
||||
padding-bottom: 94px;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
|
||||
h3 {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 2.5em;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 40px;
|
||||
|
||||
img {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #18586e;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.6em;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 16.81px;
|
||||
text-align: left;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__rectangle {
|
||||
margin: 36px 0;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
div {
|
||||
display: grid;
|
||||
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
|
||||
p {
|
||||
color: #398208;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 25px;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
button {
|
||||
margin: 0 auto;
|
||||
width: 125px;
|
||||
height: 42px;
|
||||
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
|
||||
border-radius: 5px;
|
||||
border: 1px solid #c4c4c4;
|
||||
background-color: #ffffff;
|
||||
margin-top: 20px;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.2em;
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: normal;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.calendar-component {
|
||||
&__form {
|
||||
button {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 968px) {
|
||||
.calendar-component {
|
||||
margin-bottom: 40px;
|
||||
padding: 28px 0 48px 0;
|
||||
|
||||
&__header {
|
||||
h3 {
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
&-box {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&__rectangle {
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
&__form {
|
||||
button {
|
||||
width: 72px;
|
||||
height: 40px;
|
||||
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.calendar-component__form > button {
|
||||
width: 70px;
|
||||
height: 40px;
|
||||
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 540.98px) {
|
||||
.calendar-component__form > button {
|
||||
width: 68px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520.98px) {
|
||||
.calendar-component__form > button {
|
||||
width: 66px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500.98px) {
|
||||
.calendar-component__form > button {
|
||||
width: 64px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480.98px) {
|
||||
.calendar-component__form > button {
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 460.98px) {
|
||||
.calendar-component__form > button {
|
||||
width: 56px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 440.98px) {
|
||||
.calendar-component__form > button {
|
||||
width: 52px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 428.98px) {
|
||||
.calendar-component__form > button {
|
||||
width: 50px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 414.98px) {
|
||||
.calendar-component__form > button {
|
||||
width: 49px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 395.98px) {
|
||||
.calendar-component__form > button {
|
||||
width: 46px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 350.98px) {
|
||||
.calendar-component__form > button {
|
||||
width: 44px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 349.98px) {
|
||||
.calendar-component__form > button {
|
||||
width: 42px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 346.98px) {
|
||||
.calendar-component__form > button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar__icon {
|
||||
margin-right: 10px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.calendar__icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.before {
|
||||
background-color: #f0f7e0 !important;
|
||||
}
|
||||
|
||||
.today {
|
||||
font-weight: bold !important;
|
||||
border: 1px solid #398208 !important;
|
||||
}
|
||||
|
||||
.selected {
|
||||
background-color: #f9f9c3 !important;
|
||||
}
|
||||
Reference in New Issue
Block a user