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(

Суббота

Воскресенье

+
+

ПН

+

ВТ

+

СР

+

ЧТ

+

ПТ

+

СБ

+

ВС

+
{calendar.map((week) => diff --git a/src/components/ProfileCalendar/profileCalendar.scss b/src/components/ProfileCalendar/profileCalendar.scss index adcc8688..cf16b619 100644 --- a/src/components/ProfileCalendar/profileCalendar.scss +++ b/src/components/ProfileCalendar/profileCalendar.scss @@ -19,8 +19,13 @@ .summary__info { padding-right: 25px; - @media (max-width: 500px) { - padding-right: 5px; + @media (max-width: 760px) { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + row-gap: 25px; + padding: 25px; } .summary__person {