more

src/Components/Case/CaseListPage.js

@@ -1,7 +1,8 @@
-import React, { useEffect, useContext, useState } from "react";
+import React, { useEffect, useContext, useState, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import { CaseCard } from "../../pageElements/Cards.js";
 import CreateModal from "../Modals/CreateModal.js";
+import MobileContent from "../MobileContent.js";
 import { db } from "../../firebase";
 import { AppContext } from "../../Hooks/useContext/appContext";
 import SelectDropdown from "../../pageElements/SelectDropdown";
@@ -10,6 +11,9 @@ import ListPagination from "../../pageElements/ListPagination.js";
 import Button from "../../pageElements/Button";
 
 const CaseListPage = ({ perPage }) => {
+  const size = window.innerWidth < 440;
+  const [isMobile, setIsMobile] = useState(size);
+  const count = useRef(null);
   const navigate = useNavigate();
   const [showModal, setShowModal] = useState(false);
   const [allCases, setAllCases] = useState(null);
@@ -20,6 +24,15 @@ const CaseListPage = ({ perPage }) => {
   const { group } = appState;
   const appUserId = group ? group.appUserId : null;
 
+  useEffect(() => {
+    if (count.current == null) {
+      setIsMobile(window.innerWidth < 440);
+    }
+    return () => {
+      count.current = 1;
+    };
+  }, []);
+
   function getCases() {
     if (!appUserId) {
       setAllCases([]);
@@ -85,7 +98,8 @@ const CaseListPage = ({ perPage }) => {
   if (!group) {
     return null;
   }
-
+  console.log("window.innerWidth < 440", window.innerWidth < 440);
+  const DesktopContent = () => {
     return (
       <>
         <div className="doc-list-header">
@@ -147,6 +161,9 @@ const CaseListPage = ({ perPage }) => {
         ) : null}
       </>
     );
+  };
+
+  return isMobile ? <MobileContent /> : <DesktopContent />;
 };
 
 export default CaseListPage;

src/Components/MobileContent.js

@@ -0,0 +1,27 @@
+import legalTechFlip from "../Assets/Images/legalTechFlip.jpg";
+const MobileContent = ({ isDashboard }) => {
+  const copy = isDashboard
+    ? "hello dash"
+    : "Novodraft is a desktop application. Please login on your desktop device to use this feature";
+
+  return (
+    <>
+      <div className="mobile-content-container">
+        {!isDashboard ? (
+          <>
+            <div className="mobile-divider"></div>
+            <div className="features-top-mobile-img">
+              <img className="features-image-one" src={legalTechFlip} />
+            </div>
+          </>
+        ) : (
+          <></>
+        )}
+        <div className="mobile-info-heading">{copy}</div>
+        <div className="mobile-divider"></div>
+      </div>
+    </>
+  );
+};
+
+export default MobileContent;

src/styles/app.scss

@@ -70,4 +70,33 @@ p {
 /*** Media Queries  **/
 
 @media only screen and (max-width: 430px) {
+  .mobile-content-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 18px 2px 0px 2px;
+    padding: 2px 2px;
+    background-color: var(--background-blue);
+    border-radius: 18px;
+  }
+
+  .mobile-divider {
+    height: 8px;
+    width: 88%;
+    margin: 2px 0px 16px 0px;
+    padding: 6px 0px;
+    border-bottom: 1px solid var(--accent-orange-light);
+  }
+
+  .mobile-info-heading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 28px 6px 2px 6px;
+    text-align: justify;
+    font-size: 15px;
+    line-height: 21px;
+  }
 }