finished mobile page calendar

This commit is contained in:
Hope87 2021-06-21 12:08:12 +03:00
parent 069e39c09a
commit 855744cf99
4 changed files with 286 additions and 4 deletions

View File

@ -10,7 +10,7 @@ const CandidatePage = lazy(() => import('./pages/CandidatePage'));
const CalendarPage = lazy(() => import('./pages/CalendarPage')); const CalendarPage = lazy(() => import('./pages/CalendarPage'));
const App = () => { const App = () => {
const [isAuth, setIsAuth] = useState(false); const [isAuth, setIsAuth] = useState(true);
return ( return (
<Router> <Router>

View File

@ -12,7 +12,7 @@ const Calendar = () => {
<h2 className={style.calendar__title}> <h2 className={style.calendar__title}>
Добрый день, <span>Александр !</span> Добрый день, <span>Александр !</span>
</h2> </h2>
<div className="col-xl-12 d-flex justify-content-between align-items-center"> <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}> <div className={style.calendarHeader__info}>
<img className={style.calendarHeader__info__img} src={calendarMale} alt="img" /> <img className={style.calendarHeader__info__img} src={calendarMale} alt="img" />
<h3 className={style.calendarHeader__info__name}> <h3 className={style.calendarHeader__info__name}>
@ -30,7 +30,7 @@ const Calendar = () => {
</div> </div>
<div className="row"> <div className="row">
<div className="col-12"> <div className="col-12 col-xl-12">
<CalendarComponent /> <CalendarComponent />
<p className={style.calendarFooter__text}> <p className={style.calendarFooter__text}>
Июнь : <span> 60 часов </span> Июнь : <span> 60 часов </span>

View File

@ -11,6 +11,56 @@
margin-bottom: 60px; margin-bottom: 60px;
} }
@media (max-width: 575.98px) {
.calendar__title {
font-size: 5em;
text-align: center;
margin: 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 { .calendar__title > span {
color: #52b709; color: #52b709;
font-style: normal; font-style: normal;
@ -26,6 +76,23 @@
height: 112px; height: 112px;
} }
@media (max-width: 575.98px) {
.calendarHeader__info {
width: 74%;
height: 94px;
margin-top: 142px;
margin-bottom: 40px;
}
}
@media (max-width: 375.98px) {
.calendarHeader__info {
width: 84%;
height: 94px;
margin-top: 112px;
}
}
.calendarHeader__info__img { .calendarHeader__info__img {
position: absolute; position: absolute;
width: 132px; width: 132px;
@ -34,6 +101,15 @@
top: -10px; top: -10px;
} }
@media (max-width: 575.98px) {
.calendarHeader__info__img {
position: absolute;
width: 110px;
height: 110px;
left: 0;
}
}
.calendarHeader__info__name { .calendarHeader__info__name {
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display';
font-size: 2em; font-size: 2em;
@ -58,6 +134,89 @@
text-align: left; text-align: left;
} }
@media (max-width: 575.98px) {
.calendarHeader__title__text {
position: absolute;
top: 0;
left: 10%;
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.8em;
}
}
@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: 575.98px) {
.calendarHeader__title__img {
position: absolute;
bottom: -40px;
left: 20%;
}
}
@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 > button { .calendarHeader__btn > button {
width: 280px; width: 280px;
height: 62px; height: 62px;

View File

@ -8,13 +8,20 @@
padding-bottom: 94px; padding-bottom: 94px;
} }
@media (max-width: 575.98px) {
.CalendarComponent {
margin-bottom: 40px;
padding: 28px 0 48px 0;
}
}
.CalendarComponent__header { .CalendarComponent__header {
display: flex; display: flex;
} }
.CalendarComponent__header > h3 { .CalendarComponent__header > h3 {
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display';
font-size: 25px; font-size: 2.5em;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
letter-spacing: normal; letter-spacing: normal;
@ -22,6 +29,12 @@
text-align: left; text-align: left;
} }
@media (max-width: 575.98px) {
.CalendarComponent__header > h3 {
font-size: 1.6em;
}
}
.CalendarComponent__header__box { .CalendarComponent__header__box {
display: flex; display: flex;
align-items: center; align-items: center;
@ -50,6 +63,12 @@
margin: 36px 0; margin: 36px 0;
} }
@media (max-width: 575.98px) {
.CalendarComponent__rectangle {
margin: 24px 0;
}
}
.CalendarComponent__rectangle > img { .CalendarComponent__rectangle > img {
width: 100%; width: 100%;
} }
@ -93,11 +112,115 @@
text-align: center; 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 { .calendarIcon {
margin-right: 10px; margin-right: 10px;
margin-top: -4px; margin-top: -4px;
} }
@media (max-width: 575.98px) {
.calendarIcon {
display: none;
}
}
.before { .before {
opacity: 0.2; opacity: 0.2;
} }