From 915b3c4d0edc4cf93fe2823e9ad9227d22af2963 Mon Sep 17 00:00:00 2001 From: Simplystina <62130713+Simplystina@users.noreply.github.com> Date: Fri, 22 Apr 2022 18:31:49 +0100 Subject: [PATCH 1/2] site responsiveness improved --- Frontend/package-lock.json | 41 ++++++++++++ Frontend/package.json | 1 + .../Pages/ListofCreditors/ListofCreditors.jsx | 66 +++++++++++-------- Frontend/src/Pages/Sign-up/Signup.jsx | 34 ++++++---- Frontend/src/Pages/Signin/Signin.css | 37 ++++++++--- Frontend/src/Pages/Signin/Signin.jsx | 33 +++++++--- .../DashboardDetails/AnalyticsDashboard.jsx | 2 +- .../DashboardDetails/DashboardDetails.css | 17 ++--- .../DashboardDetails/DashboardDetails.jsx | 35 +++++++--- .../DashboardDetails/DashboardStatistics.jsx | 16 ++--- Frontend/src/components/Footer/Footer.jsx | 6 +- .../src/components/GetStarted/GetStarted.css | 0 .../src/components/GetStarted/Getstarted.jsx | 33 ++++++---- Frontend/src/components/Navbar/Navbar.css | 14 +++- Frontend/src/components/Navbar/Navbar.jsx | 35 +++++++--- .../components/PaymentInfo/PaymentInfo.jsx | 30 +++++++-- .../src/components/PlanAhead/Planahead.css | 6 ++ .../src/components/PlanAhead/Planahead.jsx | 28 ++++++-- .../components/SettingsInfo/SettingsInfo.css | 32 +++++++-- .../components/SettingsInfo/SettingsInfo.jsx | 40 ++++++++--- .../SettingsInfo/SettingsPassword.jsx | 8 +-- Frontend/src/components/Sidebar/Sidebar.css | 25 +++++++ Frontend/src/components/Sidebar/Sidebar.jsx | 2 +- Frontend/src/components/header/header.css | 7 ++ Frontend/src/components/header/header.jsx | 26 +++++--- Frontend/src/components/product/product.jsx | 30 ++++++--- 26 files changed, 448 insertions(+), 156 deletions(-) create mode 100644 Frontend/src/components/GetStarted/GetStarted.css diff --git a/Frontend/package-lock.json b/Frontend/package-lock.json index d73232c..ba7e52f 100644 --- a/Frontend/package-lock.json +++ b/Frontend/package-lock.json @@ -14,6 +14,7 @@ "@testing-library/jest-dom": "^5.16.3", "@testing-library/react": "^12.1.4", "@testing-library/user-event": "^13.5.0", + "aos": "^2.3.4", "axios": "^0.26.1", "d3": "^7.4.4", "framer-motion": "^3.10.6", @@ -5622,6 +5623,16 @@ "node": ">= 8" } }, + "node_modules/aos": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/aos/-/aos-2.3.4.tgz", + "integrity": "sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==", + "dependencies": { + "classlist-polyfill": "^1.0.3", + "lodash.debounce": "^4.0.6", + "lodash.throttle": "^4.0.1" + } + }, "node_modules/aproba": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz", @@ -6638,6 +6649,11 @@ "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz", "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==" }, + "node_modules/classlist-polyfill": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz", + "integrity": "sha1-k1vC39lFiodrJ5YXUUY4vKqWSi4=" + }, "node_modules/clean-css": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.0.tgz", @@ -13121,6 +13137,11 @@ "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz", "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=" }, + "node_modules/lodash.throttle": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", + "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=" + }, "node_modules/lodash.uniq": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", @@ -23394,6 +23415,16 @@ "picomatch": "^2.0.4" } }, + "aos": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/aos/-/aos-2.3.4.tgz", + "integrity": "sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==", + "requires": { + "classlist-polyfill": "^1.0.3", + "lodash.debounce": "^4.0.6", + "lodash.throttle": "^4.0.1" + } + }, "aproba": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz", @@ -24155,6 +24186,11 @@ "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz", "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==" }, + "classlist-polyfill": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz", + "integrity": "sha1-k1vC39lFiodrJ5YXUUY4vKqWSi4=" + }, "clean-css": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.0.tgz", @@ -28885,6 +28921,11 @@ "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz", "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=" }, + "lodash.throttle": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", + "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=" + }, "lodash.uniq": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", diff --git a/Frontend/package.json b/Frontend/package.json index 7fd9eca..1498870 100644 --- a/Frontend/package.json +++ b/Frontend/package.json @@ -9,6 +9,7 @@ "@testing-library/jest-dom": "^5.16.3", "@testing-library/react": "^12.1.4", "@testing-library/user-event": "^13.5.0", + "aos": "^2.3.4", "axios": "^0.26.1", "d3": "^7.4.4", "framer-motion": "^3.10.6", diff --git a/Frontend/src/Pages/ListofCreditors/ListofCreditors.jsx b/Frontend/src/Pages/ListofCreditors/ListofCreditors.jsx index 98ad278..d84da7c 100644 --- a/Frontend/src/Pages/ListofCreditors/ListofCreditors.jsx +++ b/Frontend/src/Pages/ListofCreditors/ListofCreditors.jsx @@ -2,7 +2,6 @@ import React, {useState, useEffect} from 'react' import {Box, Flex, Text, Spacer, Grid, GridItem, Icon, Center} from '@chakra-ui/react' import {BsSearch, BsBell} from 'react-icons/bs' import {AiOutlineUsergroupAdd, AiOutlineTeam, AiOutlinePlus, AiOutlineEdit, AiOutlineDelete} from 'react-icons/ai' -import {MdPayments} from 'react-icons/md' import {GiHamburgerMenu } from 'react-icons/gi' import {Table,Thead,Tbody,Tfoot,Tr,Th,Td,TableCaption,TableContainer, HStack} from '@chakra-ui/react' import {BsWallet} from 'react-icons/bs' @@ -17,6 +16,27 @@ import Signin from '../Signin/Signin' const ListofCreditors = () => { + + const [screenSize, setScreenSize] = useState(window.innerWidth) + + const checkSize = ()=>{ + //console.log(window.innerWidth) + return setScreenSize(window.innerWidth) + } + useEffect(()=>{ + window.addEventListener('resize', checkSize) + return ()=>{ + window.removeEventListener('resize', checkSize) + } + }) + useEffect(()=>{ + if (screenSize >=815) { + document.getElementById("sidenav").style.width = "16rem"; + document.getElementById("links-cont").style.display = "block"; + } + },[screenSize]) + + const [addCreditorModal, setAddcreditorModal] = useState(false) const [showEditModal, setShowEditModal] = useState(false) const [payCreditorModal, setPaycreditorModal] = useState(false) @@ -97,47 +117,40 @@ const ListofCreditors = () => { const payCreditor =()=>{ setPaycreditorModal(true) } - if (!token) { - return - } - if (loading) { - return <> - - - - } - const openSidebar = ()=>{ + const openSidebar = ()=>{ document.getElementById("sidenav").style.width = "16rem"; document.getElementById("links-cont").style.display = "block"; - //document.getElementById("dashboard-details").style.width = "0"; - + + } + if (loading) { + return } - - return ( - <> - - - - - - - +return( + <> + + + + {/* + + + */} List of Creditors View creditors @@ -147,6 +160,7 @@ const ListofCreditors = () => { fontSize='18px' fontWeight='bold' color='#2A0B9C' + p='0.5rem 0' >Quick Actions @@ -158,7 +172,7 @@ const ListofCreditors = () => { { const baseUrl = "https://debt-fix.herokuapp.com/register/" const [email, setEmail] = useState() @@ -58,27 +64,31 @@ const Signup = () => { useEffect( () => { console.log(alert) - let timer1 = setTimeout(() => setAlert({message1:'',message2:''}), 5000); + let timer1 = setTimeout(() => setAlert({message1:'',message2:''}), 2000); return () => { clearTimeout(timer1); }; }, [alert]); - + + useEffect(() => { + AOS.init(); + AOS.refresh(); + }, []); return ( <> - + - + - - + + { >Create an Account { onChange={e => setPassword(e.target.value)}/> - +
@@ -130,13 +140,13 @@ const Signup = () => { color='#271B3E' >Forgot Password - {alert.message1}{alert.message2} + {alert.message1}{alert.message2} { const baseUrl = "https://debt-fix.herokuapp.com/login/" @@ -62,23 +65,35 @@ const Signin = () => { } - + useEffect( + () => { + let timer1 = setTimeout(() => setAlert({text:'',link:''}), 2000); + return () => { + clearTimeout(timer1); + }; + + }, + [alert]); - + useEffect(() => { + AOS.init(); + AOS.refresh(); + }, []); + return ( <> - + - + - + { >Sign into your Account { { return ( <> - + diff --git a/Frontend/src/components/DashboardDetails/DashboardDetails.css b/Frontend/src/components/DashboardDetails/DashboardDetails.css index d0ef42c..4691b1f 100644 --- a/Frontend/src/components/DashboardDetails/DashboardDetails.css +++ b/Frontend/src/components/DashboardDetails/DashboardDetails.css @@ -209,6 +209,7 @@ Tr:nth-child(even) {background-color: #f2f2f2;} display: block !important; width: 60% !important; margin: 1rem auto !important; + padding: 0 1rem; } } @media screen and (max-width:815px) { @@ -226,9 +227,7 @@ Tr:nth-child(even) {background-color: #f2f2f2;} } } @media screen and (max-width:520px) { - .glow-on-hover{ - padding: 12px 15px; - } + .dashboard-stat{ width: 130px !important; } @@ -242,17 +241,15 @@ Tr:nth-child(even) {background-color: #f2f2f2;} width: 100px !important; height: 100px !important; } - .glow-on-hover{ - padding: 10px 12px !important; + .table-heading{ + font-size: 12px !important; } + } @media screen and (max-width:370px) { .dashboard-stat{ - width: 80px !important; - height: 80px !important; - } - .glow-on-hover{ - padding: 8px 12px !important; + width: 90px !important; + height: 90px !important; } } \ No newline at end of file diff --git a/Frontend/src/components/DashboardDetails/DashboardDetails.jsx b/Frontend/src/components/DashboardDetails/DashboardDetails.jsx index 4789bc5..b4ab2e6 100644 --- a/Frontend/src/components/DashboardDetails/DashboardDetails.jsx +++ b/Frontend/src/components/DashboardDetails/DashboardDetails.jsx @@ -21,9 +21,27 @@ import { useNavigate } from 'react-router-dom' const DashboardDetails = ({username,id, setLoading}) => { - - + + const [screenSize, setScreenSize] = useState(window.innerWidth) + + const checkSize = ()=>{ + //console.log(window.innerWidth) + return setScreenSize(window.innerWidth) + } + useEffect(()=>{ + window.addEventListener('resize', checkSize) + return ()=>{ + window.removeEventListener('resize', checkSize) + } + }) + useEffect(()=>{ + if (screenSize >=815) { + document.getElementById("sidenav").style.width = "16rem"; + document.getElementById("links-cont").style.display = "block"; + } +},[screenSize]) + const [addCreditorModal, setAddcreditorModal] = useState(false) const [showEditModal, setShowEditModal] = useState(false) const [payCreditorModal, setPaycreditorModal] = useState(false) @@ -105,23 +123,24 @@ const DashboardDetails = ({username,id, setLoading}) => { return ( <> - - + + {/* - + }*/} Welcome back, {username} Let us help you manage your debts @@ -141,7 +160,7 @@ const DashboardDetails = ({username,id, setLoading}) => { { <> - + Total Creditors { >{creditors_all} - + { p={{base:'0px 7px',sm:'5px 10px'}} >{creditors_paid} - - + + Total debts left diff --git a/Frontend/src/components/Footer/Footer.jsx b/Frontend/src/components/Footer/Footer.jsx index a088cf5..64e4a33 100644 --- a/Frontend/src/components/Footer/Footer.jsx +++ b/Frontend/src/components/Footer/Footer.jsx @@ -10,10 +10,10 @@ const Footer = () => { <> - logo + logo { >© 2022 DebtFix { + + useEffect(() => { + AOS.init(); + AOS.refresh(); + }, []); + return ( <> - + With 3 easy steps, get started on DebtFix - - + + - + 1 - + { - + 2 - + { 3 - + { + + const node = useRef(); + const [showsidebar, setShowsidebar] = useState(false) const showbar = ()=>{ setShowsidebar(!showsidebar) } - function getHeight(){ - console.log(window.innerHeight) - } + + const handleClick = e => { + if (node.current.contains(e.target)) { + // inside click + return; + } + document.getElementById('nav-links-container').style.display = "none" + + }; + useEffect(()=>{ - console.log(window.pageYOffset,'scroll') - }) + // add when mounted + document.addEventListener("mousedown", handleClick); + // return function to be called when unmounted + return () => { + document.removeEventListener("mousedown", handleClick); + }; + },[]) return ( <> - - logo + + + logo Home @@ -53,7 +69,8 @@ const Navbar = () => { - {showsidebar && + + {showsidebar &&