removes map when vw < 600px (#728)

* removes map when vw < 600px * responsive map box + change flex dir. on mobile * lint fixes * double quote -> single quote * single quotes + css classes
uclaacm · Nov 5, 2024 · 05849ec · 05849ec
1 parent df5ff15
commit 05849ec
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 3 deletions.
diff --git a/pages/gm.js b/pages/gm.js
@@ -218,9 +218,16 @@ function gm() {
 			<div className='content-container-tight text-center'>
         <div id='info-wrapper'>
           <h2>Relevant information</h2>
-          <div className='flex'>
-            <div>
-              <iframe src='https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13219.85897956824!2d-118.4441451!3d34.070418!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x62f97fe423993f80!2sUCLA%20Ackerman%20Union!5e0!3m2!1sen!2sin!4v1663063464157!5m2!1sen!2sin' width='450' height='400' style={{border: 0}} allowfullscreen='' loading='lazy' title='google maps embed of ackerman grand ballroom' referrerPolicy='no-referrer-when-downgrade'></iframe>
+          <div className='flex rel-info'>
+            <div className='map-container'>
+              <iframe
+                src='https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13219.85897956824!2d-118.4441451!3d34.070418!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x62f97fe423993f80!2sUCLA%20Ackerman%20Union!5e0!3m2!1sen!2sin!4v1663063464157!5m2!1sen!2sin'
+                className='map-frame'
+                allowFullScreen=''
+                loading='lazy'
+                title='google maps embed of ackerman grand ballroom'
+                referrerPolicy='no-referrer-when-downgrade'
+              ></iframe>
             </div>
             <div className='what-to-bring'>
               <h3>How to get there</h3>

diff --git a/styles/components/GM.scss b/styles/components/GM.scss
@@ -123,6 +123,20 @@
   text-decoration: none;
 }
 
+.rel-info {
+  height: 400px;
+}
+
+.map-container {
+  flex-grow: 1;
+  width: 100%;
+}
+
+.map-frame {
+  height: 100%;
+  width: 100%;
+}
+
 .flex {
   display: flex;
 
@@ -141,6 +155,20 @@
   }
 }
 
+@media (max-width: 640px) {
+  .rel-info {
+    flex-direction: column;
+    height: 450px;
+  }
+
+  .flex { 
+    .what-to-bring {
+      margin-left: 0;
+      margin-top: 15px;
+    }
+  }
+}
+
 #countdown-wrapper {
   display: flex;
   flex-wrap: wrap;