Mobile responsive, registration form changes

Sunbird-Serve · Sep 23, 2024 · 7022771 · 7022771
1 parent 4a1ced7
commit 7022771
Show file tree

Hide file tree

Showing 11 changed files with 110 additions and 11 deletions.
diff --git 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
@@ -883,7 +883,7 @@ const Registration = (props) => {
                   required
                 ></input>
               </div>
-              <div className="formElement">
+              {/* <div className="formElement">
                 <label>Address</label>
                 <br />
                 <input
@@ -957,11 +957,11 @@ const Registration = (props) => {
                   value={formData.pincode ? formData.pincode : ""}
                   onChange={handleChange}
                 ></input>
-              </div>
+              </div> */}
             </div>
           </div>
 
-          <div className="form-section" id={2} ref={refArray[2]}>
+          {/* <div className="form-section" id={2} ref={refArray[2]}>
             <span className="formCat">Preferences</span>
             <hr className="form-line" />
             <div className="formEntries">
@@ -1102,7 +1102,7 @@ const Registration = (props) => {
                 />
               </div>
             </div>
-          </div>
+          </div> */}
 
           <div className="form-section" id={3} ref={refArray[3]}>
             <span className="formCat">Additional Details</span>
@@ -1166,7 +1166,7 @@ const Registration = (props) => {
                   ))}
                 </Select>
               </div>
-              <div className="formElement">
+              {/* <div className="formElement">
                 <label>Years of Experience</label>
                 <br />
                 <input
@@ -1177,11 +1177,11 @@ const Registration = (props) => {
                   value={formData.yoe ? formData.yoe : ""}
                   onChange={handleChange}
                 ></input>
-              </div>
+              </div> */}
             </div>
           </div>
 
-          <div className="form-section" id={4} ref={refArray[4]}>
+          {/* <div className="form-section" id={4} ref={refArray[4]}>
             <span className="formCat">Skills</span>
             <hr className="form-line" />
             {formData.skills.map((skillData, index) => (
@@ -1244,7 +1244,7 @@ const Registration = (props) => {
             <button className='addSkillButton' type="button" onClick={() => addSkill()}>
               + Add skill
             </button>
-          </div>
+          </div> */}
 
           <div className="form-section" id={5} ref={refArray[5]}>
             <span className="formCat">Reference & Consent</span>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -35,13 +35,24 @@
     display: flex;
     justify-content: space-between;
     margin-bottom: 20px;
+
+    @media (max-width: 600px) {
+        display: flex;
+        flex-direction: column;
+    }
 }
 .vSearchNT {
     border: solid #DBDBDB;
     height: fit-content;
     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
@@ -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
@@ -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
@@ -16,7 +16,7 @@ function ExplorePage() {
       <div className="vHeader">
         <VolunteerHeader/>
       </div>
-      <div className="wrapContent row mt-5 mt-sm-0 pl-5">
+      <div className="wrapContent row mt-5 mt-sm-8 pl-5">
         <div>
           <Switch>
             <Route exact path="/vneedtypes" component={VolunteerNeedType} />