diff --git a/src/components/Calendar/calendarComponent.scss b/src/components/Calendar/calendarComponent.scss
index ba69a3c7..7aab544f 100644
--- a/src/components/Calendar/calendarComponent.scss
+++ b/src/components/Calendar/calendarComponent.scss
@@ -11,6 +11,49 @@
&__header {
display: flex;
+ justify-content: space-between;
+
+ @media (max-width: 560px) {
+ flex-direction: column;
+ row-gap: 15px;
+ }
+
+ &-info {
+ display: flex;
+
+ @media (max-width: 685px) {
+ font-size: 7px;
+ }
+
+ @media (max-width: 560px) {
+ font-size: 10px;
+ }
+
+ @media (max-width: 560px) {
+ justify-content: center;
+ }
+
+ .calendar__hours {
+ margin: 0 10px;
+ line-height: 0;
+ font-weight: 500;
+ display: flex;
+ align-items: center;
+ }
+ }
+
+ &-switcher {
+ display: flex;
+
+ @media (max-width: 590px) {
+ font-size: 8px;
+ }
+
+ @media (max-width: 560px) {
+ justify-content: center;
+ font-size: 12px;
+ }
+ }
h3 {
@@ -20,6 +63,7 @@
letter-spacing: normal;
line-height: 30px;
text-align: left;
+ margin-bottom: 0;
@media (max-width: 500px) {
font-size: 1.7em;
@@ -58,6 +102,10 @@
font-size: 1.2em;
}
}
+
+ @media (max-width: 560px) {
+ margin-left: 0 !important;
+ }
}
}
@@ -183,6 +231,12 @@
}
}
+@media (max-width: 560px) {
+ .calendar-component {
+ padding-top: 10px;
+ }
+}
+
//@media (max-width: 768px) {
// .calendar-component__form > button {
// width: 70px;
diff --git a/src/components/Calendar/calendarHelper.js b/src/components/Calendar/calendarHelper.js
index 30d8c7c7..73afcb39 100644
--- a/src/components/Calendar/calendarHelper.js
+++ b/src/components/Calendar/calendarHelper.js
@@ -60,3 +60,9 @@ export function getCorrectDate(day) {
export function currentMonthAndDayReportPage() {
return moment().format('D MMMM');
}
+
+export function hourOfNum(number) {
+ const hours = [' час', ' часа', ' часов'];
+ const cases = [2, 0, 1, 1, 1, 2];
+ return hours[(number % 100 > 4 && number % 100 < 20) ? 2 : cases[(number % 10 < 5) ? number % 10 : 5]];
+}
diff --git a/src/components/ProfileCalendar/ProfileCalendar.js b/src/components/ProfileCalendar/ProfileCalendar.js
index a81a2325..7bf845af 100644
--- a/src/components/ProfileCalendar/ProfileCalendar.js
+++ b/src/components/ProfileCalendar/ProfileCalendar.js
@@ -80,9 +80,11 @@ export const ProfileCalendar = () => {
{loader ?
-
+ {month} - {totalHours} {hourOfNum(totalHours)} +
- {month} : {totalHours} часов -
- Всего за день : {totalHours} часов + Всего за день : {totalHours} {hourOfNum(totalHours)}
{reportSuccess &&{reportSuccess}
diff --git a/src/components/ReportForm/reportForm.scss b/src/components/ReportForm/reportForm.scss index 635d4acf..62a29881 100644 --- a/src/components/ReportForm/reportForm.scss +++ b/src/components/ReportForm/reportForm.scss @@ -151,27 +151,29 @@ p { font-family: 'GT Eesti Pro Display'; - font-size: 1.3em; - font-weight: 100; + font-size: 1.5em; font-style: normal; letter-spacing: normal; line-height: normal; text-align: left; margin-bottom: 26px; white-space: nowrap; + + @media (max-width: 450px) { + font-size: 13px; + } } } &-title { //&--description { - // margin-left: 20px; //} &--hours { - margin-left: 330px; + margin-left: 310px; @media (max-width: 810px) { - margin-left: 125px; + margin-left: 100px; } @media (max-width: 610px) { @@ -202,6 +204,11 @@ margin-left: 20px; &--description { + + .checkTask { + border-color: #fc0000; + } + input { width: 460px; height: 42px; @@ -225,6 +232,18 @@ } &--hours { + @media (max-width: 610px) { + margin-left: 45px; + } + + @media (max-width: 450px) { + margin-left: 22px; + } + + .checkTask { + border-color: #fc0000; + } + input { width: 141px; height: 42px; @@ -257,8 +276,7 @@ span { font-family: 'GT Eesti Pro Display'; - font-size: 1.3em; - font-weight: 100; + font-size: 1.5em; font-style: normal; letter-spacing: normal; line-height: normal; diff --git a/src/pages/Summary/Summary.js b/src/pages/Summary/Summary.js index c496e028..63abf220 100644 --- a/src/pages/Summary/Summary.js +++ b/src/pages/Summary/Summary.js @@ -60,7 +60,7 @@ export const Summary = () => {