From 85773bd7af431c2a15b01853eb712ff4f8c4e5c8 Mon Sep 17 00:00:00 2001 From: M1kola Date: Wed, 2 Aug 2023 23:20:53 +0300 Subject: [PATCH 1/5] adaptive --- src/components/AuthBlock/authBlock.scss | 43 +++-- .../Common/ModalLayout/modalLayout.scss | 4 + .../Tracker/ModalTicket/modalTicket.scss | 2 +- src/pages/TrackerAuth/trackerAuth.scss | 18 ++ src/pages/TrackerIntro/trackerIntro.scss | 154 ++++++++++++++++++ .../TrackerRegistration.js | 8 +- .../trackerRegistration.scss | 46 ++++++ 7 files changed, 260 insertions(+), 15 deletions(-) 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/pages/TrackerAuth/trackerAuth.scss b/src/pages/TrackerAuth/trackerAuth.scss index 45dec641..e8043782 100644 --- a/src/pages/TrackerAuth/trackerAuth.scss +++ b/src/pages/TrackerAuth/trackerAuth.scss @@ -10,6 +10,10 @@ padding-top: 100px; } + @media (max-width: 1000px) { + background-color: white; + } + .container { padding-bottom: 30px; } @@ -29,7 +33,21 @@ right: 10px; max-width: 300px; + @media (max-width: 600px) { + max-width: 257px; + right: 0; + } + + @media (max-width: 483px) { + max-width: 160px; + left: -175px; + } } } + + @media (max-width: 600px) { + font-size: 24px; + margin-bottom: 25px; + } } } diff --git a/src/pages/TrackerIntro/trackerIntro.scss b/src/pages/TrackerIntro/trackerIntro.scss index 571b2b78..a11f2434 100644 --- a/src/pages/TrackerIntro/trackerIntro.scss +++ b/src/pages/TrackerIntro/trackerIntro.scss @@ -3,6 +3,14 @@ font-family: "LabGrotesque", sans-serif; background-color: #f1f1f1; color: #000000; + + @media (max-width: 1375px) { + padding-top: 80px; + } + + @media (max-width: 1200px) { + background-color: white; + } } &__intro { @@ -14,12 +22,33 @@ &__img { max-width: 530px; max-height: 287px; + + @media (max-width: 1100px) { + max-width: 35%; + } + + @media (max-width: 800px) { + margin-top: 25px; + max-width: 350px; + } + + @media (max-width: 450px) { + max-width: 280px; + } } &__info { display: flex; flex-direction: column; margin-right: 50px; + + @media (max-width: 1100px) { + align-items: center; + } + + @media (max-width: 800px) { + margin-right: 0; + } } &__suptitle { @@ -31,6 +60,10 @@ font-weight: 500; font-size: 16px; } + + @media (max-width: 1100px) { + display: none; + } } &__title { @@ -48,6 +81,30 @@ bottom: -30px; right: 0; max-width: 405px; + + @media (max-width: 1175px) { + max-width: none; + width: 100%; + } + + @media (max-width: 800px) { + max-width: 250px; + left: 50%; + margin-left: -120px; + } + } + + @media (max-width: 1100px) { + text-align: center; + } + + @media (max-width: 800px) { + font-size: 28px; + display: block; + } + + @media (max-width: 450px) { + margin-bottom: 55px; } } @@ -55,6 +112,27 @@ font-size: 17px; font-weight: 500; margin-bottom: 105px; + + @media (max-width: 1100px) { + text-align: center; + margin-bottom: 50px; + } + + @media (max-width: 500px) { + display: none; + } + } + + @media (max-width: 1200px) { + align-items: center; + } + + @media (max-width: 800px) { + flex-direction: column; + } + + @media (max-width: 800px) { + padding: 40px 0; } } @@ -87,10 +165,29 @@ margin-bottom: 34px; } + .board { + width: 100%; + } + .heard { position: absolute; bottom: -64px; left: 325px; + + @media (max-width: 1320px) { + left: inherit; + right: 80px; + bottom: inherit; + top: 30px; + } + + @media (max-width: 900px) { + max-width: 70px; + } + + @media (max-width: 650px) { + display: none; + } } &__info { @@ -103,7 +200,27 @@ font-weight: 500; max-width: 695px; margin-bottom: 30px; + + @media (max-width: 700px) { + font-size: 20px; + } } + + @media (max-width: 880px) { + width: 100%; + padding: 0 30px; + align-items: center; + + p { + text-align: center; + max-width: none; + margin-bottom: 10px; + } + } + } + + @media (max-width: 1000px) { + margin-bottom: 60px; } } @@ -132,6 +249,15 @@ position: absolute; max-width: 311px; bottom: -28px; + + @media (max-width: 650px) { + max-width: 196px; + } + } + + @media (max-width: 650px) { + font-size: 24px; + margin-bottom: 65px; } } @@ -139,6 +265,11 @@ display: flex; justify-content: space-between; width: 100%; + + @media (max-width: 850px) { + flex-direction: column; + row-gap: 50px; + } } &__item { @@ -146,6 +277,10 @@ flex-direction: column; max-width: 415px; + @media (max-width: 850px) { + max-width: none; + } + &Head { display: flex; align-items: center; @@ -161,6 +296,12 @@ height: 71px; color: #FFFFFF; font-size: 30px; + + @media (max-width: 650px) { + width: 50px; + height: 50px; + font-size: 24px; + } } h3 { @@ -168,6 +309,15 @@ font-size: 32px; font-weight: 500; margin-bottom: 0; + + @media (max-width: 650px) { + margin-left: 26px; + font-size: 21px; + } + } + + @media (max-width: 650px) { + margin-bottom: 26px; } } @@ -175,6 +325,10 @@ font-size: 19px; font-weight: 500; line-height: 32px; + + @media (max-width: 650px) { + font-size: 16px; + } } } } diff --git a/src/pages/TrackerRegistration/TrackerRegistration.js b/src/pages/TrackerRegistration/TrackerRegistration.js index 68a51a01..d7038d28 100644 --- a/src/pages/TrackerRegistration/TrackerRegistration.js +++ b/src/pages/TrackerRegistration/TrackerRegistration.js @@ -34,14 +34,14 @@ export const TrackerRegistration = () => { Ваше имя * -
- Придумайте пароль* - -
Ваш 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; + } } } From 2e4f15717b4f40d098f71065604d212fb27eb7bd Mon Sep 17 00:00:00 2001 From: M1kola Date: Thu, 3 Aug 2023 18:47:04 +0300 Subject: [PATCH 2/5] adaptive --- src/components/ProjectTiket/projectTiket.scss | 12 -- src/pages/Tracker/Tracker.js | 9 +- src/pages/Tracker/tracker.scss | 125 ++++++++++++++++-- 3 files changed, 117 insertions(+), 29 deletions(-) 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/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js index 3cd090bf..965ff78f 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,28 @@ export const Tracker = () => {
toggleTabs(1)} > img

Проекты

toggleTabs(2)} > img

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

toggleTabs(3)} > img

Архив

-
+
Date: Thu, 3 Aug 2023 18:47:19 +0300 Subject: [PATCH 3/5] adaptive --- src/pages/Tracker/Tracker.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js index 965ff78f..2ca8e8be 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.js @@ -44,7 +44,7 @@ export const Tracker = () => { const [allCompletedTasks, setAllCompletedTasks] = useState([]); const [modalCreateProject, setModalCreateProject] = useState(false); - const tabs = ['projectsTab', 'tasksTab', 'archiveTab'] + const tabs = ["projectsTab", "tasksTab", "archiveTab"]; useEffect(() => { setLoader(true); @@ -136,7 +136,9 @@ export const Tracker = () => {
toggleTabs(1)} > img @@ -150,7 +152,9 @@ export const Tracker = () => {

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

toggleTabs(3)} > img From 3db87fca202a23f9cc73c1a2ec210db5e4de00c2 Mon Sep 17 00:00:00 2001 From: M1kola Date: Fri, 4 Aug 2023 23:24:04 +0300 Subject: [PATCH 4/5] adaptive --- .../TrackerSelectColumn.jsx | 36 ++++++++ .../trackerSelectColumn.scss | 51 +++++++++++ src/pages/ProjectTracker/ProjectTracker.js | 14 ++- src/pages/Tracker/tracker.scss | 85 ++++++++++++++++++- 4 files changed, 180 insertions(+), 6 deletions(-) create mode 100644 src/components/TrackerSelectColumn/TrackerSelectColumn.jsx create mode 100644 src/components/TrackerSelectColumn/trackerSelectColumn.scss diff --git a/src/components/TrackerSelectColumn/TrackerSelectColumn.jsx b/src/components/TrackerSelectColumn/TrackerSelectColumn.jsx new file mode 100644 index 00000000..08452e86 --- /dev/null +++ b/src/components/TrackerSelectColumn/TrackerSelectColumn.jsx @@ -0,0 +1,36 @@ +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..8eb2fafe 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,10 @@ export const ProjectTracker = () => {
+ item.id !== column.id)} + currentColumn={column.id} + task={task} />
); })} diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index 25d2811c..fb9fa487 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -231,6 +231,10 @@ background: #ffffff; border-radius: 12px; flex-direction: column; + + @media (max-width: 650px) { + border-radius: 0; + } } .tasks { @@ -238,6 +242,14 @@ border-bottom: 1px solid #dde2e4; padding: 0 35px 15px; + @media (max-width: 1000px) { + padding: 0 15px 15px; + } + + @media (max-width: 650px) { + background-color: #DFF1FF; + } + &__wrapper { display: flex; max-width: 1280px; @@ -250,6 +262,13 @@ &__fullScreen { max-width: 1160px; } + + @media (max-width: 1350px) { + display: flex; + flex-wrap: wrap; + gap: 10px; + padding: 0px; + } } h5 { @@ -263,6 +282,11 @@ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + + @media (max-width: 1350px) { + width: 100%; + max-width: none; + } } &__add { @@ -287,6 +311,14 @@ display: flex; align-items: center; } + + @media (max-width: 1350px) { + margin-left: 0; + } + + @media (max-width: 700px) { + width: 100%; + } } &__persons { @@ -294,6 +326,14 @@ display: flex; align-items: center; + @media (max-width: 700px) { + right: -15px; + } + + @media (max-width: 465px) { + width: 100%; + } + .projectPersons { display: flex; position: relative; @@ -496,6 +536,10 @@ display: flex; align-items: center; + @media (max-width: 650px) { + margin: 0; + } + span { color: #252c32; font-weight: 400; @@ -533,6 +577,16 @@ max-width: 220px; width: 100%; + @media (max-width: 915px) { + margin-right: 0; + width: 100%; + max-width: none; + } + + @media (max-width: 650px) { + border-color: gray; + } + &Selected { display: flex; align-items: center; @@ -646,6 +700,10 @@ font-weight: 500; } } + + @media (max-width: 1150px) { + display: none; + } } } @@ -673,6 +731,13 @@ background: #c5c0c6; border-radius: 20px; } + + @media (max-width: 900px) { + padding: 15px; + flex-direction: column; + row-gap: 25px; + transform: none; + } } &__board { @@ -690,10 +755,15 @@ height: fit-content; position: relative; transition: all 0.3s ease; - //max-height: 500px; - //overflow-y: auto; transform: scaleY(-1); + @media (max-width: 900px) { + min-width: auto; + width: 100%; + max-width: none; + transform: scaleX(1); + } + &::-webkit-scrollbar { width: 3px; border-radius: 10px; @@ -739,6 +809,14 @@ transition: 0.3s; } + @media (max-width: 900px) { + width: 100%; + + &:hover { + transform: none; + } + } + &__hide { opacity: 0; } @@ -1456,7 +1534,8 @@ @media (max-width: 650px) { &__content { - padding: 28px 0; + padding: 28px 0 0; + background-color: #DFF1FF; .project { background-color: white; From 03071a7f91a1bee9b70b3531d42c255a0446940f Mon Sep 17 00:00:00 2001 From: M1kola Date: Fri, 4 Aug 2023 23:24:18 +0300 Subject: [PATCH 5/5] adaptive --- .../TrackerSelectColumn.jsx | 55 +++++++++++-------- src/pages/ProjectTracker/ProjectTracker.js | 13 +++-- 2 files changed, 40 insertions(+), 28 deletions(-) diff --git a/src/components/TrackerSelectColumn/TrackerSelectColumn.jsx b/src/components/TrackerSelectColumn/TrackerSelectColumn.jsx index 08452e86..3fd9fcab 100644 --- a/src/components/TrackerSelectColumn/TrackerSelectColumn.jsx +++ b/src/components/TrackerSelectColumn/TrackerSelectColumn.jsx @@ -5,32 +5,41 @@ import { moveProjectTask } from "@redux/projectsTrackerSlice"; import arrowDown from "assets/icons/arrows/selectArrow.png"; -import './trackerSelectColumn.scss' +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 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/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js index 8eb2fafe..ff2374de 100644 --- a/src/pages/ProjectTracker/ProjectTracker.js +++ b/src/pages/ProjectTracker/ProjectTracker.js @@ -194,8 +194,8 @@ export const ProjectTracker = () => { } function openTicket(e, task) { - if (window. innerWidth < 900) { - return + if (window.innerWidth < 900) { + return; } setSelectedTicket(task); setModalActiveTicket(true); @@ -687,9 +687,12 @@ export const ProjectTracker = () => {
item.id !== column.id)} - currentColumn={column.id} - task={task} /> + columns={projectBoard.columns.filter( + (item) => item.id !== column.id + )} + currentColumn={column.id} + task={task} + />
); })}