From 28809c8db9c79f576914841d21150c59ee8b1557 Mon Sep 17 00:00:00 2001
From: smalex-z <alexzheng2004@gmail.com>
Date: Wed, 30 Oct 2024 23:30:29 +0000
Subject: [PATCH 1/5] removes map when vw < 600px

---
 pages/gm.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/pages/gm.js b/pages/gm.js
index 5ebbed0e..8eff805b 100644
--- a/pages/gm.js
+++ b/pages/gm.js
@@ -219,7 +219,20 @@ function gm() {
         <div id='info-wrapper'>
           <h2>Relevant information</h2>
           <div className='flex'>
-            <div>
+            <style>
+              {`
+                .map-container {
+                  display: none;
+                }
+
+                @media (min-width: 600px) {
+                  .map-container {
+                    display: block;
+                  }
+                }
+              `}
+            </style>
+            <div class="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' 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>
             <div className='what-to-bring'>

From 21f2670366f3ba369e85ec15125f0aa83aed2fe8 Mon Sep 17 00:00:00 2001
From: smalex-z <alexzheng2004@gmail.com>
Date: Thu, 31 Oct 2024 20:49:26 +0000
Subject: [PATCH 2/5] responsive map box + change flex dir. on mobile

---
 pages/gm.js               | 26 ++++++++++----------------
 styles/components/GM.scss | 18 ++++++++++++++++++
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/pages/gm.js b/pages/gm.js
index 8eff805b..6978c9dd 100644
--- a/pages/gm.js
+++ b/pages/gm.js
@@ -218,22 +218,16 @@ function gm() {
 			<div className='content-container-tight text-center'>
         <div id='info-wrapper'>
           <h2>Relevant information</h2>
-          <div className='flex'>
-            <style>
-              {`
-                .map-container {
-                  display: none;
-                }
-
-                @media (min-width: 600px) {
-                  .map-container {
-                    display: block;
-                  }
-                }
-              `}
-            </style>
-            <div class="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' 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 map-container'>
+            <div style={{flexGrow: 1, width: "100%"}}>
+              <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" 
+                style={{ width: "100%", height: "100%"}} 
+                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
index af54ad39..27284e1d 100644
--- a/styles/components/GM.scss
+++ b/styles/components/GM.scss
@@ -123,6 +123,10 @@
   text-decoration: none;
 }
 
+.map-container {
+  height: 400px;
+}
+
 .flex {
   display: flex;
 
@@ -141,6 +145,20 @@
   }
 }
 
+@media (max-width: 640px) {
+  .map-container {
+    height: 450px;
+    flex-direction: column;
+  }
+
+  .flex { 
+    .what-to-bring{
+      margin-left: 0;
+      margin-top: 15px;
+    }
+  }
+}
+
 #countdown-wrapper {
   display: flex;
   flex-wrap: wrap;

From ff3a998607ecb646738977a4e08e3819cf69eb51 Mon Sep 17 00:00:00 2001
From: smalex-z <alexzheng2004@gmail.com>
Date: Sat, 2 Nov 2024 02:23:57 +0000
Subject: [PATCH 3/5] lint fixes

---
 pages/gm.js               | 12 ++++++------
 styles/components/GM.scss |  4 ++--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/pages/gm.js b/pages/gm.js
index 6978c9dd..bdfef077 100644
--- a/pages/gm.js
+++ b/pages/gm.js
@@ -219,13 +219,13 @@ function gm() {
         <div id='info-wrapper'>
           <h2>Relevant information</h2>
           <div className='flex map-container'>
-            <div style={{flexGrow: 1, width: "100%"}}>
-              <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" 
-                style={{ width: "100%", height: "100%"}} 
+            <div style={{flexGrow: 1, width: '100%'}}>
+              <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"
+                style={{ width: '100%', height: '100%'}}
                 allowFullScreen=""
-                loading="lazy" 
-                title="google maps embed of ackerman grand ballroom" 
+                loading="lazy"
+                title="google maps embed of ackerman grand ballroom"
                 referrerPolicy="no-referrer-when-downgrade"
               ></iframe>
             </div>
diff --git a/styles/components/GM.scss b/styles/components/GM.scss
index 27284e1d..cb68745d 100644
--- a/styles/components/GM.scss
+++ b/styles/components/GM.scss
@@ -147,12 +147,12 @@
 
 @media (max-width: 640px) {
   .map-container {
-    height: 450px;
     flex-direction: column;
+    height: 450px;
   }
 
   .flex { 
-    .what-to-bring{
+    .what-to-bring {
       margin-left: 0;
       margin-top: 15px;
     }

From 19983463ba53fd4c0f854431d027a2a7d128a9df Mon Sep 17 00:00:00 2001
From: smalex-z <alexzheng2004@gmail.com>
Date: Sat, 2 Nov 2024 02:56:44 +0000
Subject: [PATCH 4/5] double quote -> single quote

---
 pages/gm.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/pages/gm.js b/pages/gm.js
index bdfef077..30226c55 100644
--- a/pages/gm.js
+++ b/pages/gm.js
@@ -223,10 +223,10 @@ function gm() {
               <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"
                 style={{ width: '100%', height: '100%'}}
-                allowFullScreen=""
-                loading="lazy"
-                title="google maps embed of ackerman grand ballroom"
-                referrerPolicy="no-referrer-when-downgrade"
+                allowFullScreen=''
+                loading='lazy'
+                title='google maps embed of ackerman grand ballroom'
+                referrerPolicy='no-referrer-when-downgrade'
               ></iframe>
             </div>
             <div className='what-to-bring'>

From 3a60245840d230222478d04836677b2df67b38d6 Mon Sep 17 00:00:00 2001
From: smalex-z <alexzheng2004@gmail.com>
Date: Sat, 2 Nov 2024 19:33:08 +0000
Subject: [PATCH 5/5] single quotes + css classes

---
 pages/gm.js               |  8 ++++----
 styles/components/GM.scss | 14 ++++++++++++--
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/pages/gm.js b/pages/gm.js
index 30226c55..3b91bdbe 100644
--- a/pages/gm.js
+++ b/pages/gm.js
@@ -218,11 +218,11 @@ function gm() {
 			<div className='content-container-tight text-center'>
         <div id='info-wrapper'>
           <h2>Relevant information</h2>
-          <div className='flex map-container'>
-            <div style={{flexGrow: 1, width: '100%'}}>
+          <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"
-                style={{ width: '100%', height: '100%'}}
+                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'
diff --git a/styles/components/GM.scss b/styles/components/GM.scss
index cb68745d..5ac710c6 100644
--- a/styles/components/GM.scss
+++ b/styles/components/GM.scss
@@ -123,10 +123,20 @@
   text-decoration: none;
 }
 
-.map-container {
+.rel-info {
   height: 400px;
 }
 
+.map-container {
+  flex-grow: 1;
+  width: 100%;
+}
+
+.map-frame {
+  height: 100%;
+  width: 100%;
+}
+
 .flex {
   display: flex;
 
@@ -146,7 +156,7 @@
 }
 
 @media (max-width: 640px) {
-  .map-container {
+  .rel-info {
     flex-direction: column;
     height: 450px;
   }