diff --git a/src/components/AuthBlock/authBlock.scss b/src/components/AuthBlock/authBlock.scss index dff8e5c5..a223d69f 100644 --- a/src/components/AuthBlock/authBlock.scss +++ b/src/components/AuthBlock/authBlock.scss @@ -7,18 +7,20 @@ display: flex; position: relative; - @media (max-width: 1024px) { - margin-top: 100px; - } - - @media (max-width: 870px) { + @media (max-width: 1000px) { flex-direction: column; padding: 25px; + margin-top: 0; + padding: 0; } } &__info { margin-right: 115px; + + @media (max-width: 1000px) { + order: 3; + } h3 { font-weight: 500; font-size: 30px; @@ -33,14 +35,21 @@ font-size: 16px; line-height: 30px; - @media (max-width: 870px) { + @media (max-width: 1000px) { max-width: none; - margin-bottom: 15px; + margin: 15px 25px; + } + + @media (max-width: 600px) { + font-size: 14px; + line-height: 22px; } } - @media (max-width: 870px) { + @media (max-width: 1000px) { margin-right: 0; + display: flex; + align-items: center; } } @@ -61,8 +70,8 @@ font-size: 15px; line-height: 18px; - @media (max-width: 870px) { - max-width: 350px; + @media (max-width: 1000px) { + max-width: 550px; } } @@ -99,11 +108,25 @@ font-weight: 500; } } + + @media (max-width: 1000px) { + order: 2; + margin-bottom: 55px; + } } &__img { position: absolute; right: 48px; top: -90px; + + @media (max-width: 1000px) { + order: 1; + position: inherit; + right: inherit; + top: inherit; + max-width: 115px; + margin-bottom: 35px; + } } } diff --git a/src/components/Common/ModalLayout/modalLayout.scss b/src/components/Common/ModalLayout/modalLayout.scss index f69ea676..3382e64e 100644 --- a/src/components/Common/ModalLayout/modalLayout.scss +++ b/src/components/Common/ModalLayout/modalLayout.scss @@ -70,6 +70,10 @@ padding: 39px 10px 29px 10px; } } + + .ck-editor { + width: 100%; + } } .modal-layout.active { diff --git a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss index eaa6ae6d..600e219e 100644 --- a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss +++ b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss @@ -720,7 +720,7 @@ } span { font-size: 12px; - color: #1458DD; + color: #343a40; margin-left: 10px; font-weight: 500; } diff --git a/src/components/ProjectTiket/projectTiket.scss b/src/components/ProjectTiket/projectTiket.scss index 27524b7b..5a253d18 100644 --- a/src/components/ProjectTiket/projectTiket.scss +++ b/src/components/ProjectTiket/projectTiket.scss @@ -21,10 +21,6 @@ width: 100%; } - @media (max-width: 430px) { - padding: 8px 13px 8px; - } - a { font-weight: 700; font-size: 18px; @@ -47,10 +43,6 @@ align-items: center; position: relative; - @media (max-width: 430px) { - justify-content: space-between; - } - p { color: #6f6f6f; font-weight: 500; @@ -90,10 +82,6 @@ color: #6f6f6f; right: 0; top: -35%; - - @media (max-width: 430px) { - display: none; - } } } } diff --git a/src/components/TrackerSelectColumn/TrackerSelectColumn.jsx b/src/components/TrackerSelectColumn/TrackerSelectColumn.jsx new file mode 100644 index 00000000..3fd9fcab --- /dev/null +++ b/src/components/TrackerSelectColumn/TrackerSelectColumn.jsx @@ -0,0 +1,45 @@ +import React, { useState } from "react"; +import { useDispatch } from "react-redux"; + +import { moveProjectTask } from "@redux/projectsTrackerSlice"; + +import arrowDown from "assets/icons/arrows/selectArrow.png"; + +import "./trackerSelectColumn.scss"; + +export const TrackerSelectColumn = ({ columns, task, currentColumn }) => { + const dispatch = useDispatch(); + const [openSelect, setOpenSelect] = useState(false); + return ( +
setOpenSelect(!openSelect)} + > +

Выберите колонку

+ arrow + {openSelect && ( +
+ {columns.map((column) => { + return ( +

{ + dispatch( + moveProjectTask({ + startWrapperIndex: { index: currentColumn, task }, + columnId: column.id, + }) + ); + }} + > + {column.title} +

+ ); + })} +
+ )} +
+ ); +}; + +export default TrackerSelectColumn; diff --git a/src/components/TrackerSelectColumn/trackerSelectColumn.scss b/src/components/TrackerSelectColumn/trackerSelectColumn.scss new file mode 100644 index 00000000..ee83b9cf --- /dev/null +++ b/src/components/TrackerSelectColumn/trackerSelectColumn.scss @@ -0,0 +1,51 @@ +.trackerSelectColumn { + display: none; + + @media (max-width: 900px) { + display: flex; + width: 100%; + margin: 10px 0; + justify-content: space-between; + align-items: center; + padding: 2px 6px; + cursor: pointer; + border: 1px solid #e3e2e2;; + border-radius: 8px; + position: relative; + + p { + color: #252c32; + font-weight: 400; + font-size: 14px; + line-height: 24px; + } + + img { + transition: all 0.3s ease; + } + + .open { + transform: rotate(180deg); + } + } + + &__dropDown { + position: absolute; + top: -110px; + background: white; + border-radius: 8px; + padding: 10px 10px; + display: flex; + flex-direction: column; + row-gap: 5px; + width: 100%; + z-index: 100; + border: 1px solid #c7c7c7; + left: 0; + + p { + font-size: 16px; + font-weight: 500; + } + } +} diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js index 0ab9b422..ff2374de 100644 --- a/src/pages/ProjectTracker/ProjectTracker.js +++ b/src/pages/ProjectTracker/ProjectTracker.js @@ -35,6 +35,7 @@ import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal"; import { Navigation } from "@components/Navigation/Navigation"; import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs"; import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader"; +import TrackerSelectColumn from "@components/TrackerSelectColumn/TrackerSelectColumn"; import arrow from "assets/icons/arrows/arrowCalendar.png"; import arrowDown from "assets/icons/arrows/selectArrow.png"; @@ -193,6 +194,9 @@ export const ProjectTracker = () => { } function openTicket(e, task) { + if (window.innerWidth < 900) { + return; + } setSelectedTicket(task); setModalActiveTicket(true); } @@ -298,7 +302,7 @@ export const ProjectTracker = () => {
dispatch(setToggleTab(1))} > img @@ -306,7 +310,7 @@ export const ProjectTracker = () => { dispatch(setToggleTab(2))} > img @@ -314,7 +318,7 @@ export const ProjectTracker = () => { dispatch(setToggleTab(3))} > img @@ -682,6 +686,13 @@ export const ProjectTracker = () => {
+ item.id !== column.id + )} + currentColumn={column.id} + task={task} + /> ); })} diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js index 3cd090bf..2ca8e8be 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.js @@ -44,6 +44,7 @@ export const Tracker = () => { const [allCompletedTasks, setAllCompletedTasks] = useState([]); const [modalCreateProject, setModalCreateProject] = useState(false); + const tabs = ["projectsTab", "tasksTab", "archiveTab"]; useEffect(() => { setLoader(true); @@ -135,28 +136,32 @@ export const Tracker = () => {
toggleTabs(1)} > img

Проекты

toggleTabs(2)} > img

Все мои задачи

toggleTabs(3)} > img

Архив

-
+
{ Ваше имя *
-
- Придумайте пароль* - -
Ваш email *
+
+ Придумайте пароль* + +
Повторите пароль* diff --git a/src/pages/TrackerRegistration/trackerRegistration.scss b/src/pages/TrackerRegistration/trackerRegistration.scss index a857c569..e3d72bd0 100644 --- a/src/pages/TrackerRegistration/trackerRegistration.scss +++ b/src/pages/TrackerRegistration/trackerRegistration.scss @@ -21,12 +21,26 @@ background: #FFF; padding: 59px 115px 70px 102px; + @media (max-width: 1000px) { + display: flex; + flex-direction: column; + padding: 0; + } + &__inputs { display: flex; flex-wrap: wrap; max-width: 650px; row-gap: 25px; column-gap: 44px; + + @media (max-width: 1000px) { + order: 2; + } + + @media (max-width: 6755px) { + margin-bottom: 35px; + } } &__submit { @@ -43,6 +57,16 @@ border: none; margin-right: 165px; } + + @media (max-width: 1000px) { + order: 3; + } + + @media (max-width: 675px) { + flex-direction: column; + align-items: start; + row-gap: 35px; + } } &__info { @@ -50,6 +74,10 @@ align-items: center; img { margin-right: 31px; + + @media (max-width: 675px) { + margin-right: 27px; + } } p { @@ -58,6 +86,10 @@ line-height: 22px; color: #000; max-width: 430px; + + @media (max-width: 675px) { + font-size: 14px; + } } } @@ -65,6 +97,15 @@ position: absolute; top: -100px; right: 58px; + + @media (max-width: 1000px) { + position: inherit; + order: 1; + top: inherit; + right: inherit; + max-width: 115px; + margin-bottom: 25px; + } } } &__inputContainer { @@ -91,5 +132,10 @@ font-size: 15px; color: #000; } + + @media (max-width: 675px) { + margin-bottom: 0; + max-width: none; + } } }