filter and ticket action responsive

Author: lazycipher

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

@@ -262,17 +262,19 @@ class Filter extends Component {
               />
             </Form>
           </div>
-          <Button onClick={() => this.props.toggleNewTicketEditor(true)}>
-            New Ticket
-          </Button>
-          {isAdmin && (
-            <Button
-              style={{ marginLeft: "1rem" }}
-              onClick={() => this.setState({ modal: { view: "add" } })}
-            >
-              <PeopleAltIcon />
+          <div className="searchbar-action">
+            <Button onClick={() => this.props.toggleNewTicketEditor(true)}>
+              New Ticket
             </Button>
-          )}
+            {isAdmin && (
+              <Button
+                style={{ marginLeft: "1rem" }}
+                onClick={() => this.setState({ modal: { view: "add" } })}
+              >
+                <PeopleAltIcon />
+              </Button>
+            )}
+          </div>
         </div>
         <div className="filters">
           <div onClick={this.clearFilters} className="clear-filters">

src/user/Admin/Tickets/Filter/Filter.scss

@@ -65,3 +65,16 @@
     }
   }
 }
+
+@media (min-width: 320px) and (max-width: 1024px){
+  .searchbar-container {
+    flex-direction: column;;
+    .searchbar {
+      flex: 1;
+      margin: 0 0 10px 0;
+    }
+    .searchbar-action {
+      flex: 1;
+    }
+  }
+}

src/user/Admin/Tickets/TicketDashboard.js

@@ -219,89 +219,89 @@ class TicketDashboard extends Component {
       />
     );
     return (
-      <div className="ticket">
-        <div className="navigation">
-          <Navigation ticket={ticket} />
-        </div>
-        <div className="ticket-details" id="ticket-shadow">
-          <LoadingOverlay
-            text={spinner}
-            active={!!spinner}
-            spinner={<ClockLoader color={"#1A73E8"} />}
-            styles={{
-              spinner: (base) => ({
-                ...base,
-                width: "100px",
-                "& svg circle": {
-                  stroke: "rgba(26, 115, 232, 0.5)",
-                },
-              }),
-            }}
-          >
-            <div className="ticket-description">
-              <div className="dashboard-title">
-                Tickets
-                <Button variant="light" onClick={this.toggleDrawer}>
-                  <NotificationsNoneOutlinedIcon />
-                </Button>
+      <>
+        <Navigation ticket={ticket} />
+        <div className="ticket">
+          <div className="ticket-details" id="ticket-shadow">
+            <LoadingOverlay
+              text={spinner}
+              active={!!spinner}
+              spinner={<ClockLoader color={"#1A73E8"} />}
+              styles={{
+                spinner: (base) => ({
+                  ...base,
+                  width: "100px",
+                  "& svg circle": {
+                    stroke: "rgba(26, 115, 232, 0.5)",
+                  },
+                }),
+              }}
+            >
+              <div className="ticket-description">
+                <div className="dashboard-title">
+                  Tickets
+                  <Button variant="light" onClick={this.toggleDrawer}>
+                    <NotificationsNoneOutlinedIcon />
+                  </Button>
+                </div>
+                {!editorMode && !viewingTicket && ticketDashboard}
+                {editorMode && !viewingTicket && (
+                  <NewTicketEditor
+                    save={this.handleCreateNewTicket}
+                    cancel={() => this.toggleNewTicketEditor(false)}
+                  />
+                )}
+                {viewingTicket && ticeketDiscussion}
               </div>
-              {!editorMode && !viewingTicket && ticketDashboard}
-              {editorMode && !viewingTicket && (
-                <NewTicketEditor
-                  save={this.handleCreateNewTicket}
-                  cancel={() => this.toggleNewTicketEditor(false)}
-                />
-              )}
-              {viewingTicket && ticeketDiscussion}
-            </div>
-          </LoadingOverlay>
-          <Drawer
-            anchor={"right"}
-            open={notificationDrawer}
-            PaperProps={{ style: { position: "absolute", zIndex: "5000" } }}
-            BackdropProps={{ style: { position: "absolute", zIndex: "5000" } }}
-            ModalProps={{
-              container: document.getElementById("ticket-shadow"),
-              style: { position: "absolute", zIndex: "5000" },
-            }}
-            variant="temporary"
-            onClose={this.toggleDrawer}
-          >
-            <List className="list">
-              {notifications &&
-                notifications.map((notification, index) => (
-                  <ListItem
-                    key={index}
-                    style={{
-                      display: "flex",
-                      flexDirection: "column",
-                      alignItems: "flex-start",
-                    }}
-                  >
-                    <div>{notification.tag}</div>
-                    <div>{notification.heading}</div>
-                    <div>
-                      <Moment date={notification.createdAt} durationFromNow />
-                    </div>
-                    <div>{notification.content}</div>
-                    <hr></hr>
-                  </ListItem>
-                ))}
-            </List>
-          </Drawer>
-          <ToastContainer
-            draggable
-            rtl={false}
-            pauseOnHover
-            closeOnClick
-            autoClose={5000}
-            pauseOnFocusLoss
-            newestOnTop={false}
-            position="top-right"
-            hideProgressBar={false}
-          />
+            </LoadingOverlay>
+            <Drawer
+              anchor={"right"}
+              open={notificationDrawer}
+              PaperProps={{ style: { position: "absolute", zIndex: "5000" } }}
+              BackdropProps={{ style: { position: "absolute", zIndex: "5000" } }}
+              ModalProps={{
+                container: document.getElementById("ticket-shadow"),
+                style: { position: "absolute", zIndex: "5000" },
+              }}
+              variant="temporary"
+              onClose={this.toggleDrawer}
+            >
+              <List className="list">
+                {notifications &&
+                  notifications.map((notification, index) => (
+                    <ListItem
+                      key={index}
+                      style={{
+                        display: "flex",
+                        flexDirection: "column",
+                        alignItems: "flex-start",
+                      }}
+                    >
+                      <div>{notification.tag}</div>
+                      <div>{notification.heading}</div>
+                      <div>
+                        <Moment date={notification.createdAt} durationFromNow />
+                      </div>
+                      <div>{notification.content}</div>
+                      <hr></hr>
+                    </ListItem>
+                  ))}
+              </List>
+            </Drawer>
+            <ToastContainer
+              draggable
+              rtl={false}
+              pauseOnHover
+              closeOnClick
+              autoClose={5000}
+              pauseOnFocusLoss
+              newestOnTop={false}
+              position="top-right"
+              hideProgressBar={false}
+            />
+          </div>
         </div>
-      </div>
+      </>
     );
   }
 }

src/user/Admin/Tickets/TicketDashboard.scss

@@ -3,16 +3,6 @@
   height: 100vh;
 
   font-family: Muli, sans-serif;
-  .navigation {
-    background: #f5f5f5;
-    flex-grow: 1;
-    border-right: solid 1px #dfe9f1;
-    position: fixed;
-    top: 0px;
-    bottom: 0px;
-    left: 0px;
-    overflow-y: scroll;
-  }
   .ticket-details {
     ._loading_overlay_wrapper {
       height: 100%;
@@ -36,7 +26,7 @@
     .ticket-description {
       display: flex;
       flex-direction: column;
-      height: 100vh;
+      min-height: 100vh;
       overflow-y: hidden;
       .dashboard-title {
         font-family: Inter;
@@ -97,3 +87,12 @@
     flex-grow: 0;
   }
 }
+
+@media (min-width: 320px) and (max-width: 1024px){
+  .ticket{ 
+    .ticket-details {
+      margin-left: 0;
+    }
+  }
+}
+