From 0bdac1015a6a98b4c90db66e83ff2819206573ec Mon Sep 17 00:00:00 2001 From: dartmew Date: Fri, 29 Nov 2024 00:01:46 +0300 Subject: [PATCH] css styles updates (#54) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Некоторые изменения по стилям css --- frontend/src/components/Calendar/ExitBtn.jsx | 2 +- .../src/components/Calendar/LessonTimes.jsx | 18 ++++++------- frontend/src/components/Header/Header.js | 7 +++-- frontend/src/style/calendar.scss | 26 ++++++++++++------- frontend/src/style/header.scss | 23 +++++++++------- frontend/src/utils/dateUtils.js | 8 ++++++ 6 files changed, 51 insertions(+), 33 deletions(-) diff --git a/frontend/src/components/Calendar/ExitBtn.jsx b/frontend/src/components/Calendar/ExitBtn.jsx index 6c0008a..f0e8ce2 100644 --- a/frontend/src/components/Calendar/ExitBtn.jsx +++ b/frontend/src/components/Calendar/ExitBtn.jsx @@ -1,6 +1,6 @@ import React from 'react'; import {useNavigate} from "react-router-dom"; -import cross from "../../img/arrow.png"; +import cross from "../../img/cross.png"; const ExitBtn = () => { const navigate = useNavigate(); diff --git a/frontend/src/components/Calendar/LessonTimes.jsx b/frontend/src/components/Calendar/LessonTimes.jsx index 0ccd2d1..de006e9 100644 --- a/frontend/src/components/Calendar/LessonTimes.jsx +++ b/frontend/src/components/Calendar/LessonTimes.jsx @@ -13,12 +13,12 @@ const LessonTimes = ({ events, selectedEvent, setSelectedEvent }) => { // Массив временных интервалов пар, начиная с 10:00 const lessonTimesArray = [ - "10:00 - 11:30", // 1 пара - "12:00 - 13:30", // 2 пара - "13:45 - 15:15", // 3 пара - "15:30 - 17:00", // 4 пара - "17:10 - 18:40", // 5 пара - "18:50 - 20:20" // 6 пара + "10:00 11:30", // 1 пара + "12:00 13:30", // 2 пара + "13:45 15:15", // 3 пара + "15:30 17:00", // 4 пара + "17:10 18:40", // 5 пара + "18:50 20:20" // 6 пара ]; const populateWeekDays = (events) => { @@ -79,9 +79,9 @@ const LessonTimes = ({ events, selectedEvent, setSelectedEvent }) => { const lessonEndFormatted = formatDateToAMPM(lessonEndTime); return ( - lessonStartFormatted === timeSlot.split(' - ')[0] || - lessonEndFormatted === timeSlot.split(' - ')[1] || - (lessonStartFormatted >= timeSlot.split(' - ')[0] && lessonEndFormatted <= timeSlot.split(' - ')[1]) + lessonStartFormatted === timeSlot.split(' ')[0] || + lessonEndFormatted === timeSlot.split(' ')[1] || + (lessonStartFormatted >= timeSlot.split(' ')[0] && lessonEndFormatted <= timeSlot.split(' ')[1]) ); }); return ( diff --git a/frontend/src/components/Header/Header.js b/frontend/src/components/Header/Header.js index 34fadab..3ee9af8 100644 --- a/frontend/src/components/Header/Header.js +++ b/frontend/src/components/Header/Header.js @@ -18,10 +18,9 @@ export default function Header() { - +
+ +
diff --git a/frontend/src/style/calendar.scss b/frontend/src/style/calendar.scss index aae8259..a9e8393 100644 --- a/frontend/src/style/calendar.scss +++ b/frontend/src/style/calendar.scss @@ -1,7 +1,7 @@ .deadline { &-info { //height: 28px; - margin-top: 6px; + margin-top: 2px; //width: 95%; text-align: left; padding: 5px 11px; @@ -13,6 +13,8 @@ font-weight: 700; font-size: 13px; transition: color 0.3s linear; + height: 95%; + width: 95%; &:hover { cursor: pointer; color: #F46386; @@ -50,9 +52,7 @@ } .days { - padding-left: 30px; - padding-bottom: 10px; - padding-top: 10px; + padding: 5px; font-family: "Unbounded", sans-serif; font-weight: 500; font-size: 13px; @@ -75,9 +75,10 @@ .vertical-deadline { vertical-align: top; + text-align: center; height: 72px; width: 195px; - padding-left: 20px; + padding: 1px 4px; border-bottom: 1px dotted #adadad; &-heading { padding-left: 47px; @@ -97,11 +98,15 @@ } .vertical { - height: 72px; + height: 80px; width: 195px; - padding-left: 20px; + padding: 1px 4px; border-bottom: 1px dotted #adadad; + text-align: center; + vertical-align: middle; &-heading { + text-align: right; + vertical-align: top; padding-left: 47px; padding-top: 7px; padding-bottom: 7px; @@ -153,6 +158,7 @@ } .company-name { + margin-top: 7px; vertical-align: top; font-family: "Roboto", sans-serif; font-weight: 500; @@ -171,7 +177,7 @@ .netology-lesson { display: flex; flex-direction: column; - justify-content: space-evenly; + justify-content: flex-start; padding-left: 12px; text-align: left; width: 95%; @@ -187,8 +193,8 @@ .TyumGU-lesson { display: flex; flex-direction: column; - justify-content: space-evenly; - padding: 12px; + justify-content: flex-start; + padding-left: 12px; text-align: left; //width: 95%; height: 95%; diff --git a/frontend/src/style/header.scss b/frontend/src/style/header.scss index 2398916..21e2195 100644 --- a/frontend/src/style/header.scss +++ b/frontend/src/style/header.scss @@ -10,8 +10,9 @@ } .header { - max-width: 80%; - margin: auto; + max-width: 100%; + margin-left: 10%; + margin-right: 3%; &-line { display: flex; @@ -72,6 +73,7 @@ &-first-word { font-family: "Roboto", sans-serif; font-weight: 400; + font-size: 13px; } } } @@ -90,6 +92,7 @@ .export-btn { cursor: pointer; + margin-left: 18px; height: 28px; background-color: #5856d6; color: #fff; @@ -99,8 +102,8 @@ padding: 4px 8px; font-family: "Roboto", sans-serif; font-weight: 400; + font-size: 13px; font-style: normal; - margin-left: 18px; transition: color 0.2s linear; &:hover { @@ -142,8 +145,7 @@ font-family: "Roboto", sans-serif; font-weight: 400; font-size: 13px; - - &-cross { + &-cross{ margin-left: 7px; } } @@ -153,8 +155,6 @@ } .name-event { - margin-top: 26px; - &-text { color: #2c2d2e; font-family: "Unbounded", sans-serif; @@ -163,9 +163,14 @@ } } -.task-event { - margin-top: 7px; +a { + text-decoration: none; +} + +.task-event { + padding-left: 2px; + margin-bottom: 5px; &-text { color: #2c2d2e; font-family: "Roboto", sans-serif; diff --git a/frontend/src/utils/dateUtils.js b/frontend/src/utils/dateUtils.js index 54d88b0..7af4441 100644 --- a/frontend/src/utils/dateUtils.js +++ b/frontend/src/utils/dateUtils.js @@ -77,4 +77,12 @@ export const formatDate = (dateString) => { const day = dateObj.getDate().toString().padStart(2, '0'); const month = (dateObj.getMonth() + 1).toString().padStart(2, '0'); return `${day}.${month}`; // Возвращаем строку в формате "дд.мм" +}; + +export const formatDateFull = (dateString) => { + const dateObj = new Date(dateString); + const day = dateObj.getDate().toString().padStart(2, '0'); + const month = (dateObj.getMonth() + 1).toString().padStart(2, '0'); + const year = (dateObj.getFullYear().toString().padStart(4, '0')) + return `${day}.${month}.${year}`; // Возвращаем строку в формате "дд.мм.гггг" }; \ No newline at end of file