adaptive

src/components/TrackerSelectColumn/TrackerSelectColumn.jsx

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+import { useDispatch } from "react-redux";
+
+import { moveProjectTask } from "@redux/projectsTrackerSlice";
+
+import arrowDown from "assets/icons/arrows/selectArrow.png";
+
+import './trackerSelectColumn.scss'
+
+export const TrackerSelectColumn = ({columns, task, currentColumn}) => {
+    const dispatch = useDispatch();
+    const [openSelect, setOpenSelect] = useState(false)
+    return(
+        <div className='trackerSelectColumn' onClick={() => setOpenSelect(!openSelect)}>
+            <p>Выберите колонку</p>
+            <img className={openSelect ? 'open' : ''} src={arrowDown} alt='arrow' />
+            {openSelect &&
+                <div className='trackerSelectColumn__dropDown'>
+                    {columns.map((column) => {
+                        return <p key={column.id} onClick={() => {
+                            dispatch(moveProjectTask({
+                                startWrapperIndex: {index: currentColumn, task},
+                                columnId: column.id
+                            }))
+                        }
+                        }>{column.title}</p>
+                    })
+                    }
+                </div>
+            }
+        </div>
+    )
+};
+
+export default TrackerSelectColumn;
+

src/components/TrackerSelectColumn/trackerSelectColumn.scss

@@ -0,0 +1,51 @@
+.trackerSelectColumn {
+  display: none;
+
+  @media (max-width: 900px) {
+    display: flex;
+    width: 100%;
+    margin: 10px 0;
+    justify-content: space-between;
+    align-items: center;
+    padding: 2px 6px;
+    cursor: pointer;
+    border: 1px solid #e3e2e2;;
+    border-radius: 8px;
+    position: relative;
+
+    p {
+      color: #252c32;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 24px;
+    }
+
+    img {
+      transition: all 0.3s ease;
+    }
+
+    .open {
+      transform: rotate(180deg);
+    }
+  }
+
+  &__dropDown {
+    position: absolute;
+    top: -110px;
+    background: white;
+    border-radius: 8px;
+    padding: 10px 10px;
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+    width: 100%;
+    z-index: 100;
+    border: 1px solid #c7c7c7;
+    left: 0;
+
+    p {
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+}

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;