tracker tasks

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 {

src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx

@@ -120,6 +120,11 @@ export const ModalTiсket = ({
       },
     }).then((res) => {
       dispatch(setProjectBoardFetch(projectId));
+      showNotification({
+        show: true,
+        text: "Изменения сохранены",
+        type: "success",
+      });
     });
   }
 

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 {

src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx

@@ -21,6 +21,8 @@ import {
   urlForLocal,
 } from "@utils/helper";
 
+import { useNotification } from "@hooks/useNotification";
+
 import { apiRequest } from "@api/request";
 
 import { getCorrectDate } from "@components/Calendar/calendarHelper";
@@ -84,6 +86,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 +178,13 @@ export const TicketFullScreen = () => {
         title: inputsValue.title,
         description: inputsValue.description,
       },
-    }).then(() => {});
+    }).then(() => {
+      showNotification({
+        show: true,
+        text: "Изменения сохранены",
+        type: "success",
+      });
+    });
   }
 
   function createComment() {

src/components/SideBar/sidebar.scss

@@ -11,7 +11,6 @@
     position: fixed;
     width: 100% !important;
     height: 80px;
-    margin-bottom: 50px;
   }
 
   @media (max-width: 1440px) {

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 {

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 {

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;
     }
   }

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;
+      }
     }
   }
 }

src/pages/ProjectTracker/ProjectTracker.js

@@ -621,96 +621,98 @@ export const ProjectTracker = () => {
                             </div>
                           </div>
                         )}
-                        {column.tasks.map((task) => {
+                        <div className='tasksContainer'>
-                          return (
+                          {column.tasks.map((task) => {
-                            <div
+                            return (
-                              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)}
-                            >
                               <div
-                                className="tasks__board__item__title"
+                                key={task.id}
-                                onClick={() => {
+                                className={`tasks__board__item ${
-                                  if (window.innerWidth < 985) {
+                                  taskHover[task.id] ? "task__hover" : ""
-                                    window.location.replace(
+                                }`}
-                                      `/tracker/task/${task.id}`
+                                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)}
                               >
-                                <p className="task__board__item__title">
+                                <div
-                                  {task.title}
+                                  className="tasks__board__item__title"
-                                </p>
+                                  onClick={() => {
-                              </div>
+                                    if (window.innerWidth < 985) {
-                              <p
+                                      window.location.replace(
-                                dangerouslySetInnerHTML={{
+                                        `/tracker/task/${task.id}`
-                                  __html: task.description,
+                                      );
-                                }}
-                                className="tasks__board__item__description"
-                              ></p>
-                              <div className="tasks__board__item__executor">
-                                <span>
-                                  {task.executor?.fio
-                                    ? task.executor?.fio
-                                    : "Исполнитель не назначен"}
-                                </span>
-                                {task.executor?.avatar && (
-                                  <img
-                                    src={
-                                      task.executor?.avatar
-                                        ? urlForLocal(task.executor?.avatar)
-                                        : avatarMok
                                     }
-                                    alt="avatar"
+                                  }}
-                                  />
+                                >
-                                )}
+                                  <p className="task__board__item__title">
-                              </div>
+                                    {task.title}
-                              <div className="tasks__board__item__deadLine">
+                                  </p>
-                                <p>Срок исполнения:</p>
-                                <span>
-                                  {task.dead_line
-                                    ? getCorrectDate(task.dead_line)
-                                    : "Не выбран"}
-                                </span>
-                              </div>
-                              <div className="tasks__board__item__info">
-                                <div className="tasks__board__item__info__more">
-                                  <img src={commentsBoard} alt="commentsImg" />
-                                  <span>
-                                    {task.comment_count}{" "}
-                                    {caseOfNum(task.comment_count, "comments")}
-                                  </span>
                                 </div>
-                                <div className="tasks__board__item__info__more">
+                                <p
-                                  <img src={filesBoard} alt="filesImg" />
+                                  dangerouslySetInnerHTML={{
+                                    __html: task.description,
+                                  }}
+                                  className="tasks__board__item__description"
+                                ></p>
+                                <div className="tasks__board__item__executor">
                                   <span>
-                                    {task.files ? task.files : 0}{" "}
+                                    {task.executor?.fio
-                                    {caseOfNum(0, "files")}
+                                      ? task.executor?.fio
+                                      : "Исполнитель не назначен"}
                                   </span>
+                                  {task.executor?.avatar && (
+                                    <img
+                                      src={
+                                        task.executor?.avatar
+                                          ? urlForLocal(task.executor?.avatar)
+                                          : avatarMok
+                                      }
+                                      alt="avatar"
+                                    />
+                                  )}
                                 </div>
+                                {task.dead_line &&
+                                    <div className="tasks__board__item__deadLine">
+                                      <p>Срок исполнения:</p>
+                                      <span>
+                                        {getCorrectDate(task.dead_line)}
+                                      </span>
+                                    </div>
+                                }
+                                <div className="tasks__board__item__info">
+                                  <div className="tasks__board__item__info__more">
+                                    <img src={commentsBoard} alt="commentsImg" />
+                                    <span>
+                                      {task.comment_count}{" "}
+                                      {caseOfNum(task.comment_count, "comments")}
+                                    </span>
+                                  </div>
+                                  <div className="tasks__board__item__info__more">
+                                    <img src={filesBoard} alt="filesImg" />
+                                    <span>
+                                      {task.files ? task.files : 0}{" "}
+                                      {caseOfNum(0, "files")}
+                                    </span>
+                                  </div>
+                                </div>
+                                <TrackerSelectColumn
+                                  columns={projectBoard.columns.filter(
+                                    (item) => item.id !== column.id
+                                  )}
+                                  currentColumn={column}
+                                  task={task}
+                                />
                               </div>
-                              <TrackerSelectColumn
+                            );
-                                columns={projectBoard.columns.filter(
+                          })}
-                                  (item) => item.id !== column.id
+                        </div>
-                                )}
-                                currentColumn={column}
-                                task={task}
-                              />
-                            </div>
-                          );
-                        })}
                       </div>
                     );
                   })}

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,11 @@ export const Tracker = () => {
             <div className="archive__tasks">
               <div className="archive__title">
                 <h3>Архив задач:</h3>
-                <p>{filterCompleteTasks.length} задач(а)</p>
+                <p>
+                  {
+                    `${filterCompleteTasks.length} 
+                    ${caseOfNum(filterCompleteTasks.length, "tasks")}`
+                  }</p>
                 <div className="archive__tasks__search">
                   <img src={search} alt="search" />
                   <input
@@ -354,8 +358,9 @@ export const Tracker = () => {
               <div className="archive__title">
                 <h3>Архив проектов:</h3>
                 <p>
-                  {projects.filter((project) => project.status === 10).length}{" "}
+                  {
-                  проект(ов)
+                    `${projects.filter((project) => project.status === 10).length} 
+                     ${caseOfNum(projects.filter((project) => project.status === 10).length, "projects")}`}
                 </p>
               </div>
               <div className="archive__tasksWrapper">

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;
+          padding: 12px 10px 12px 8px;
-          min-width: 353px;
+          min-width: 365px;
-          max-width: 353px;
+          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 {
+          .tasksContainer {
-            width: 3px;
+            display: flex;
-            border-radius: 10px;
+            flex-direction: column;
-          }
+            row-gap: 16px;
+            max-height: 750px;
+            overflow: auto;
+            padding: 8px;
 
-          &::-webkit-scrollbar-thumb {
+            &::-webkit-scrollbar {
-            background: #cbd9f9;
+              width: 3px;
-            border-radius: 20px;
+              border-radius: 10px;
-          }
+            }
 
-          &::-webkit-scrollbar-track {
+            &::-webkit-scrollbar-thumb {
-            background: #c5c0c6;
+              background: #cbd9f9;
-            border-radius: 20px;
+              border-radius: 20px;
+            }
+
+            &::-webkit-scrollbar-track {
+              background: #c5c0c6;
+              border-radius: 20px;
+            }
           }
 
           &__hover {

src/utils/helper.js

@@ -65,30 +65,17 @@ export function getCorrectRequestDate(date) {
 }
 
 export function caseOfNum(number, type) {
-  const comments = ["коментарий", "комментария", " коментариев"];
+  const allTypes = {
-  const files = ["файл", "файла", "файлов"];
+    comments: ["коментарий", "комментария", " коментариев"],
-  const persons = ["участник", "участника", "участников"];
+    files: ["файл", "файла", "файлов"],
+    persons: ["участник", "участника", "участников"],
+    tasks: ["задача", "задачи", "задач"],
+    projects: ["проект", "проекта", "проектов"]
+  }
   const cases = [2, 0, 1, 1, 1, 2];
-  if (type === "comments") {
+  return allTypes[type][
-    return comments[
       number % 100 > 4 && number % 100 < 20
-        ? 2
+          ? 2
-        : cases[number % 10 < 5 ? number % 10 : 5]
+          : 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]
-    ];
-  }
 }