Merge pull request #657 from cornell-dti/rwq3/responsive-landing

task: fix landing responsiveness

Author: mjaydenkim

frontend/src/pages/Landing/Landing.tsx

@@ -22,7 +22,7 @@ const Landing = ({ students, admins, drivers, ssoError }: LandingPropType) => {
     document.title = 'Login - Carriage';
   }, []);
   return (
-    <main id="main">
+    <main id="main" className={styles.pageMain}>
       <div className={styles.home}>
         <div className={styles.tosButtonContainer}>
           <a href={cuLiftTerms} target="_blank" rel="noreferrer">
@@ -67,7 +67,11 @@ const Landing = ({ students, admins, drivers, ssoError }: LandingPropType) => {
             viewBox="0 0 1200 120"
             preserveAspectRatio="none"
           >
-            <path d={WAVE_PATH.trim()} className={styles.shapeFill}></path>
+            <path
+              d={WAVE_PATH.trim()}
+              className={styles.shapeFill}
+              transform="translate(0, 120) scale(1, -1)"
+            />
           </svg>
         </div>
       </div>

frontend/src/pages/Landing/landing.module.css

@@ -1,27 +1,26 @@
+.pageMain {
+  width: 100%;
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
 .home {
   position: relative;
-  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
-    url(./campus.jpg) no-repeat center center fixed;
-  -webkit-background-size: cover;
-  -moz-background-size: cover;
-  -o-background-size: cover;
+  background: url(./campus.jpg);
   background-size: cover;
-  height: 100vh;
+  min-height: min-content;
+  width: 100%;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: center;
-  align-items: flex-start;
-  padding: 0 1.25rem;
+  align-items: center;
 }
 
 .main {
-  border: 1px solid black;
   border-radius: 16px;
-  max-width: 850px;
-  height: 550px;
+  padding: 8rem 0;
   display: flex;
-  flex-grow: 1;
-  margin-top: 7.5rem;
+  min-height: min-content;
 }
 
 .tosButtonContainer {
@@ -106,7 +105,7 @@
   justify-content: space-between;
   align-items: center;
   text-align: center;
-  padding: 8px;
+  padding: 4rem;
   position: relative;
 }
 
@@ -116,28 +115,6 @@
   align-items: center;
 }
 
-.customShape {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  overflow: hidden;
-  line-height: 0;
-  transform: rotate(180deg);
-  height: 15%;
-  z-index: 10;
-}
-
-.customShape svg {
-  position: absolute;
-  display: block;
-  width: calc(142% + 1.3px);
-}
-
-.shapeFill {
-  fill: white;
-}
-
 .information {
   position: relative;
   display: flex;
@@ -155,6 +132,21 @@
   justify-content: center;
 }
 
+.customShape {
+  width: 100%;
+  padding: 0;
+  line-height: 0;
+  transform: translateY(2px);
+}
+
+.customShape svg {
+  display: block;
+}
+
+.shapeFill {
+  fill: white;
+}
+
 .adminInfo p {
   font-size: 40px;
   min-width: 30%;
@@ -194,15 +186,13 @@
   height: 100%;
 }
 
-/* Landing page is almost fully responsive. It still needs to vertical media queries. */
-
-@media (max-width: 400px) {
+@media (max-width: 800px) {
   .container {
     flex-direction: column;
   }
 }
 
-@media (max-width: 550px) {
+@media (max-width: 800px) {
   .main {
     flex-direction: column;
   }
@@ -214,12 +204,6 @@
   }
 }
 
-@media (max-width: 600px) {
-  .main {
-    min-height: 0px;
-  }
-}
-
 @media (max-width: 1425px) {
   .studentInfo {
     flex-direction: column;
@@ -279,12 +263,6 @@
   }
 }
 
-@media (max-height: 600px) {
-  .main {
-    min-height: 0px;
-  }
-}
-
 .input {
   width: 100%;
   outline: 0;