diff --git a/src/components/Calendar/calendarComponent.scss b/src/components/Calendar/calendarComponent.scss index 76a82abb..e66d47e4 100644 --- a/src/components/Calendar/calendarComponent.scss +++ b/src/components/Calendar/calendarComponent.scss @@ -117,25 +117,45 @@ } &__body { - div { + &__week-days { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + @media (max-width: 680px) { + display: none; + } + p { color: #9babc5; font-size: 14px; font-weight: 500; text-align: center; } + + &-mobile { + display: none; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + + @media (max-width: 680px) { + display: grid; + } + + p { + color: #9babc5; + font-size: 14px; + font-weight: 500; + text-align: center; + } + } } margin: 20px 0 20px; } &__form { - display: flex; - flex-wrap: wrap; + display: grid; + grid-template-columns: repeat(7, 1fr); justify-content: space-between; button { @@ -205,12 +225,10 @@ @media (max-width: 550px) { width: 60px; - height: 35px; } @media (max-width: 450px) { width: 45px; - height: 35px; } } } @@ -265,6 +283,11 @@ } .form-box { background-color: #fafbfe; + padding: 0 10px; + + @media (max-width: 450px) { + padding: 0; + } .form-hours { color: #6dd077; @@ -284,6 +307,11 @@ font-weight: 700; font-size: 14px; margin: auto; + + @media (max-width: 680px) { + font-weight: 700; + font-size: 10px; + } } } .form-hours::before { diff --git a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx index 8fec8c6b..2452fdfa 100644 --- a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx +++ b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx @@ -223,7 +223,7 @@ export const ProfileCalendarComponent = React.memo(
Понедельник
Вторник
Среда
@@ -232,6 +232,15 @@ export const ProfileCalendarComponent = React.memo(Суббота
Воскресенье
ПН
+ВТ
+СР
+ЧТ
+ПТ
+СБ
+ВС
+