Merge pull request #656 from lazycipher/responsive-design

Responsive design for ticket system

Author: vaibhavdaren

src/user/Admin/Tickets/Filter/Filter.js

@@ -346,7 +346,7 @@ class Filter extends Component {
             onHide={this.toggleModal}
           >
             <LoadingOverlay
-              className="discussion"
+              className="discussion_container"
               active={!!this.state.spinner}
               text={this.state.spinner}
               spinner={<ClockLoader color={"#1A73E8"} />}

src/user/Admin/Tickets/TicketContent/DataTableCustomStyles.js

@@ -1,8 +1,8 @@
 const customStyles = {
   table: {
     style: {
-      width: "87vw",
-      height: "60vh",
+      width: "auto",
+      height: "auto",
     },
   },
   header: {

src/user/Admin/Tickets/TicketContent/TicketContent.js

@@ -36,13 +36,14 @@ class TicketContent extends Component {
 
     const columns = [
       {
-        name: "",
         grow: 5,
         selector: "title",
+        minWidth: '150px',
         cell: (row) => <CustomTitle row={row} />,
       },
       {
         grow: 3,
+        minWidth: '100px',
         cell: (row) =>
           row.tags.map((ele, index) => (
             <Badge
@@ -59,6 +60,7 @@ class TicketContent extends Component {
         name: "Created",
         sortable: true,
         selector: "createdAt",
+        minWidth: '200px',
         cell: (row) => (
           <div style={{ display: "flex", alignItems: "center" }}>
             <Image
@@ -99,6 +101,7 @@ class TicketContent extends Component {
 
     return (
       <DataTable
+        responsive
         pagination
         columns={columns}
         highlightOnHover={true}

src/user/Admin/Tickets/TicketContent/TicketContent.scss

@@ -11,6 +11,7 @@
 .Ticket-dashboard-ticket{
   display: flex;
   align-items: center;
+  width: 100%;
   .status {
     margin-right: 18px;
   }
@@ -19,4 +20,4 @@
     font-size: 1.1rem;
     font-family: Inter;
   }
-}
+}

src/user/Admin/Tickets/TicketDashboard.scss

@@ -52,6 +52,9 @@
       .ticket-content {
         flex: 10;
       }
+      .discussion {
+        margin-left: 0;
+      }
     }
   }
 }
@@ -91,7 +94,17 @@
 @media (min-width: 320px) and (max-width: 1024px){
   .ticket{ 
     .ticket-details {
+      width: 100%;
       margin-left: 0;
+      padding: 2.5vh 2.5vw;
+      .ticket-description {
+        .discussion_container {
+          flex-direction: column;
+        }
+        .ticket-content {
+          width: 100%;
+        }
+      }
     }
   }
 }

src/user/Admin/Tickets/TicketDiscussion/Layout/Layout.js

@@ -61,7 +61,7 @@ class Layout extends Component {
     } = this.props;
     return (
       <LoadingOverlay
-        className="discussion"
+        className="discussion_container"
         active={!!spinner}
         text={spinner}
         spinner={<ClockLoader color={"#1A73E8"} />}

src/user/Admin/Tickets/TicketDiscussion/TicketDiscussion.scss

@@ -1,4 +1,4 @@
-.discussion {
+.discussion_container {
   display: flex;
   ._loading_overlay_wrapper {
     height: 100%;
@@ -50,22 +50,13 @@
       }
     }
   }
-  .navigation {
-    background: #f5f5f5;
-    flex: 1;
-    border-right: solid 1px #dfe9f1;
-    position: fixed;
-    top: 0px;
-    bottom: 0px;
-    left: 0px;
-    overflow-y: scroll;
-  }
   .ticket-discussion {
     flex: 4;
     border-right: solid 1px #dfe9f1;
     .discussion {
       display: flex;
       flex-direction: column;
+      margin-left: 0;
       .discussion-title {
         display: flex;
         flex-grow: 0;
@@ -310,3 +301,29 @@
     }
   }
 }
+
+
+@media (min-width: 320px) and (max-width: 1024px){
+  .discussion_container {
+    .ticket-discussion {
+      border-right: none;
+      .discussion {
+        flex-direction: column;
+        #discussion-editor { 
+          margin: 2rem auto;
+        }
+        .discussion-title {
+          .ticket-title {
+            padding: 0;
+          } 
+        }
+        .single-discussion {
+          margin: 0;
+        }
+      }
+    }
+    .ticket-info {
+      margin-bottom:1rem;
+    }
+  }
+}

src/user/dashboard/navigation/navigation.scss

@@ -224,6 +224,11 @@
   }
   .hide-nav {
     transform: translateX(-105%);
+  }
+  .nav-container {
+    position: sticky;
+    top: 0;
+    z-index: 1020;
   }  
   .nav-container .navbar{
     display: block;