Merge pull request #122 from apuc/tracker-tasks

Tracker tasks

src/components/Modal/Tracker/ModalTicket/modalTicket.scss

@@ -746,6 +746,11 @@
         top: 10px !important;
         left: -110px !important;
         z-index: 10;
+
+        @media (max-width: 880px) {
+          left: 0 !important;
+          top: -15px !important;
+        }
       }
 
       .react-datepicker__current-month {

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

@@ -479,7 +479,7 @@ export const TicketFullScreen = () => {
         <div className="tracker__tabs__head">
           <Link
             to="/profile/tracker"
-            className="tab active-tab"
+            className="tab active-tab projectsTab"
             onClick={() => toggleTabs(1)}
           >
             <img src={project} alt="img" />
@@ -487,7 +487,7 @@ export const TicketFullScreen = () => {
           </Link>
           <Link
             to="/profile/tracker"
-            className="tab"
+            className="tab tasksTab"
             onClick={() => toggleTabs(2)}
           >
             <img src={tasks} alt="img" />
@@ -495,7 +495,7 @@ export const TicketFullScreen = () => {
           </Link>
           <Link
             to="/profile/tracker"
-            className="tab"
+            className="tab archiveTab"
             onClick={() => toggleTabs(3)}
           >
             <img src={archive} alt="img" />
@@ -626,7 +626,9 @@ export const TicketFullScreen = () => {
                       }}
                     />
                   ) : (
-                    <h5 className="fullName">{inputsValue.title}</h5>
+                    <h5 className="fullName nameFullScreen">
+                      {inputsValue.title}
+                    </h5>
                   )}
                   <div className="content__description">
                     {editOpen ? (
@@ -657,7 +659,7 @@ export const TicketFullScreen = () => {
                       />
                     ) : (
                       <p
-                        className="fullDescription"
+                        className="fullDescription fullScreenDescription"
                         dangerouslySetInnerHTML={{
                           __html: inputsValue.description,
                         }}
@@ -665,7 +667,7 @@ export const TicketFullScreen = () => {
                     )}
                   </div>
                   {Boolean(taskFiles.length) && (
-                    <div className="task__files">
+                    <div className="task__files filesFullScreen">
                       {taskFiles.map((file) => {
                         return (
                           <div className="taskFile" key={file.id}>
@@ -742,7 +744,7 @@ export const TicketFullScreen = () => {
                       {caseOfNum(taskFiles.length, "files")}
                     </div>
                   </div>
-                  <div className="content__input">
+                  <div className="content__input commentFullScreen">
                     <input
                       placeholder="Оставить комментарий"
                       value={inputsValue.comment}
@@ -771,11 +773,10 @@ export const TicketFullScreen = () => {
                   </div>
                 </div>
               </div>
-              <div className="workers">
+              <div className="workers fullScreenWorkers">
                 <div className="workers_box task__info">
                   <p className="workers__creator">
-                    Создатель : <br />
+                    Создатель :<p>&nbsp;{taskInfo.user?.fio}</p>
-                    {taskInfo.user?.fio}
                   </p>
 
                   {taskInfo.executor ? (

src/components/Modal/Tracker/TicketFullScreen/ticketFullScreen.scss

@@ -8,6 +8,112 @@
 
   &-whith {
     width: 850px !important;
+
+    @media (max-width: 1190px) {
+      width: auto !important;
+      margin: 0 !important;
+    }
+  }
+
+  @media (max-width: 880px) {
+    flex-direction: column !important;
+  }
+}
+
+.fullScreenWorkers {
+  @media (max-width: 880px) {
+    background: #DFF1FF;
+
+    .workers_box {
+      @media (max-width: 880px) {
+        flex-direction: inherit !important;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 10px;
+        padding: 10px 18px !important;
+
+        .workers__creator {
+          margin-bottom: 0 !important;
+          display: flex;
+
+        }
+
+        .add-worker {
+          margin: 0 !important;
+        }
+
+        .executor {
+          p {
+            max-width: none !important;
+          }
+        }
+      }
+    }
+
+    .workers_box-middle {
+      padding: 0 10px !important;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 20px;
+      border-bottom: none !important;
+
+      .deadLine {
+        width: 100%;
+      }
+
+      .start {
+        margin-top: 0 !important;
+        order: 2;
+      }
+
+      .time {
+        margin-top: 0;
+        order: 3;
+      }
+    }
+
+    .workers_box-bottom {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      padding: 10px !important;
+
+      div {
+        width: 145px;
+      }
+    }
+  }
+}
+
+.commentFullScreen {
+  @media (max-width: 520px) {
+    width: auto !important;
+  }
+}
+
+.filesFullScreen {
+  @media (max-width: 520px) {
+    justify-content: space-evenly;
+    max-height: 400px !important;
+  }
+}
+
+.comments__list__item {
+  @media (max-width: 520px) {
+    padding: 0 !important;
+  }
+}
+
+.nameFullScreen {
+  @media (max-width: 520px) {
+    white-space: inherit !important;
+  }
+}
+
+.fullScreenDescription {
+  @media (max-width: 1190px) {
+    white-space: inherit !important;
   }
 }
 

src/components/TrackerSelectColumn/TrackerSelectColumn.jsx

@@ -15,7 +15,7 @@ export const TrackerSelectColumn = ({ columns, task, currentColumn }) => {
       className="trackerSelectColumn"
       onClick={() => setOpenSelect(!openSelect)}
     >
-      <p>Выберите колонку</p>
+      <p>{currentColumn.title}</p>
       <img className={openSelect ? "open" : ""} src={arrowDown} alt="arrow" />
       {openSelect && (
         <div className="trackerSelectColumn__dropDown">
@@ -26,7 +26,7 @@ export const TrackerSelectColumn = ({ columns, task, currentColumn }) => {
                 onClick={() => {
                   dispatch(
                     moveProjectTask({
-                      startWrapperIndex: { index: currentColumn, task },
+                      startWrapperIndex: { index: currentColumn.id, task },
                       columnId: column.id,
                     })
                   );

src/components/TrackerSelectColumn/trackerSelectColumn.scss

@@ -15,8 +15,8 @@
 
     p {
       color: #252c32;
-      font-weight: 400;
+      font-weight: 500;
-      font-size: 14px;
+      font-size: 16px;
       line-height: 24px;
     }
 

src/pages/ProjectTracker/ProjectTracker.js

@@ -194,7 +194,7 @@ export const ProjectTracker = () => {
   }
 
   function openTicket(e, task) {
-    if (window.innerWidth < 900) {
+    if (window.innerWidth < 985) {
       return;
     }
     setSelectedTicket(task);
@@ -634,7 +634,16 @@ export const ProjectTracker = () => {
                               }
                               onClick={(e) => openTicket(e, task)}
                             >
-                              <div className="tasks__board__item__title">
+                              <div
+                                className="tasks__board__item__title"
+                                onClick={() => {
+                                  if (window.innerWidth < 985) {
+                                    window.location.replace(
+                                      `https://itguild.info/tracker/task/${task.id}`
+                                    );
+                                  }
+                                }}
+                              >
                                 <p className="task__board__item__title">
                                   {task.title}
                                 </p>
@@ -690,7 +699,7 @@ export const ProjectTracker = () => {
                                 columns={projectBoard.columns.filter(
                                   (item) => item.id !== column.id
                                 )}
-                                currentColumn={column.id}
+                                currentColumn={column}
                                 task={task}
                               />
                             </div>

src/pages/Tracker/tracker.scss

@@ -402,7 +402,7 @@
 
             .persons__list {
               position: absolute;
-              z-index: 2;
+              z-index: 20;
               display: flex;
               flex-direction: column;
               background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
@@ -527,6 +527,33 @@
                   max-width: none;
                 }
               }
+
+              @media (max-width: 1000px) {
+                width: 390px;
+                padding: 15px 30px;
+                .persons__list__info {
+                  margin: 10px;
+                }
+
+                .persons__list__items {
+                  flex-direction: column;
+                  margin-bottom: 20px;
+                  row-gap: 15px;
+
+                  .persons__list__item {
+                    max-width: none;
+                    span {
+                      max-width: none;
+                      width: 100%;
+                    }
+                  }
+                }
+              }
+
+              @media (max-width: 440px) {
+                width: 290px;
+                padding: 15px 20px;
+              }
             }
           }
 
@@ -620,6 +647,17 @@
                 width: 20px;
                 height: 20px;
               }
+
+              @media (max-width: 915px) {
+                width: 100%;
+                max-width: none;
+                justify-content: start;
+
+                p {
+                  font-size: 16px;
+                  max-width: none;
+                }
+              }
             }
             p {
               color: #252c32;
@@ -659,6 +697,11 @@
                   overflow: hidden;
                   white-space: nowrap;
                   text-overflow: ellipsis;
+
+
+                  @media (max-width: 915px) {
+                    max-width: none;
+                  }
                 }
 
                 img {
@@ -811,6 +854,7 @@
 
             @media (max-width: 900px) {
               width: 100%;
+              max-height: none;
 
               &:hover {
                 transform: none;
@@ -1025,6 +1069,10 @@
               font-size: 14px;
               line-height: 22px;
             }
+
+            @media (max-width: 900px) {
+              transform: none;
+            }
           }
         }