Merge pull request #29 from thepurplebubble/email-form-update

[FEAT] - Move form to bottom of the page as per slack poll / rework responsiveness
thepurplebubble · Dec 23, 2023 · 4734eee · 4734eee
2 parents 8bfb8c2 + 6321873
commit 4734eee
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 119 deletions.
diff --git a/src/components/Email-Form.astro b/src/components/Email-Form.astro
@@ -68,15 +68,13 @@
 
 <style>
   .emailform {
-    transform: translateY(33em);
-    visibility: hidden;
-    position: absolute;
+    visibility: visible;
+    margin-bottom: 2rem;
   }
 
   @media (max-width: 825px) {
     .emailform {
       position: absolute;
-      transform: translateY(-7em);
     }
   }
 

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -31,14 +31,17 @@ import "../styles/index.css";
             >
               Help Contribute
             </a>
-            <button type="button" class="home-button button" form-button
-              >Sign Up For Newsletter</button
+            <button
+              type="button"
+              class="home-button button"
+              id="email-form-button"
+              form-button>Sign Up For Newsletter</button
             >
           </div>
         </div>
-        <EmailForm />
-        <span class="emailbr" id="emailbr"></span>
-        <button class="chevron-button" id="chevron-button"></button>
+        <div class="chevron-container">
+          <button class="chevron-button" id="chevron-button"></button>
+        </div>
         <div class="home-features">
           <div class="home-container1">
             <div
@@ -137,32 +140,23 @@ import "../styles/index.css";
       </div>
     </div>
   </main>
+  <EmailForm />
   <Notification />
 </Layout>
 
 <script>
-  const buttons = document.querySelectorAll("[form-button]");
+  const button = document.getElementById("email-form-button");
   const scroll = document.getElementById("chevron-button");
   const form = document.getElementById("email-form");
-  const emailbr = document.getElementById("emailbr");
-
-  form.style.visibility = "hidden";
 
-  // Add event listeners to fire confetti when a button is clicked.
-  buttons.forEach((button) => {
-    button.addEventListener("click", () => toggleForm());
+  button.addEventListener("click", () => {
+    // scroll to email form component
+    form.scrollIntoView({
+      behavior: "smooth",
+      block: "center",
+      inline: "nearest",
+    });
   });
-  function toggleForm() {
-    if (form.style.visibility == "hidden") {
-      form.style.visibility = "visible";
-      scroll.style.visibility = "hidden";
-      emailbr.classList.add("show");
-    } else {
-      form.style.visibility = "hidden";
-      scroll.style.visibility = "visible";
-      emailbr.classList.remove("show");
-    }
-  }
   scroll.addEventListener("click", () => {
     // scroll to one page down
     window.scrollBy({
@@ -173,58 +167,3 @@ import "../styles/index.css";
   });
 </script>
 
-<style>
-  .emailbr {
-    display: block;
-    margin: 0px 0;
-  }
-
-  @media (max-width: 825px) {
-    .home-container {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-    }
-    .home-container1 {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-    }
-    .home-container2 {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-    }
-    .home-btn-group {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-    }
-    .home-text1 {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-    }
-    .home-features {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-    }
-    .home-lottie-node {
-      align-items: center;
-      width: 100%;
-      height: 100%;
-    }
-
-    .emailbr.show {
-      display: block;
-      margin: 140px 0;
-    }
-  }
-</style>
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -113,22 +113,3 @@ img {
 html {
   scroll-behavior: smooth;
 }
-
-.hero {
-  width: 100%;
-  height: 757px;
-  display: flex;
-  padding: var(--dl-space-space-threeunits);
-  position: relative;
-  min-height: 80vh;
-  align-items: center;
-  flex-direction: column;
-  background-size: cover;
-  justify-content: center;
-  background-image: url("https://cdn.purplebubble.org/background.png");
-}
-
-.hero h1 {
-  color: var(--dl-color-gray-white);
-  font-size: 3rem;
-}
diff --git a/src/styles/index.css b/src/styles/index.css
@@ -36,6 +36,27 @@
   --dl-space-space-oneandhalfunits: 24px;
 }
 
+.hero {
+  width: 100%;
+  height: 757px;
+  display: flex;
+  padding: var(--dl-space-space-threeunits);
+  position: relative;
+  min-height: 80vh;
+  align-items: center;
+  flex-direction: column;
+  background-size: cover;
+  justify-content: center;
+  background-image: url("https://cdn.purplebubble.org/background.png");
+}
+
+.hero h1 {
+  color: var(--dl-color-gray-white);
+  font-size: 3rem;
+  text-align: center;
+}
+
+
 .button {
   color: var(--dl-color-gray-black);
   display: inline-block;
@@ -378,18 +399,28 @@
   height: 504px;
 }
 
+.chevron-container {
+  margin-bottom: var(--dl-space-space-threeunits);
+  transform: translateY(-5rem);
+  width: 4em;
+  height: 4em;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
 .chevron-button {
   width: 4em;
   height: 4em;
   fill: var(--dl-color-gray-white);
-  transform: translateY(-5em);
   background-image: url("/chevron.svg");
   background-repeat: no-repeat;
   background-size: contain;
 }
 
 .chevron-button:hover {
-  transform: translateY(-5em) scale(1.1);
+  transform: scale(1.1);
 }
 
 @media (max-width: 1600px) {
@@ -413,26 +444,72 @@
   }
 
   .home-container1 {
-    width: 531px;
-    padding-right: 13px;
+    width: auto;
   }
 }
 
 @media (max-width: 991px) {
-  .home-hero {
-    flex-direction: column;
-  }
-
   .home-text {
     text-align: center;
   }
 
   .home-text1 {
     text-align: center;
   }
+
+  .home-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .home-container1 {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .home-container2 {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .home-text1 {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .home-features {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .home-lottie-node {
+    align-items: center;
+    width: 100%;
+    height: 100%;
+  }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 768px) {
+  .home-hero {
+    flex-direction: column;
+  }
+
+  .home-btn-group {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .home-button {
+    margin-top: var(--dl-space-space-unit);
+    margin-left: 0px;
+  }
+
   .home-hero {
     padding-left: var(--dl-space-space-twounits);
     padding-right: var(--dl-space-space-twounits);
@@ -442,6 +519,10 @@
     padding-left: var(--dl-space-space-twounits);
     padding-right: var(--dl-space-space-twounits);
   }
+
+  .chevron-container {
+    display: none;
+  }
 }
 
 @media (max-width: 479px) {
@@ -453,15 +534,6 @@
     padding-right: var(--dl-space-space-unit);
   }
 
-  .home-btn-group {
-    flex-direction: column;
-  }
-
-  .home-button {
-    margin-top: var(--dl-space-space-unit);
-    margin-left: 0px;
-  }
-
   .home-features {
     padding-top: var(--dl-space-space-twounits);
     padding-left: var(--dl-space-space-unit);