Merge pull request #123 from apuc/tracker-tasks

Tracker tasks

src/components/Common/ModalLayout/modalLayout.scss

@@ -15,7 +15,7 @@
     position: relative;
     background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
     border-radius: 24px;
-    padding: 35px 15px 15px 15px;
+    padding: 25px;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -29,6 +29,10 @@
         font-weight: 300;
         margin: 12px 0 20px;
       }
+
+      @media (max-width: 805px) {
+        row-gap: 0;
+      }
     }
 
     .invite__blocks {
@@ -53,6 +57,10 @@
           input {
             height: 42px;
           }
+
+          @media (max-width: 500px) {
+            min-width: auto;
+          }
         }
 
         &__btn {
@@ -61,6 +69,27 @@
           width: 100%;
         }
       }
+
+      @media (max-width: 805px) {
+        flex-direction: column;
+        width: 100%;
+
+        span {
+          text-align: center;
+          margin: 5px 0;
+        }
+
+        .invitePersonBlock {
+          row-gap: 5px;
+          &__btn {
+            margin: 5px auto;
+          }
+        }
+
+        .addPersonBtn {
+          margin: 10px auto 0;
+        }
+      }
     }
 
     .select__person {
@@ -68,11 +97,15 @@
       flex-direction: column;
       row-gap: 10px;
       padding: 39px 10px 29px 10px;
+
+      @media (max-width: 500px) {
+        padding: 10px;
+      }
     }
   }
 
   .ck-editor {
-    width: 100%;
+    width: 100% !important;
   }
 }
 

src/components/Modal/ModalSelect/modalSelect.scss

@@ -8,6 +8,12 @@
     bottom: -148px;
     right: -120px;
 
+    @media (max-width: 1050px) {
+      right: 10px;
+      padding-top: 10px;
+      bottom: -160px;
+    }
+
     &-menu {
       font-size: 14px;
       line-height: 38px;
@@ -32,6 +38,10 @@
       left: 10px;
       font-size: 21px;
       color: #6f6f6f;
+
+      @media (max-width: 1050px) {
+        display: none;
+      }
     }
   }
 

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

@@ -356,7 +356,7 @@
       flex-wrap: wrap;
       column-gap: 25px;
       row-gap: 20px;
-      margin-top: 10px;
+      margin-top: 33px;
       max-height: 350px;
       overflow-y: auto;
 
@@ -767,6 +767,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
+        font-size: 0;
 
         &:hover {
           background-color: white;

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

@@ -84,6 +84,16 @@
       }
     }
   }
+
+  @media (max-width: 450px) {
+    .workers_box {
+      .executor {
+        p {
+          max-width: 210px !important;
+        }
+      }
+    }
+  }
 }
 
 .commentFullScreen {

src/components/Modal/Tracker/TrackerModal/trackerModal.scss

@@ -190,6 +190,10 @@
     font-size: 22px;
     line-height: 26px;
     color: #263238 !important;
+
+    @media (max-width: 450px) {
+      font-size: 18px;
+    }
   }
 
   &__decs {

src/pages/ProjectTracker/ProjectTracker.js

@@ -361,13 +361,19 @@ export const ProjectTracker = () => {
                     </span> */}
                     <p>добавить колонку</p>
                   </div>
-                  <div className="tasks__head__persons">
+                  <div
+                    className={
+                      projectBoard.projectUsers?.length
+                        ? "tasks__head__persons"
+                        : "tasks__head__persons noProjectUsers"
+                    }
+                  >
                     {projectBoard.projectUsers?.length > 3 && (
                       <span className="countPersons">+1...</span>
                     )}
+                    {Boolean(projectBoard.projectUsers?.length) && (
                       <div className="projectPersons">
-                      {projectBoard.projectUsers?.length &&
+                        {projectBoard.projectUsers.slice(0, 3).map((person) => {
-                        projectBoard.projectUsers.slice(0, 3).map((person) => {
                           return (
                             <img
                               key={person.user_id}
@@ -381,6 +387,7 @@ export const ProjectTracker = () => {
                           );
                         })}
                       </div>
+                    )}
                     <span
                       className="addPerson"
                       onClick={() => {
@@ -639,7 +646,7 @@ export const ProjectTracker = () => {
                                 onClick={() => {
                                   if (window.innerWidth < 985) {
                                     window.location.replace(
-                                      `https://itguild.info/tracker/task/${task.id}`
+                                      `/tracker/task/${task.id}`
                                     );
                                   }
                                 }}

src/pages/Tracker/tracker.scss

@@ -48,7 +48,6 @@
       height: 60px;
 
       @media (max-width: 650px) {
-        padding: 0 15px;
         background: none;
         justify-content: space-between;
         position: relative;
@@ -149,10 +148,7 @@
         @media (max-width: 785px) {
           row-gap: 25px;
           justify-content: center;
-        }
+          padding: 0 15px 20px;
-
-        @media (max-width: 460px) {
-          padding: 0 15px;
         }
 
         .no-projects {
@@ -557,6 +553,21 @@
             }
           }
 
+          .noProjectUsers {
+            @media (max-width: 900px) {
+              position: inherit;
+
+              .addPerson {
+                position: inherit;
+              }
+
+              p {
+                position: inherit;
+                margin-left: 14px;
+              }
+            }
+          }
+
           &__checkBox {
             margin: 0 15px 0 0;
             cursor: pointer;
@@ -678,6 +689,7 @@
             &Dropdown {
               position: absolute;
               top: 33px;
+              left: 0;
               background: white;
               border-radius: 8px;
               z-index: 5;
@@ -1023,6 +1035,11 @@
             display: flex;
             flex-direction: column;
 
+            @media (max-width: 910px) {
+              right: 10px;
+              top: 40px;
+            }
+
             &__item {
               cursor: pointer;
               display: flex;
@@ -1041,6 +1058,10 @@
             font-weight: 500;
             font-size: 25px;
             transform: scaleY(-1);
+
+            @media (max-width: 900px) {
+              transform: none;
+            }
           }
 
           &__noTasks {
@@ -1328,6 +1349,10 @@
             }
           }
         }
+
+        @media (max-width: 650px) {
+          padding-bottom: 20px;
+        }
       }
 
       &__archive {
@@ -1342,6 +1367,10 @@
           row-gap: 20px;
         }
 
+        @media (max-width: 650px) {
+          padding-bottom: 20px;
+        }
+
         .archive {
           &__title {
             padding-bottom: 8px;
@@ -1492,7 +1521,6 @@
             max-height: 450px;
             padding-right: 15px;
             width: 65%;
-            overflow: hidden;
 
             @media (max-width: 1100px) {
               width: 100%;