From 652918cd0a9f2f86a9553b17b5bce01407f647b6 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Thu, 23 Nov 2023 18:15:46 +0300 Subject: [PATCH 1/2] Fixed styles pages --- src/components/Common/ModalLayout/modalLayout.scss | 6 +++--- .../Modal/ModalRegistration/ModalRegistration.jsx | 3 +-- .../Modal/Tracker/ModalTicket/modalTicket.scss | 3 +-- .../Modal/Tracker/TrackerModal/trackerModal.scss | 1 + src/components/ProjectTiket/ProjectTiket.jsx | 2 +- src/components/ProjectTiket/projectTiket.scss | 8 ++++---- src/pages/Tracker/tracker.scss | 14 +++++++++----- 7 files changed, 20 insertions(+), 17 deletions(-) diff --git a/src/components/Common/ModalLayout/modalLayout.scss b/src/components/Common/ModalLayout/modalLayout.scss index bc6d706e..328f2c33 100644 --- a/src/components/Common/ModalLayout/modalLayout.scss +++ b/src/components/Common/ModalLayout/modalLayout.scss @@ -51,7 +51,7 @@ justify-content: space-between; button { - margin: 0 auto; + // margin: 0 auto; } } @@ -74,7 +74,7 @@ } &__btn { - margin: 0 auto; + margin: 0; max-width: 242px; width: 100%; } @@ -106,7 +106,7 @@ display: flex; flex-direction: column; row-gap: 10px; - padding: 39px 10px 29px 10px; + padding: 19px 10px 29px 10px; @media (max-width: 500px) { padding: 10px; diff --git a/src/components/Modal/ModalRegistration/ModalRegistration.jsx b/src/components/Modal/ModalRegistration/ModalRegistration.jsx index e1f77724..1fdfabdb 100644 --- a/src/components/Modal/ModalRegistration/ModalRegistration.jsx +++ b/src/components/Modal/ModalRegistration/ModalRegistration.jsx @@ -99,8 +99,7 @@ export const ModalRegistration = ({ active, setActive }) => { Подключайтесь к

itguild.

- Зарегистрируйтесь и назначайте собеседования любым специалистам без - задержек + Зарегистрируйтесь и начните работу уже сегодня

diff --git a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss index 81fbe399..049bb3ab 100644 --- a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss +++ b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss @@ -1065,7 +1065,7 @@ background: #fff; p { - font-size: 18px; + font-size: 15px; font-weight: 500; margin: 0; line-height: 20px; @@ -1097,7 +1097,6 @@ border-radius: 10px; margin-bottom: 10px; .priority { - &__name { cursor: pointer; width: 100%; diff --git a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss index 836324b7..7d33cb26 100644 --- a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss +++ b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss @@ -233,6 +233,7 @@ text-overflow: ellipsis; font-size: 14px; max-width: 270px; + margin-left: 10px; } img { diff --git a/src/components/ProjectTiket/ProjectTiket.jsx b/src/components/ProjectTiket/ProjectTiket.jsx index 2c1515ff..7c0f42ec 100644 --- a/src/components/ProjectTiket/ProjectTiket.jsx +++ b/src/components/ProjectTiket/ProjectTiket.jsx @@ -81,7 +81,7 @@ export const ProjectTiket = ({ project, index }) => { to={`/tracker/project/${project.id}`} className="project__open-traker" > -

{project.name}

+
{project.name}

Открытые задачи

diff --git a/src/components/ProjectTiket/projectTiket.scss b/src/components/ProjectTiket/projectTiket.scss index 470c5562..1ab51b3e 100644 --- a/src/components/ProjectTiket/projectTiket.scss +++ b/src/components/ProjectTiket/projectTiket.scss @@ -26,14 +26,14 @@ &__link { font-weight: 700; + width: 194px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; font-size: 18px; line-height: 32px; color: #111112; margin-bottom: 22px; - overflow: hidden; - white-space: nowrap; - display: flex; - text-overflow: ellipsis; max-width: 380px; &:hover { diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index 80cfcb4a..eafe18d5 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -390,8 +390,8 @@ display: flex; flex-direction: column; background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%); - border-radius: 40px; - padding: 15px 30px; + border-radius: 20px; + padding: 30px; cursor: default; width: 800px; @@ -493,6 +493,7 @@ &__add { display: flex; + margin-left: 3px; cursor: pointer; span { @@ -513,7 +514,8 @@ @media (max-width: 1000px) { width: 390px; - padding: 15px 30px; + padding: 30px; + .persons__list__info { margin: 10px; } @@ -755,16 +757,18 @@ margin: 0 10px; column-gap: 5px; cursor: pointer; - padding: 4px; + padding: 5px 20px; border-radius: 8px; border: 1px solid #e3e2e2; max-height: 30px; + p { white-space: nowrap; font-weight: 400; font-size: 14px; line-height: 17px; } + span { width: 14px; height: 14px; @@ -1130,7 +1134,6 @@ align-items: center; margin-bottom: 8px; - p { font-weight: 500; font-size: 14px; @@ -1317,6 +1320,7 @@ display: flex; justify-content: space-between; min-width: 300px; + padding-left: 18px; &__more { display: flex; From 6bb948befb4b309f2eaba88acb03bdd06d9c3884 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Fri, 24 Nov 2023 17:24:43 +0300 Subject: [PATCH 2/2] Fixed list tags --- src/pages/ProjectTracker/ProjectTracker.js | 96 ++++++++++------------ src/pages/Tracker/tracker.scss | 86 +++++++++++-------- 2 files changed, 93 insertions(+), 89 deletions(-) diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js index c0ddc4d7..423ae1c3 100644 --- a/src/pages/ProjectTracker/ProjectTracker.js +++ b/src/pages/ProjectTracker/ProjectTracker.js @@ -414,6 +414,11 @@ export const ProjectTracker = () => { add: false, edit: false, }); + setTagInfo({ + description: "", + name: "", + }); + setColor("#aabbcc"); } if ( @@ -703,23 +708,19 @@ export const ProjectTracker = () => {
{tags.open && (
- close { - setTags({ - open: false, - add: false, - edit: false, - }); - setTagInfo({ - description: "", - name: "", - }); - setColor("#aabbcc"); - }} - /> +
+ setTags((prevState) => ({ + ...prevState, + add: true, + })) + } + > +

Добавить новый тег

+ + +
+ {!tags.add && !tags.edit && (
{projectBoard.mark.map((tag) => { @@ -736,46 +737,35 @@ export const ProjectTracker = () => { className="tagItem__info__color" style={{ background: tag.color }} /> -
-
- edit { - setTags((prevState) => ({ - ...prevState, - edit: true, - })); - setTagInfo({ - description: tag.title, - name: tag.slug, - editMarkId: tag.id, - }); - setColor(tag.color); - }} - /> - deleteTag(tag.id)} - className="delete" - src={close} - alt="delete" - /> + +
+ edit { + setTags((prevState) => ({ + ...prevState, + edit: true, + })); + setTagInfo({ + description: tag.title, + name: tag.slug, + editMarkId: tag.id, + }); + setColor(tag.color); + }} + /> + deleteTag(tag.id)} + className="delete" + src={close} + alt="delete" + /> +
); })} -
- setTags((prevState) => ({ - ...prevState, - add: true, - })) - } - > -

Добавить новый тег

- + -
)} {(tags.add || tags.edit) && ( diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index eafe18d5..312c7375 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -786,12 +786,13 @@ } &__list { position: absolute; - background: #f8f9fa; + border-radius: 2px; + background: #d9d9d9; z-index: 8; - border-radius: 8px; - padding: 20px 10px 10px; + + // padding: 0 8px 10px; top: 30px; - width: 220px; + width: 265px; display: flex; flex-direction: column; @@ -809,17 +810,27 @@ flex-direction: column; row-gap: 8px; margin-top: 8px; + padding: 0 8px 8px; .tagItem { - position: relative; display: flex; - flex-direction: column; - padding: 5px; - border: 1px solid #e3e2e2; + align-items: center; + flex-direction: row; + justify-content: space-between; + padding: 0px 8px; border-radius: 8px; + height: 50px; + max-height: 50px; + background: #fff; &__description { - font-size: 14px; + font-size: 12px; + word-break: break-word; + max-width: 115px; + max-height: 40px; + overflow: hidden; + text-wrap: wrap; + text-overflow: ellipsis; } &__info { @@ -828,32 +839,29 @@ column-gap: 10px; &__name { - font-size: 16px; + font-size: 12px; font-weight: 600; } &__color { - border: 1px solid #e3e2e2; - width: 20px; - height: 20px; - border-radius: 50px; - } - } - - &__images { - position: absolute; - right: 5px; - top: 3px; - display: flex; - column-gap: 3px; - - img { - cursor: pointer; + width: 22.25px; + height: 23.217px; + border-radius: 8px; } - .delete { - width: 14px; - height: 14px; + &__images { + display: flex; + flex-direction: column-reverse; + row-gap: 6px; + + img { + cursor: pointer; + } + + .delete { + width: 14px; + height: 14px; + } } } } @@ -862,17 +870,21 @@ .addNewTag { display: flex; align-items: center; - column-gap: 8px; + column-gap: 15px; + border-radius: 8px; + background: #252c32; + color: white; + height: 42px; cursor: pointer; justify-content: center; p { - font-size: 13px; + font-size: 15px; } span { - width: 16px; - height: 16px; + width: 19px; + height: 19px; border-radius: 50px; align-items: center; justify-content: center; @@ -887,8 +899,9 @@ .formTag { display: flex; flex-direction: column; - padding-top: 8px; + padding: 8px; row-gap: 8px; + .arrow { position: absolute; cursor: pointer; @@ -909,11 +922,12 @@ &__btn { outline: none; border: none; - background: #6f6f6f; + background: #252c32; color: whitesmoke; - margin: 0 auto; + margin: 10px auto 0; border-radius: 10px; font-size: 15px; + padding: 5px 12px; } .disable {