diff --git a/src/components/AuthBox/authBox.scss b/src/components/AuthBox/authBox.scss index 73c2f1d3..4e950806 100644 --- a/src/components/AuthBox/authBox.scss +++ b/src/components/AuthBox/authBox.scss @@ -4,6 +4,10 @@ align-self: center; margin-bottom: 194px; + @media (max-width: 1200px) { + margin-bottom: 100px; + } + &__header { font-family: "GT Eesti Pro Display"; font-size: 5.3em; @@ -19,6 +23,15 @@ letter-spacing: 0.56px; line-height: normal; } + + @media (max-width: 1024px) { + margin-top: 25px; + } + + @media (max-width: 450px) { + font-size: 4em; + text-align: center; + } } &__sign-in { @@ -63,6 +76,14 @@ width: 6px; height: 6px; margin-left: 120px; + + @media (max-width: 700px) { + margin-left: 0; + } + } + + @media (max-width: 1024px) { + margin-bottom: 25px; } } @@ -175,7 +196,6 @@ margin-bottom: 0px; &__header { - margin-top: 120px; line-height: 20px; } @@ -196,6 +216,7 @@ height: 45px; border-radius: 22.5px; padding-left: 22px; + max-width: none; } &-btn { diff --git a/src/components/FileTracker/FileTracker.jsx b/src/components/FileTracker/FileTracker.jsx new file mode 100644 index 00000000..e4c0ca3c --- /dev/null +++ b/src/components/FileTracker/FileTracker.jsx @@ -0,0 +1,50 @@ +import React, { useState } from "react"; + +import { backendImg } from "@utils/helper"; + +import { apiRequest } from "@api/request"; + +import close from "assets/icons/closeProjectPersons.svg"; + +const FileTracker = ({ file, setDeletedTask, taskId }) => { + const [openImg, setOpenImg] = useState(false); + function deleteFile(file) { + apiRequest("/file/detach", { + method: "DELETE", + data: { + file_id: file.id, + entity_type: 2, + entity_id: taskId, + status: 0, + }, + }).then(() => { + setDeletedTask(file); + }); + } + + return ( +
{ + if (openImg) setOpenImg(!openImg); + }} + > + img { + if (!openImg) setOpenImg(!openImg); + }} + /> + {!openImg && ( +
deleteFile(file)}> + delete +
+ )} +
+ ); +}; + +export default FileTracker; diff --git a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx index 09965951..363611e8 100644 --- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx +++ b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx @@ -22,6 +22,7 @@ import { apiRequest } from "@api/request"; import { useNotification } from "@hooks/useNotification"; +import FileTracker from "@components/FileTracker/FileTracker"; import AcceptModal from "@components/Modal/AcceptModal/AcceptModal"; import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal"; import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment"; @@ -52,6 +53,7 @@ export const ModalTiсket = ({ projectId, projectName, projectUsers, + projectOwnerId, }) => { const dispatch = useDispatch(); const [addSubtask, setAddSubtask] = useState(false); @@ -120,6 +122,11 @@ export const ModalTiсket = ({ }, }).then((res) => { dispatch(setProjectBoardFetch(projectId)); + showNotification({ + show: true, + text: "Изменения сохранены", + type: "success", + }); }); } @@ -366,19 +373,9 @@ export const ModalTiсket = ({ } function deleteFile(file) { - apiRequest("/file/detach", { - method: "DELETE", - data: { - file_id: file.id, - entity_type: 2, - entity_id: task.id, - status: 0, - }, - }).then(() => { - setTaskFiles((prevValue) => - prevValue.filter((item) => item.id !== file.id) - ); - }); + setTaskFiles((prevValue) => + prevValue.filter((item) => item.id !== file.id) + ); } function startTimer() { @@ -528,19 +525,12 @@ export const ModalTiсket = ({
{taskFiles.map((file) => { return ( -
- img -
deleteFile(file)} - > - delete -
-
+ ); })}
@@ -833,11 +823,27 @@ export const ModalTiсket = ({

ссылка на задачу

-
+

в архив

-
+

удалить

diff --git a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss index cabdc30f..4ef41186 100644 --- a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss +++ b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss @@ -20,6 +20,7 @@ border-radius: 8px; display: flex; flex-direction: row; + max-height: 750px; .content { position: relative; @@ -116,45 +117,35 @@ } .taskName { + display: -webkit-box; max-width: 550px; overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; - -webkit-line-clamp: 5; + -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .taskDescription { + display: -webkit-box; max-width: 550px; overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; - -webkit-line-clamp: 5; + -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .fullName { max-width: 800px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - -webkit-line-clamp: 5; - -webkit-box-orient: vertical; } .fullDescription { max-width: 800px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - -webkit-line-clamp: 5; - -webkit-box-orient: vertical; } .comments__list { display: flex; flex-direction: column; - max-height: 300px; + max-height: 215px; overflow: auto; &::-webkit-scrollbar { @@ -357,7 +348,7 @@ column-gap: 25px; row-gap: 20px; margin-top: 33px; - max-height: 350px; + max-height: 170px; overflow-y: auto; &::-webkit-scrollbar { @@ -376,6 +367,7 @@ } .taskFile { + cursor: pointer; position: relative; .imgFile { max-width: 170px; @@ -409,6 +401,26 @@ } } } + + .ImgOpened { + position: fixed; + width: 100vw; + height: 100vh; + top: 0; + left: 0; + display: flex; + justify-content: center; + align-items: center; + z-index: 100; + background-color: rgba(0, 0, 0, 0.2); + + .imgFile { + width: 90vw; + height: 90vh; + max-width: none; + max-height: none; + } + } } .fileLoaded { diff --git a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx index 5d0aa341..a624be02 100644 --- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx +++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx @@ -6,6 +6,7 @@ import DatePicker, { registerLocale } from "react-datepicker"; import { useDispatch, useSelector } from "react-redux"; import { Link, useNavigate, useParams } from "react-router-dom"; +import { getProfileInfo } from "@redux/outstaffingSlice"; import { deletePersonOnProject, getBoarderLoader, @@ -23,6 +24,8 @@ import { import { apiRequest } from "@api/request"; +import { useNotification } from "@hooks/useNotification"; + import { getCorrectDate } from "@components/Calendar/calendarHelper"; import { Footer } from "@components/Common/Footer/Footer"; import { Loader } from "@components/Common/Loader/Loader"; @@ -73,6 +76,7 @@ export const TicketFullScreen = () => { minute: 0, seconds: 0, }); + const profileInfo = useSelector(getProfileInfo); const [timerId, setTimerId] = useState(null); const [dropListOpen, setDropListOpen] = useState(false); const [correctProjectUsers, setCorrectProjectUsers] = useState([]); @@ -84,6 +88,7 @@ export const TicketFullScreen = () => { const [uploadedFile, setUploadedFile] = useState(null); const [taskFiles, setTaskFiles] = useState([]); const [acceptModalOpen, setAcceptModalOpen] = useState(false); + const { showNotification } = useNotification(); useEffect(() => { apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => { @@ -175,7 +180,13 @@ export const TicketFullScreen = () => { title: inputsValue.title, description: inputsValue.description, }, - }).then(() => {}); + }).then(() => { + showNotification({ + show: true, + text: "Изменения сохранены", + type: "success", + }); + }); } function createComment() { @@ -988,11 +999,27 @@ export const TicketFullScreen = () => { link

ссылка на задачу

-
+
arch

в архив

-
+
delete

удалить

diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx index ba43bc79..fb83c23a 100644 --- a/src/components/Navigation/Navigation.jsx +++ b/src/components/Navigation/Navigation.jsx @@ -17,6 +17,7 @@ export const Navigation = () => { const [user] = useState( localStorage.getItem("role_status") === "18" ? "partner" : "developer" ); + const [navInfo] = useState({ developer: [ { diff --git a/src/components/SideBar/sidebar.scss b/src/components/SideBar/sidebar.scss index 8a0d6705..6af9b83e 100644 --- a/src/components/SideBar/sidebar.scss +++ b/src/components/SideBar/sidebar.scss @@ -11,7 +11,6 @@ position: fixed; width: 100% !important; height: 80px; - margin-bottom: 50px; } @media (max-width: 1440px) { diff --git a/src/components/SliderWorkers/sliderWorkers.scss b/src/components/SliderWorkers/sliderWorkers.scss index 5bc7f9a6..9b538b3d 100644 --- a/src/components/SliderWorkers/sliderWorkers.scss +++ b/src/components/SliderWorkers/sliderWorkers.scss @@ -32,6 +32,15 @@ line-height: 22px; color: #000000; } + + @media (max-width: 1024px) { + text-align: center; + margin-top: 20px; + + p { + margin-top: 15px; + } + } } .slick-list { diff --git a/src/pages/AuthForDevelopers/authForDevelopers.scss b/src/pages/AuthForDevelopers/authForDevelopers.scss index 06607e33..b81b2e1d 100644 --- a/src/pages/AuthForDevelopers/authForDevelopers.scss +++ b/src/pages/AuthForDevelopers/authForDevelopers.scss @@ -21,11 +21,23 @@ &__vector-black { top: 460px; right: -224px; + + @media (max-width: 1200px) { + top: 370px; + } + + @media (max-width: 1024px) { + top: 180px; + } } &__arrow { margin-top: 360px; z-index: 99; + + @media (max-width: 1200px) { + display: none; + } } @media (max-width: 575.98px) { @@ -42,6 +54,10 @@ padding-top: 30px; position: relative; padding-bottom: 310px; + + @media (max-width: 1200px) { + display: none; + } } &__info-box { diff --git a/src/pages/AuthForPartners/authForPartners.scss b/src/pages/AuthForPartners/authForPartners.scss index 13c9e23e..17216e58 100644 --- a/src/pages/AuthForPartners/authForPartners.scss +++ b/src/pages/AuthForPartners/authForPartners.scss @@ -21,11 +21,23 @@ &__vector-black { top: 460px; right: -224px; + + @media (max-width: 1200px) { + top: 370px; + } + + @media (max-width: 1024px) { + top: 180px; + } } &__arrow { margin-top: 360px; cursor: pointer; + + @media (max-width: 1200px) { + display: none; + } } @media (max-width: 575.98px) { @@ -43,6 +55,10 @@ padding-top: 30px; position: relative; padding-bottom: 310px; + + @media (max-width: 1200px) { + display: none; + } } @media (max-width: 575.98px) { @@ -305,7 +321,7 @@ transform: rotate(90deg); } - @media (max-width: 660px) { + @media (max-width: 1024px) { margin: 15px 0; } } diff --git a/src/pages/CompanyInfo/companyInfo.scss b/src/pages/CompanyInfo/companyInfo.scss index fbac5743..f5992751 100644 --- a/src/pages/CompanyInfo/companyInfo.scss +++ b/src/pages/CompanyInfo/companyInfo.scss @@ -3,6 +3,10 @@ font-family: "LabGrotesque", sans-serif; background-color: #F1F1F1; padding-top: 60px; + + @media (max-width: 1375px) { + padding-top: 120px; + } } &__title { @@ -17,6 +21,10 @@ color: #52B709; font-weight: 700; } + + @media (max-width: 500px) { + font-size: 35px; + } } &__subTitle { @@ -25,6 +33,10 @@ text-align: center; font-size: 22px; line-height: 32px; + + @media (max-width: 500px) { + font-size: 18px; + } } .arrowElement { @@ -35,6 +47,10 @@ display: flex; justify-content: center; align-items: center; + + @media (max-width: 850px) { + display: none; + } } .arrowDown { @@ -42,6 +58,10 @@ img { transform: rotate(90deg); } + + @media (max-width: 500px) { + margin: 15px auto; + } } &__info { @@ -68,6 +88,19 @@ ul { padding-left: 18px; } + + @media (max-width: 700px) { + width: 100%; + } + + @media (max-width: 600px) { + padding: 15px; + } + } + + @media (max-width: 700px) { + flex-direction: column; + row-gap: 10px; } } @@ -78,6 +111,12 @@ margin: 20px auto 70px; max-width: 1000px; + @media (max-width: 700px) { + margin: 10px auto 30px; + text-align: center; + row-gap: 5px; + } + span { color: #52B709; font-weight: 700; @@ -94,8 +133,16 @@ font-size: 18px; line-height: 22px; row-gap: 20px; + + @media (max-width: 700px) { + row-gap: 8px; + } } } + + @media (max-width: 500px) { + padding-top: 30px; + } } &__countingBlock { @@ -108,10 +155,34 @@ row-gap: 16px; position: relative; + @media (max-width: 1125px) { + padding-right: 45px; + } + + @media (max-width: 850px) { + padding: 20px 25px; + } + + @media (max-width: 780px) { + row-gap: 5px; + padding: 15px; + } + &__head { display: flex; justify-content: space-between; align-items: center; + + @media (max-width: 850px) { + justify-content: space-evenly; + } + + @media (max-width: 750px) { + text-align: center; + img { + display: none; + } + } } &__bottom { @@ -135,12 +206,21 @@ span { color: #52B709; } + + @media (max-width: 780px) { + text-align: center; + row-gap: 5px; + } } .countingBlock__info { display: flex; flex-direction: column; row-gap: 12px; + + @media (max-width: 850px) { + row-gap: 5px; + } } .countingBlock { @@ -162,6 +242,18 @@ position: absolute; right: -140px; top: -55px; + + @media (max-width: 1440px) { + right: -25px; + } + + @media (max-width: 1210px) { + right: 25px; + } + + @media (max-width: 1125px) { + display: none; + } } } } diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js index 32a73399..f5fdca57 100644 --- a/src/pages/ProjectTracker/ProjectTracker.js +++ b/src/pages/ProjectTracker/ProjectTracker.js @@ -546,6 +546,7 @@ export const ProjectTracker = () => { projectId={projectBoard.id} projectName={projectBoard.name} projectUsers={projectBoard.projectUsers} + projectOwnerId={projectBoard.owner_id} /> )} @@ -621,96 +622,104 @@ export const ProjectTracker = () => {
)} - {column.tasks.map((task) => { - return ( -
- dragStartHandler(e, task, column.id) - } - onDragOver={(e) => dragOverTaskHandler(e, task)} - onDragLeave={(e) => dragLeaveTaskHandler(e)} - onDragEnd={() => dragEndTaskHandler()} - onDrop={(e) => - dragDropTaskHandler(e, task, column) - } - onClick={(e) => openTicket(e, task)} - > +
+ {column.tasks.map((task) => { + return (
{ - if (window.innerWidth < 985) { - window.location.replace( - `/tracker/task/${task.id}` - ); - } - }} + key={task.id} + className={`tasks__board__item ${ + taskHover[task.id] ? "task__hover" : "" + }`} + draggable={true} + onDragStart={(e) => + dragStartHandler(e, task, column.id) + } + onDragOver={(e) => dragOverTaskHandler(e, task)} + onDragLeave={(e) => dragLeaveTaskHandler(e)} + onDragEnd={() => dragEndTaskHandler()} + onDrop={(e) => + dragDropTaskHandler(e, task, column) + } + onClick={(e) => openTicket(e, task)} > -

- {task.title} -

-
-

-
- - {task.executor?.fio - ? task.executor?.fio - : "Исполнитель не назначен"} - - {task.executor?.avatar && ( - { + if (window.innerWidth < 985) { + window.location.replace( + `/tracker/task/${task.id}` + ); } - alt="avatar" - /> - )} -
-
-

Срок исполнения:

- - {task.dead_line - ? getCorrectDate(task.dead_line) - : "Не выбран"} - -
-
-
- commentsImg - - {task.comment_count}{" "} - {caseOfNum(task.comment_count, "comments")} - + }} + > +

+ {task.title} +

-
- filesImg +

+
- {task.files ? task.files : 0}{" "} - {caseOfNum(0, "files")} + {task.executor?.fio + ? task.executor?.fio + : "Исполнитель не назначен"} + {task.executor?.avatar && ( + avatar + )}
-
- item.id !== column.id + {task.dead_line && ( +
+

Срок исполнения:

+ + {getCorrectDate(task.dead_line)} + +
)} - currentColumn={column} - task={task} - /> -
- ); - })} +
+
+ commentsImg + + {task.comment_count}{" "} + {caseOfNum( + task.comment_count, + "comments" + )} + +
+
+ filesImg + + {task.files ? task.files : 0}{" "} + {caseOfNum(0, "files")} + +
+
+ item.id !== column.id + )} + currentColumn={column} + task={task} + /> +
+ ); + })} +
); })} diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js index 2ca8e8be..955c1e7d 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.js @@ -9,7 +9,7 @@ import { setToggleTab, } from "@redux/projectsTrackerSlice"; -import { urlForLocal } from "@utils/helper"; +import { caseOfNum, urlForLocal } from "@utils/helper"; import { apiRequest } from "@api/request"; @@ -295,7 +295,10 @@ export const Tracker = () => {

Архив задач:

-

{filterCompleteTasks.length} задач(а)

+

+ {`${filterCompleteTasks.length} + ${caseOfNum(filterCompleteTasks.length, "tasks")}`} +

search {

Архив проектов:

- {projects.filter((project) => project.status === 10).length}{" "} - проект(ов) + {`${ + projects.filter((project) => project.status === 10).length + } + ${caseOfNum( + projects.filter((project) => project.status === 10) + .length, + "projects" + )}`}

diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index 6a5b48b9..5a8e1896 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -801,16 +801,17 @@ 0px 0px 0px 1px rgba(60, 66, 87, 0.08), 0px 1px 1px rgba(0, 0, 0, 0.06); border-radius: 8px; - padding: 16px 14px 16px 8px; - min-width: 353px; - max-width: 353px; + padding: 12px 10px 12px 8px; + min-width: 365px; + max-width: 380px; display: flex; flex-direction: column; - row-gap: 16px; + row-gap: 10px; height: fit-content; position: relative; transition: all 0.3s ease; transform: scaleY(-1); + min-height: 815px; @media (max-width: 900px) { min-width: auto; @@ -819,19 +820,28 @@ transform: scaleX(1); } - &::-webkit-scrollbar { - width: 3px; - border-radius: 10px; - } + .tasksContainer { + display: flex; + flex-direction: column; + row-gap: 16px; + max-height: 750px; + overflow: auto; + padding: 8px; - &::-webkit-scrollbar-thumb { - background: #cbd9f9; - border-radius: 20px; - } + &::-webkit-scrollbar { + width: 3px; + border-radius: 10px; + } - &::-webkit-scrollbar-track { - background: #c5c0c6; - border-radius: 20px; + &::-webkit-scrollbar-thumb { + background: #cbd9f9; + border-radius: 20px; + } + + &::-webkit-scrollbar-track { + background: #c5c0c6; + border-radius: 20px; + } } &__hover { diff --git a/src/utils/helper.js b/src/utils/helper.js index eccfa1a7..d530919e 100644 --- a/src/utils/helper.js +++ b/src/utils/helper.js @@ -65,30 +65,17 @@ export function getCorrectRequestDate(date) { } export function caseOfNum(number, type) { - const comments = ["коментарий", "комментария", " коментариев"]; - const files = ["файл", "файла", "файлов"]; - const persons = ["участник", "участника", "участников"]; + const allTypes = { + comments: ["коментарий", "комментария", " коментариев"], + files: ["файл", "файла", "файлов"], + persons: ["участник", "участника", "участников"], + tasks: ["задача", "задачи", "задач"], + projects: ["проект", "проекта", "проектов"], + }; const cases = [2, 0, 1, 1, 1, 2]; - if (type === "comments") { - return comments[ - number % 100 > 4 && number % 100 < 20 - ? 2 - : cases[number % 10 < 5 ? number % 10 : 5] - ]; - } - if (type === "files") { - return files[ - number % 100 > 4 && number % 100 < 20 - ? 2 - : cases[number % 10 < 5 ? number % 10 : 5] - ]; - } - - if (type === "persons") { - return persons[ - number % 100 > 4 && number % 100 < 20 - ? 2 - : cases[number % 10 < 5 ? number % 10 : 5] - ]; - } + return allTypes[type][ + number % 100 > 4 && number % 100 < 20 + ? 2 + : cases[number % 10 < 5 ? number % 10 : 5] + ]; }