adaptive

src/pages/ProjectTracker/ProjectTracker.js

@@ -35,6 +35,7 @@ import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
 import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
+import TrackerSelectColumn from "@components/TrackerSelectColumn/TrackerSelectColumn";
 
 import arrow from "assets/icons/arrows/arrowCalendar.png";
 import arrowDown from "assets/icons/arrows/selectArrow.png";
@@ -193,6 +194,9 @@ export const ProjectTracker = () => {
   }
 
   function openTicket(e, task) {
+    if (window. innerWidth < 900) {
+      return
+    }
     setSelectedTicket(task);
     setModalActiveTicket(true);
   }
@@ -298,7 +302,7 @@ export const ProjectTracker = () => {
         <div className="tracker__tabs__head">
           <Link
             to="/profile/tracker"
-            className="tab active-tab tab"
+            className="tab active-tab tab projectsTab"
             onClick={() => dispatch(setToggleTab(1))}
           >
             <img src={project} alt="img" />
@@ -306,7 +310,7 @@ export const ProjectTracker = () => {
           </Link>
           <Link
             to="/profile/tracker"
-            className="tab"
+            className="tab tasksTab"
             onClick={() => dispatch(setToggleTab(2))}
           >
             <img src={tasks} alt="img" />
@@ -314,7 +318,7 @@ export const ProjectTracker = () => {
           </Link>
           <Link
             to="/profile/tracker"
-            className="tab"
+            className="tab archiveTab"
             onClick={() => dispatch(setToggleTab(3))}
           >
             <img src={archive} alt="img" />
@@ -682,6 +686,10 @@ export const ProjectTracker = () => {
                                   </span>
                                 </div>
                               </div>
+                              <TrackerSelectColumn
+                                  columns={projectBoard.columns.filter((item) => item.id !== column.id)}
+                                  currentColumn={column.id}
+                                  task={task} />
                             </div>
                           );
                         })}

src/pages/Tracker/tracker.scss

@@ -231,6 +231,10 @@
         background: #ffffff;
         border-radius: 12px;
         flex-direction: column;
+
+        @media (max-width: 650px) {
+          border-radius: 0;
+        }
       }
 
       .tasks {
@@ -238,6 +242,14 @@
           border-bottom: 1px solid #dde2e4;
           padding: 0 35px 15px;
 
+          @media (max-width: 1000px) {
+            padding: 0 15px 15px;
+          }
+
+          @media (max-width: 650px) {
+            background-color: #DFF1FF;
+          }
+
           &__wrapper {
             display: flex;
             max-width: 1280px;
@@ -250,6 +262,13 @@
             &__fullScreen {
               max-width: 1160px;
             }
+
+            @media (max-width: 1350px) {
+              display: flex;
+              flex-wrap: wrap;
+              gap: 10px;
+              padding: 0px;
+            }
           }
 
           h5 {
@@ -263,6 +282,11 @@
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
+
+            @media (max-width: 1350px) {
+              width: 100%;
+              max-width: none;
+            }
           }
 
           &__add {
@@ -287,6 +311,14 @@
               display: flex;
               align-items: center;
             }
+
+            @media (max-width: 1350px) {
+              margin-left: 0;
+            }
+
+            @media (max-width: 700px) {
+              width: 100%;
+            }
           }
 
           &__persons {
@@ -294,6 +326,14 @@
             display: flex;
             align-items: center;
 
+            @media (max-width: 700px) {
+              right: -15px;
+            }
+
+            @media (max-width: 465px) {
+              width: 100%;
+            }
+
             .projectPersons {
               display: flex;
               position: relative;
@@ -496,6 +536,10 @@
             display: flex;
             align-items: center;
 
+            @media (max-width: 650px) {
+              margin: 0;
+            }
+
             span {
               color: #252c32;
               font-weight: 400;
@@ -533,6 +577,16 @@
             max-width: 220px;
             width: 100%;
 
+            @media (max-width: 915px) {
+              margin-right: 0;
+              width: 100%;
+              max-width: none;
+            }
+
+            @media (max-width: 650px) {
+              border-color: gray;
+            }
+
             &Selected {
               display: flex;
               align-items: center;
@@ -646,6 +700,10 @@
                 font-weight: 500;
               }
             }
+
+            @media (max-width: 1150px) {
+              display: none;
+            }
           }
         }
 
@@ -673,6 +731,13 @@
             background: #c5c0c6;
             border-radius: 20px;
           }
+
+          @media (max-width: 900px) {
+            padding: 15px;
+            flex-direction: column;
+            row-gap: 25px;
+            transform: none;
+          }
         }
 
         &__board {
@@ -690,10 +755,15 @@
           height: fit-content;
           position: relative;
           transition: all 0.3s ease;
-          //max-height: 500px;
-          //overflow-y: auto;
           transform: scaleY(-1);
 
+          @media (max-width: 900px) {
+            min-width: auto;
+            width: 100%;
+            max-width: none;
+            transform: scaleX(1);
+          }
+
           &::-webkit-scrollbar {
             width: 3px;
             border-radius: 10px;
@@ -739,6 +809,14 @@
               transition: 0.3s;
             }
 
+            @media (max-width: 900px) {
+              width: 100%;
+
+              &:hover {
+                transform: none;
+              }
+            }
+
             &__hide {
               opacity: 0;
             }
@@ -1456,7 +1534,8 @@
     @media (max-width: 650px) {
 
       &__content {
-        padding: 28px 0;
+        padding: 28px 0 0;
+        background-color: #DFF1FF;
 
         .project {
           background-color: white;