diff --git a/src/Components/Dashboard/Dashboard.js b/src/Components/Dashboard/Dashboard.js index 448bb31..86f2e91 100644 --- a/src/Components/Dashboard/Dashboard.js +++ b/src/Components/Dashboard/Dashboard.js @@ -1,6 +1,7 @@ -import React, { useState, useContext, useEffect } from "react"; +import React, { useState, useContext, useEffect, useRef } from "react"; import { CaseCard } from "../../pageElements/Cards.js"; import { Link, useNavigate } from "react-router-dom"; +import MobileContent from "../MobileContent"; import { ArrowRight, Activity, @@ -16,6 +17,9 @@ import UploadModal from "../Modals/UploadModal.js"; import Button from "react-bootstrap/Button"; const Dashboard = () => { + const size = window.innerWidth < 440; + const [isMobile, setIsMobile] = useState(size); + const count = useRef(null); const navigate = useNavigate(); const [allCases, setAllCases] = useState(null); const [selectedCase, setSelectedCase] = useState(null); @@ -25,6 +29,18 @@ const Dashboard = () => { const { appState } = useContext(AppContext); const { group } = appState; const appUserId = group ? group.appUserId : null; + const isDashboard = true; + useEffect(() => { + if (count.current == null) { + setIsMobile(window.innerWidth < 440); + } + if (count.current < 3) { + setIsMobile(window.innerWidth < 440); + } + return () => { + count.current = 1; + }; + }, []); function getCases() { if (!appUserId) { @@ -83,6 +99,67 @@ const Dashboard = () => { return null; } + const DesktopContent = () => { + return allCases !== null ? ( +
+
+ { + let item = null; + for (const currentItem of selected) { + item = { ...currentItem }; + } + setSelectedCase(item); + }} + /> + + +
+ {allCases.slice(0, 3).map((c, i) => ( + + ))} + {allCases?.length > 3 ? ( +
+
+ + View All{" "} + + + + +
+
+ ) : null} +
+ ) : null; + }; + return ( <>
@@ -179,65 +256,11 @@ const Dashboard = () => {
- {allCases === null ?
Loading...
: null} - {allCases !== null ? ( -
-
- { - let item = null; - for (const currentItem of selected) { - item = { ...currentItem }; - } - setSelectedCase(item); - }} - /> - - -
- {allCases.slice(0, 3).map((c, i) => ( - - ))} - {allCases?.length > 3 ? ( -
-
- - View All{" "} - - - - -
-
- ) : null} -
- ) : null} + {isMobile ? ( + + ) : ( + + )} {showModal && selectedCase !== null ? ( ) : null} diff --git a/src/Components/Document/DocEditPage.js b/src/Components/Document/DocEditPage.js index dc5728c..d8e889e 100644 --- a/src/Components/Document/DocEditPage.js +++ b/src/Components/Document/DocEditPage.js @@ -57,7 +57,6 @@ const DocEditPage = () => { : docEditCopy.NewYork; const headerPicker = () => { - console.log("state", state); switch (state) { case "New York": return ( diff --git a/src/Components/Document/DocumentListPage.js b/src/Components/Document/DocumentListPage.js index 90d2692..1837224 100644 --- a/src/Components/Document/DocumentListPage.js +++ b/src/Components/Document/DocumentListPage.js @@ -106,7 +106,6 @@ const DocumentListPage = ({ perPage }) => { async function deleteFromStorage() { const selectedDoc = allDocs.filter((doc) => { - console.log("doc", doc); return doc.documentId == selectedDocumentId; }); console.log( diff --git a/src/Components/Home/DemoRequestPage.js b/src/Components/Home/DemoRequestPage.js index b68c29d..73a285d 100644 --- a/src/Components/Home/DemoRequestPage.js +++ b/src/Components/Home/DemoRequestPage.js @@ -40,7 +40,6 @@ const DemoRequestPage = () => { }; async function saveUserData(dataValues) { - console.log("saveUserData dataValues", dataValues); const { firstName, lastName, firm, telephone, email } = dataValues; const requestDate = new Date(); dataValues["requestDate"] = requestDate; diff --git a/src/Components/Home/HomePage.js b/src/Components/Home/HomePage.js index 824ad61..a84120f 100644 --- a/src/Components/Home/HomePage.js +++ b/src/Components/Home/HomePage.js @@ -191,7 +191,6 @@ const HomePage = () => {
-

Your Novodash displays important deadlines, sends email/SMS diff --git a/src/Components/Login/Login.js b/src/Components/Login/Login.js index 0b0b0a4..fca31c7 100644 --- a/src/Components/Login/Login.js +++ b/src/Components/Login/Login.js @@ -47,7 +47,7 @@ const Login = () => { function handleClick(e) { e.preventDefault(); - console.log("handleClick fired"); + //searchParams.set("mode", mode); //setSearchParams(searchParams); //navigate(`/passwordreset/?mode=enterEmail`); diff --git a/src/Components/MobileContent.js b/src/Components/MobileContent.js index f06332c..7bcc3b2 100644 --- a/src/Components/MobileContent.js +++ b/src/Components/MobileContent.js @@ -1,8 +1,23 @@ import legalTechFlip from "../Assets/Images/legalTechFlip.jpg"; +import { ExclamationTriangle } from "react-bootstrap-icons"; const MobileContent = ({ isDashboard }) => { - const copy = isDashboard - ? "hello dash" - : "Novodraft is a desktop application. Please login on your desktop device to use this feature"; + const copy = isDashboard ? ( + <> +

+

+ Novodraft is a desktop application. The functionailty of your + Dashboard in mobile mode is limited to displaying stats and important + notifications. +

+

+ Please login on your desktop device to use all of the functions your + Dashboard. +

+
+ + ) : ( + "Novodraft is a desktop application. Please login on your desktop device to use this feature." + ); return ( <> @@ -15,10 +30,33 @@ const MobileContent = ({ isDashboard }) => {
) : ( - <> + <> +
+
+ Notification Center +
+

+ +

+

No new notifications

+
+
+
+ )} -
{copy}
-
+
+ {isDashboard ? ( + <> +
+
{copy}
+
+ + ) : ( +
{copy}
+ )} +
); diff --git a/src/Components/Modals/CreateModal.js b/src/Components/Modals/CreateModal.js index 241c1c8..776c6c3 100644 --- a/src/Components/Modals/CreateModal.js +++ b/src/Components/Modals/CreateModal.js @@ -65,8 +65,6 @@ const CreateModal = ({ setShowModal, caseData }) => { const validateData = () => { const newData = getValidatedFormData(data, fields); const hasErrors = isFormDataHasErrors(newData); - console.log("newData", newData); - console.log("hasErrors", hasErrors); setData(newData); return hasErrors ? null : objectMap(({ value }) => value, newData); }; diff --git a/src/Components/Modals/UploadModal.js b/src/Components/Modals/UploadModal.js index 94b2f70..7bdbdae 100644 --- a/src/Components/Modals/UploadModal.js +++ b/src/Components/Modals/UploadModal.js @@ -72,7 +72,6 @@ const UploadModal = (props) => { body: file, }); const res = response; - console.log("-------------------------------------------->res", res); return res; } catch (error) { console.error("Error:", error); @@ -101,7 +100,7 @@ const UploadModal = (props) => { let response = {}; const res = await uploadFile(formData); - console.log("--------------------------res", res); + response["uuidName"] = uuidName; response["res"] = res; return response; diff --git a/src/Hooks/useReducer/reducers.js b/src/Hooks/useReducer/reducers.js index 66d3331..5688e15 100755 --- a/src/Hooks/useReducer/reducers.js +++ b/src/Hooks/useReducer/reducers.js @@ -3,7 +3,6 @@ export const useGroupReducer = (state, action) => { case "CREATE_GROUP": return { ...state, group: action.payload }; case "UPDATE_GROUP_NAME": - console.log("state, action.payload", state, action.payload); return [...state, { name: action.payload }]; case "DELETE_GROUP": return { ...state, group: null }; @@ -17,7 +16,6 @@ export const useDataReducer = (state, action) => { case "CREATE_CASES": return { ...state, cases: action.payload }; case "UPDATE_GROUP_NAME": - console.log("state, action.payload", state, action.payload); return [...state, { cases: action.payload }]; default: return state; diff --git a/src/styles/app.scss b/src/styles/app.scss index 2200686..d431a4c 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -77,10 +77,19 @@ p { justify-content: center; margin: 18px 2px 0px 2px; padding: 2px 2px; - background-color: var(--background-blue); border-radius: 18px; } + .lower-foo { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: auto; + background-color: var(--background-blue); + border-radius: 15px; + } + .mobile-divider { height: 8px; width: 88%; @@ -99,4 +108,40 @@ p { font-size: 15px; line-height: 21px; } + .mobile-info-heading-dashboard { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 2px 6px 2px 6px; + text-align: justify; + font-size: 15px; + line-height: 21px; + } + + .mobile-text-dashboard { + margin-bottom: 6px; + padding: 0px 6px; + } + .notication-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-right: auto; + margin-left: auto; + margin-bottom: 40px; + } + + .notication-text-container { + display: flex; + flex-direction: row; + width: 100%; + font-size: 1rem; + margin-top: 12px; + } + + .notification-text { + margin-left: 16px; + } } diff --git a/src/styles/dashboard.scss b/src/styles/dashboard.scss index ab568f3..2dd6da5 100644 --- a/src/styles/dashboard.scss +++ b/src/styles/dashboard.scss @@ -80,8 +80,51 @@ flex-direction: column; } -@media only screen and (min-width: map.get($grid-breakpoints, "md")) { +@media only screen and (max-width: 430px) { + .dashboard-header { + display: flex; + gap: 1rem; + justify-content: center; + margin: 30px 0px 0px 0px; + align-items: center; + margin-left: auto; + margin-right: auto; + padding: 12px 0px; + width: 280px; + background-color: var(--background-blue); + border-radius: 15px; + } + .dashboard-filter { flex-direction: row; } + + .stats-container { + height: 100%; + } + + .stats-row-box { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 12px; + margin-bottom: 0px; + padding: 0px 6px; + background-color: #fff; + height: 100%; + border-radius: 6px; + } + + .stats-unit-wrapper { + display: flex; + flex-direction: row; + background-color: var(--barely-there-accent); + margin: 4px 0px; + padding: 8px 0px; + border-radius: 15px; + } + + .notification-center { + background-color: red; + } }