From 7022771cd58b26a80d07bd20ba59997b8f970e44 Mon Sep 17 00:00:00 2001 From: Sowmya-Raghuram Date: Mon, 23 Sep 2024 09:05:14 +0530 Subject: [PATCH] Mobile responsive, registration form changes --- .../components/Registration/Registration.css | 8 +++++ .../components/Registration/Registration.jsx | 16 +++++----- .../src/components/Volunteer/Volunteer.css | 4 +++ .../VolunteerExplore/VolunteerExplore.css | 4 +++ .../VolunteerFooter/VolunteerFooter.css | 13 +++++++++ .../VolunteerLogin/VolunteerLogin.css | 5 ++++ .../VolunteerLogin/VolunteerLogin.js | 7 +++-- .../VolunteerNeedType/VolunteerNeedType.css | 24 +++++++++++++++ .../components/VolunteerNeeds/NeedPopup.css | 9 ++++++ .../VolunteerNeeds/VolunteerNeeds.css | 29 +++++++++++++++++++ .../src/containers/ExplorePage/ExplorePage.js | 2 +- 11 files changed, 110 insertions(+), 11 deletions(-) diff --git a/src/main/frontend/src/components/Registration/Registration.css b/src/main/frontend/src/components/Registration/Registration.css index 9a559fca..e129f293 100644 --- a/src/main/frontend/src/components/Registration/Registration.css +++ b/src/main/frontend/src/components/Registration/Registration.css @@ -7,6 +7,10 @@ padding: 1% 7% 3% 25%; gap: 1%; align-items: start; + + @media (max-width: 600px) { + padding: 0; + } } .seperator { @@ -70,6 +74,10 @@ left: 7%; z-index: 1; width: 17%; + + @media (max-width: 600px) { + display: none; + } } .nav-element { diff --git a/src/main/frontend/src/components/Registration/Registration.jsx b/src/main/frontend/src/components/Registration/Registration.jsx index af6c899d..f59d91aa 100644 --- a/src/main/frontend/src/components/Registration/Registration.jsx +++ b/src/main/frontend/src/components/Registration/Registration.jsx @@ -883,7 +883,7 @@ const Registration = (props) => { required > -
+ {/*

{ value={formData.pincode ? formData.pincode : ""} onChange={handleChange} > -
+
*/} -
+ {/*
Preferences
@@ -1102,7 +1102,7 @@ const Registration = (props) => { />
-
+ */}
Additional Details @@ -1166,7 +1166,7 @@ const Registration = (props) => { ))}
-
+ {/*

{ value={formData.yoe ? formData.yoe : ""} onChange={handleChange} > -
+
*/} -
+ {/*
Skills
{formData.skills.map((skillData, index) => ( @@ -1244,7 +1244,7 @@ const Registration = (props) => { -
+
*/}
Reference & Consent diff --git a/src/main/frontend/src/components/Volunteer/Volunteer.css b/src/main/frontend/src/components/Volunteer/Volunteer.css index abee446f..4c4507f5 100644 --- a/src/main/frontend/src/components/Volunteer/Volunteer.css +++ b/src/main/frontend/src/components/Volunteer/Volunteer.css @@ -7,6 +7,10 @@ margin: 10px 20px 10px 10px; background-color: white; overflow: scroll; + + @media (max-width: 600px) { + margin: 10px 0 10px 10px; + } } .vHeader { padding: 10px 10px; diff --git a/src/main/frontend/src/components/VolunteerExplore/VolunteerExplore.css b/src/main/frontend/src/components/VolunteerExplore/VolunteerExplore.css index ca41a43b..f8254ef6 100644 --- a/src/main/frontend/src/components/VolunteerExplore/VolunteerExplore.css +++ b/src/main/frontend/src/components/VolunteerExplore/VolunteerExplore.css @@ -7,6 +7,10 @@ margin: 10px 20px 10px 10px; background-color: white; overflow: scroll; + + @media (max-width: 600px) { + margin: 10px 0 10px 10px; + } } .vNtypesHeader { padding: 10px 10px; diff --git a/src/main/frontend/src/components/VolunteerFooter/VolunteerFooter.css b/src/main/frontend/src/components/VolunteerFooter/VolunteerFooter.css index 3439f6d7..1688f187 100644 --- a/src/main/frontend/src/components/VolunteerFooter/VolunteerFooter.css +++ b/src/main/frontend/src/components/VolunteerFooter/VolunteerFooter.css @@ -6,6 +6,11 @@ padding: 60px 80px; color: white; border: none; + + @media (max-width: 600px) { + height: fit-content; + padding: 30px 30px; + } } .contentFooter p { font-size: 12px; @@ -14,10 +19,18 @@ } .wrapFooterTabs { display: flex; + + @media (max-width: 600px) { + flex-direction: column; + } } .footerTab { font-size: 15px; margin: 15px 30px 5px 0px; + + @media (max-width: 600px) { + margin: 20px 0px 5px 0px; + } } .footerIcons { margin-top: 30px; diff --git a/src/main/frontend/src/components/VolunteerLogin/VolunteerLogin.css b/src/main/frontend/src/components/VolunteerLogin/VolunteerLogin.css index 08eb9ba7..5b484ecc 100644 --- a/src/main/frontend/src/components/VolunteerLogin/VolunteerLogin.css +++ b/src/main/frontend/src/components/VolunteerLogin/VolunteerLogin.css @@ -12,6 +12,11 @@ .volunteerLogin { width: 30%; margin-left: 35%; + + @media (max-width: 600px) { + width: 70%; + margin-left: 15%; + } } .vloginForm { diff --git a/src/main/frontend/src/components/VolunteerLogin/VolunteerLogin.js b/src/main/frontend/src/components/VolunteerLogin/VolunteerLogin.js index 9c93e59c..509f8fd8 100644 --- a/src/main/frontend/src/components/VolunteerLogin/VolunteerLogin.js +++ b/src/main/frontend/src/components/VolunteerLogin/VolunteerLogin.js @@ -33,18 +33,21 @@ const VolunteerLogin = ({loginState, onClose}) => { signInWithPopup(auth, fprovider) } const userId = useSelector((state)=> state.user.data.osid) + const status = useSelector((state)=> state.user.status) const [ alertRegister, setAlertRegister ] = useState(false) useEffect(()=>{ if(auth.currentUser){ console.log(auth.currentUser) if(userId){ + setAlertRegister(false) onClose() } else { - setAlertRegister(true) + if(status === 'succeeded') + setAlertRegister(true) } } - },[auth.currentUser, userId]) + },[auth.currentUser, userId, status]) const history = useHistory(); const handleRegisterClick = (e) => { e.preventDefault(); diff --git a/src/main/frontend/src/components/VolunteerNeedType/VolunteerNeedType.css b/src/main/frontend/src/components/VolunteerNeedType/VolunteerNeedType.css index c943aa73..3dea936e 100644 --- a/src/main/frontend/src/components/VolunteerNeedType/VolunteerNeedType.css +++ b/src/main/frontend/src/components/VolunteerNeedType/VolunteerNeedType.css @@ -35,6 +35,11 @@ display: flex; justify-content: space-between; margin-bottom: 20px; + + @media (max-width: 600px) { + display: flex; + flex-direction: column; + } } .vSearchNT { border: solid #DBDBDB; @@ -42,6 +47,12 @@ padding: 2px; border-radius: 5px; background-color: #FFFFFF; + + @media (max-width: 600px) { + display: flex; + margin-left: 0.5rem; + width: 90%; + } } .vSearchNT i { color: #99999F; @@ -60,6 +71,10 @@ border-radius: 5px; background-color: white; margin-left: 10px; + + @media (max-width: 600px) { + width: 90%; + } } .vSortNT select { border: none; @@ -77,6 +92,10 @@ border: solid 1px #DBDBDB; border-radius: 3px; background-color: #F7F8F9; + + @media (max-width: 600px) { + width: 90%; + } } .toggleView button { padding: 2px; @@ -95,6 +114,11 @@ display: grid; grid-template-columns: repeat(3, 1fr); /* Create three equal columns */ gap: 16px; + @media (max-width: 600px) { + display: flex; + flex-direction: column; + margin-left: 3rem; +} } .wrapGrid { padding: 10px ; diff --git a/src/main/frontend/src/components/VolunteerNeeds/NeedPopup.css b/src/main/frontend/src/components/VolunteerNeeds/NeedPopup.css index ec87f744..9dd55354 100644 --- a/src/main/frontend/src/components/VolunteerNeeds/NeedPopup.css +++ b/src/main/frontend/src/components/VolunteerNeeds/NeedPopup.css @@ -19,6 +19,11 @@ margin-left: 75%; overflow: scroll; background-color: white; + + @media (max-width: 600px) { + width: 100%; + margin-left: 0; + } } .close-button { position: absolute; @@ -43,6 +48,10 @@ flex-direction: column; justify-content: space-between; font-size: 15px; + + @media (max-width: 600px) { + width: 90%; + } } .needPTitle { font-size: 20px; diff --git a/src/main/frontend/src/components/VolunteerNeeds/VolunteerNeeds.css b/src/main/frontend/src/components/VolunteerNeeds/VolunteerNeeds.css index 347771ab..ae012984 100644 --- a/src/main/frontend/src/components/VolunteerNeeds/VolunteerNeeds.css +++ b/src/main/frontend/src/components/VolunteerNeeds/VolunteerNeeds.css @@ -23,6 +23,10 @@ .vNeedFilters { display: flex; justify-content: space-between; + + @media (max-width: 600px) { + flex-direction: column; +} } .vSortNeed { display: flex; @@ -32,6 +36,12 @@ border-radius: 5px; margin-left: 100px; background-color: white; + + @media (max-width: 600px) { + margin-left: 0; + width: 90%; + margin-left: 2rem; +} } .vSortNeed select { padding: 3px; @@ -46,6 +56,12 @@ margin-right:100px; padding: 2px; background-color: #F7F8F9; + + + @media (max-width: 600px) { + width: 90%; + margin-left: 2rem; + } } .toggleNeedView button { border: none; @@ -58,6 +74,9 @@ display: flex; justify-content: center; margin: 10px 85px; + @media (max-width: 600px) { + margin: 0; + } } .needContainer { @@ -81,6 +100,10 @@ background-color: #fff; /* White background */ transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth transition for hover effects */ overflow: hidden; + + @media (max-width: 600px) { + height: 275px; + } } .needBox:hover { @@ -198,6 +221,12 @@ padding: 3px 5px; border-radius: 5px; background-color: #FFFFFF; + + @media (max-width: 600px) { + display: flex; + width: 90%; + margin-left: 2rem; +} } .vSearchNeed input { border: none; diff --git a/src/main/frontend/src/containers/ExplorePage/ExplorePage.js b/src/main/frontend/src/containers/ExplorePage/ExplorePage.js index 8e758713..05131fc1 100644 --- a/src/main/frontend/src/containers/ExplorePage/ExplorePage.js +++ b/src/main/frontend/src/containers/ExplorePage/ExplorePage.js @@ -16,7 +16,7 @@ function ExplorePage() {
-
+