Added scroll and move functionality to the map and section comments t…

…o the CSS
SHPE-UTDallas · Jul 23, 2021 · 96b6525 · 96b6525
1 parent 313471e
commit 96b6525
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 43 deletions.
diff --git a/pages/conference.tsx b/pages/conference.tsx
@@ -17,8 +17,6 @@ export const conference = () => {
     return (
         <Layout title="National Conventions" >
 
-            {/* <section className="gradient-background"> */}
-
             {/* 2021 National Convention */}
             <section className="national-convention-wrapper" >
 
@@ -38,9 +36,9 @@ export const conference = () => {
 
                     <div className="conference-radius flex-boxes gradient-background">
 
-                        <div style={{ padding: "56.25% 0 0 0", position: "relative" }}>
-                            <iframe src="https://player.vimeo.com/video/503633431?color=ff9933&title=0&portrait=0" style={{ position: "absolute", top: "0", left: "0", width: "100%", height: "100%" }} allow="autoplay; fullscreen; picture-in-picture" allowFullScreen></iframe>
-                        </div>
+                        <figure className="large-iframe-container">
+                            <iframe className="responsive-iframe-content" src="https://player.vimeo.com/video/503633431?color=ff9933&title=0&portrait=0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen></iframe>
+                        </figure>
                         <script src="https://player.vimeo.com/api/player.js"></script>
 
                         <span className="small-line-height">
@@ -149,9 +147,9 @@ export const conference = () => {
                 </section>
 
                 {/* Map */}
-                <div style={{ width: "100%" }}>
-                    <iframe allowFullScreen src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7017.364915375989!2d-81.46907627503198!3d28.428836965051598!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88e77e463b79f35f%3A0x890f8122e661e214!2sOrange%20County%20Convention%20Center%20north%20concourse!5e0!3m2!1sen!2sus!4v1623904501409!5m2!1sen!2sus" style={{ width: "100%" }} loading="lazy"></iframe>
-                </div>
+                <figure className="small-iframe-container" >
+                    <iframe className="responsive-iframe-content" allowFullScreen src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7017.364915375989!2d-81.46907627503198!3d28.428836965051598!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88e77e463b79f35f%3A0x890f8122e661e214!2sOrange%20County%20Convention%20Center%20north%20concourse!5e0!3m2!1sen!2sus!4v1623904501409!5m2!1sen!2sus" loading="lazy"></iframe>
+                </figure>
                 <br />
 
             </section>
@@ -166,14 +164,13 @@ export const conference = () => {
                 {nationalConventionTitle("2020 SHPE", "National Convention", "Highlights")}
 
                 {/* Video */}
-                <figure className="container-iframe">
-                    <iframe className="responsive-iframe" src="https://youtube.com/embed/UE75ysOZEZ8" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
+                <figure className="medium-iframe-container">
+                    <iframe className="responsive-iframe-content" src="https://youtube.com/embed/UE75ysOZEZ8" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
                 </figure>
                 <br />
 
             </section>
 
-            {/* </section> */}
         </Layout >
     )
 }

diff --git a/theming/_conference.scss b/theming/_conference.scss
@@ -21,32 +21,6 @@
   border-bottom: 10px solid whitesmoke;
 }
 
-.title-container {
-    line-height: 35px;
-    width: 100%;
-
-    .title1 {
-        color: $SHPE-ORANGE;
-    }
-
-    .title2 {
-        font-size: 3rem;
-
-        @media only screen and (max-width: 600px) {
-          font-size: 2rem;
-        }
-    }
-
-    .title1,
-    .title3 {
-        font-size: 2rem;
-
-        @media only screen and (max-width: 600px) {
-            font-size: 1.7rem;
-        }
-    }
-}
-
 
 .boxes-container {
   display: flex;
@@ -75,7 +49,7 @@
   text-align: center;
 
   /* For mobile phones: */
-  @media only screen and (max-width: 700px) {
+  @media only screen and (max-width: 768px) {
     width: 100%;
     margin: 3% 0;
   }
@@ -113,6 +87,40 @@
   border-radius: 15px;
 }
 
+/////////////////////////////////////////////
+// Titles
+/////////////////////////////////////////////
+
+.title-container {
+    line-height: 35px;
+    width: 100%;
+
+    .title1 {
+        color: $SHPE-ORANGE;
+    }
+
+    .title2 {
+        font-size: 3rem;
+
+        @media only screen and (max-width: 600px) {
+          font-size: 2rem;
+        }
+    }
+
+    .title1,
+    .title3 {
+        font-size: 2rem;
+
+        @media only screen and (max-width: 600px) {
+            font-size: 1.7rem;
+        }
+    }
+}
+
+
+/////////////////////////////////////////////
+// Text sections
+/////////////////////////////////////////////
 
 .paragraph-flex-container {
   display: flex;
@@ -156,20 +164,46 @@
 }
 
 
+/////////////////////////////////////////////
+// iframe items
+/////////////////////////////////////////////
+
+.large-iframe-container {
+  position: relative;
+  overflow: hidden;
+  width: 100%;      
+  padding-top: 56.25%; /* if you want 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) use 56.25% */
+}
 
-.container-iframe {
+.medium-iframe-container {
   position: relative;
   overflow: hidden;
   width: 80%;      
   padding-top: 40%; /* if you want 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) use 56.25% */
 
   @media only screen and (max-width: 768px) {
-        width: 100%;      
-        padding-top: 56.25%;
-    }
+    width: 100%;      
+    padding-top: 56.25%;
+  }
+
+}
+
+.small-iframe-container {
+  position: relative;
+  overflow: hidden;
+  width: 100%;      
+  padding-top: 18%; 
+
+  @media only screen and (max-width: 768px) {
+    padding-top: 32%;
+  }
+
+  @media only screen and (max-width: 426px) {
+    padding-top: 56.25%;
+  }
 }
 
-.responsive-iframe {
+.responsive-iframe-content {
   position: absolute;
   top: 0;
   left: 0;