Working mobile view

allsouza · Jan 26, 2021 · 08388ec · 08388ec
1 parent 3ea3bb3
commit 08388ec
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 33 deletions.
diff --git a/app/assets/stylesheets/footer.scss b/app/assets/stylesheets/footer.scss
@@ -34,17 +34,3 @@
     }
 }
 
-@media only screen and (max-width:768px){
-    .footer {
-        flex-direction: column;
-
-        &-site-explanation {
-            width: 100%;
-        }
-
-        &-personal-info {
-            width: 100%;
-            padding-top: 18px;
-        }
-    }
-}
diff --git a/app/assets/stylesheets/review_form.scss b/app/assets/stylesheets/review_form.scss
@@ -145,22 +145,21 @@
     }
 }
 
-.review-form-container{
-    .saved {
-        width: 100%;
-        height: 350px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
+.saved {
+    width: 100%;
+    height: 350px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
 
-        h1 {
-            font-size: 30px;
-            padding: 20px;
-        }
+    h1 {
+        font-size: 30px;
+        padding: 20px;
     }
 }
 
+
 .new-review {
     width: 90%;
     margin: auto;
@@ -183,10 +182,6 @@
 }
 
 @media only screen and (max-width: 768px){
-    .review-form-container{
-        min-width: 0;
-        width: 90%;
-    }
 
     .new-review{
         h1{

diff --git a/frontend/components/footer/Footer.jsx b/frontend/components/footer/Footer.jsx
@@ -4,6 +4,7 @@ import GitHubIcon from '@material-ui/icons/GitHub';
 import LanguageIcon from '@material-ui/icons/Language';
 import { buttonColor, footerColor } from '../DarkThemeProvider';
 import styled from 'styled-components';
+import { useMediaPredicate } from 'react-media-hook';
 
 const source = 'https://docs.google.com/spreadsheets/d/1oE2avtfGQRuSI1-gltcIw-AazA3ov3dEoX-sTbPI6Jw/edit?fbclid=IwAR1T3ttg8PBZ2Ppi5w2J2R1UfUtF6h3eYUM6u7u6xIte9qdtHUz6T12unIc#gid=0';
 
@@ -46,8 +47,27 @@ const Foot = styled.footer`
         }
     }
 
+    @media only screen and (max-width:768px){
+        flex-direction: column;
+        
+        .footer-site-explanation {
+            width: 100%;
+        }
+
+        .footer-personal-info {
+            width: 100%;
+            padding-top: 18px;
+            flex-direction: column;
+            align-items: center;
+
+            & > * {
+                padding-bottom: 16px;
+            }
+        }
+    }
 `;
 
+
 export default function Footer() {
     return (
         <Foot>

diff --git a/frontend/components/reviews/Form.jsx b/frontend/components/reviews/Form.jsx
@@ -17,12 +17,14 @@ import { useDispatch } from 'react-redux';
 import Search from './Search';
 import { createReview, RECEIVE_REVIEW } from '../../actions/review_actions';
 import { capitalize } from '../../util/string_util';
+import { useMediaPredicate } from 'react-media-hook';
 
 
 const regex = new RegExp(/[^0-9]/, 'g');
 const date = new Date();
 
 export default function Form() {
+    const mobile = useMediaPredicate("(max-width: 768px)")
     const theme = useTheme();
     const styles = makeStyles({
         root: {
@@ -38,11 +40,11 @@ export default function Form() {
 
         container: {
             display: "flex",
-            width: "70%",
+            width: mobile ? "90%" : "70%",
             margin: "auto",
             height: "fit-content",
             alignItems: "center",
-            minWidth: 700,
+            minWidth: mobile ? 0 : 700,
             padding: "20px 0",
             position: "relative",
             zIndex: 10,

diff --git a/frontend/components/splash/splash_form.jsx b/frontend/components/splash/splash_form.jsx
@@ -16,14 +16,20 @@ export default function SplashForm() {
         zIndex: 4,
         paddingBottom: 200,
         background: theme.palette.blobColor,
+      },
+      container: {
+        width: "100%",
+        overflow: "hidden"
       }
     });
 
     const classes = useStyles()
 
     return(
         <div className={classes.form}>
-            <Blob fill={theme.palette.blobColor} className={classes.blob} />
+            <div className={classes.container}>
+              <Blob fill={theme.palette.blobColor} className={classes.blob} />
+            </div>
             <div className="splash-form-contents" >
                 <h1 className="splash-form-header">Report Your Wage:</h1>
             </div>