Add floating donation button to ensure consistent donation accessibil…

…ity (sugarlabs#612) - Adds a floating donation button to maintain visibility when the main banner is not in view. - Appears when users scroll down or close the banner.
anya-xcode · Dec 30, 2024 · 51e0d16 · 51e0d16
1 parent 86d6053
commit 51e0d16
Show file tree

Hide file tree

Showing 2 changed files with 142 additions and 29 deletions.
diff --git a/_includes/donation_banner.html b/_includes/donation_banner.html
@@ -20,6 +20,71 @@
             <button class="close-button" id="close-icon">
                 <img src="../assets/entry-stop.svg" alt="Close Banner" />
             </button>
-        </div>
+      </div>
+    </div>
+  </div>
+
+  <div id="donate-popup-banner">
+    <div class="donate-container">
+        <img aria-hidden="true" class="donate-icon" src="../assets/sparkles.svg" alt="Donation Icon">
+      <div class="donate-text-container">
+        <p class="donate-text">
+          Our goal is $25k this fall, and every contribution counts! Whether you give $3 or more, your
+          tax-deductible donation will help us continue to provide a unique learning environment where youth can
+          solve authentic tasks and learn by doing.
+          <a href="{{ site.baseurl }}/community/2024/12/03/help-SL-continue-to-transform-education"> Read more
+          </a> about how we can make a difference together and donate today!
+        </p>
+      </div>
+      <button class="donate-button" id="donate-button"><a
+        href="https://www.paypal.com/donate?campaign_id=NEAV3YL4H6B5S">DONATE NOW</a></button><div class="donate-close-button">
+            <button class="close-button btn" id="close-icon">
+                <img src="../assets/entry-stop.svg" alt="Close Banner" />
+            </button>
+      </div>
     </div>
-</div>
+  </div>
+
+
+  <!-- Popup Trigger and Vertical Donate Button -->
+  <button id="vertical-donate-button" style="display: none;">D<br>O<br>N<br>A<br>T<br>E</button>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const banner = document.getElementById('donation-banner');
+    const closeButton = banner.querySelector('.close-button');
+    const popupBanner = document.getElementById('donate-popup-banner');
+    const verticalButton = document.getElementById('vertical-donate-button');
+
+    closeButton.addEventListener('click', function () {
+      banner.classList.add('hidden');
+      verticalButton.style.display = 'block';
+    });
+    verticalButton.addEventListener('click', function () {
+      if (popupBanner.style.display === 'none' || popupBanner.style.display === '') {
+        popupBanner.style.display = 'block';
+      } else {
+        popupBanner.style.display = 'none';
+      }
+    });
+    popupBanner.querySelector('.btn').addEventListener('click', function () {
+      popupBanner.style.display = 'none';
+    });
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (!entry.isIntersecting) {
+          verticalButton.style.display = 'block';
+        } else {
+          verticalButton.style.display = 'none';
+        }
+      });
+    }, {
+      rootMargin: '0px',
+      threshold: 0.1
+    });
+    observer.observe(banner);
+  });
+</script>
+
+</body>
+</html>
diff --git a/css/custom.css b/css/custom.css
@@ -75,29 +75,26 @@
 
 /* Styles for the donation banner */
 
-#donation-banner .donate-container {
+#donation-banner {
   position: sticky;
+  top: 0;
   display: flex;
   flex-direction: row;
   align-content: normal;
-  justify-content:center;
+  justify-content: center;
   align-items: center;
-  /* background-color: rgb(0, 49, 109); */
   padding: 15px 10px;
   margin: 0;
   width: 100%;
   box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
-}
-
-#donation-banner {
+  background-color: rgb(0, 49, 109);
   transition: opacity 0.3s ease, visibility 0.3s ease;
-  opacity: 1;
-  visibility: visible;
 }
 
 #donation-banner.hidden {
   opacity: 0;
   visibility: hidden;
+  display: none;
 }
 
 .donate-container {
@@ -121,17 +118,15 @@
   text-align: left;
   justify-content: center;
   padding: 5px 15px;
-
 }
 
 .donate-text {
   color: white;
-  font-size: 1 rem;
+  font-size: 1rem;
   font-weight: bold;
   line-height: 1.5;
   max-width: 70vw;
-  margin-top: 0.19rem;
-  margin-bottom: 0.19rem;
+  margin: 0.19rem 0;
 }
 
 .donate-text a {
@@ -144,11 +139,10 @@
   border-radius: 20px;
   padding: 10px 20px;
   background-color: white;
-  /* color: rgb(0, 49, 109); */
   font-weight: bold;
   cursor: pointer;
+  margin: 0.375rem auto;
   text-decoration: none;
-  margin: .375rem auto;
 }
 
 .donate-button a {
@@ -167,25 +161,80 @@
   border-radius: 50%;
   cursor: pointer;
   width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: bold;
+}
+
+/* Popup Banner Styles */
+#donate-popup-banner {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: rgb(0, 49, 109);
+  padding: 20px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  display: none;
+  z-index: 1000;
+  border-radius: 8px;
+  width: 90%;
+  max-width: 500px;
+}
+
+#donate-popup-banner .donate-close-button {
+  text-align: right;
+}
+
+#popup-trigger {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background-color: #FFD700;
+  color: rgb(0, 49, 109);
+  padding: 10px 20px;
+  border-radius: 50px;
+  border: none;
+  cursor: pointer;
+  font-weight: bold;
+}
+
+/* Vertical "Donate" Button */
+#vertical-donate-button {
+  position: fixed;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: #FFD700;
+  color: rgb(0, 49, 109);
+  padding: 0px 5px;
+  border-radius: 0 5px 5px 0;
+  border: none;
+  cursor: pointer;
+  font-weight: bold;
+  display: block;
+  z-index: 999;
+  text-align: center;
+  line-height: 1.5;
+}
+
+#vertical-donate-button:hover {
+  background-color: rgb(255, 223, 0);
 }
 
 
 /* Responsive Design */
 @media (max-width: 768px) {
-  .donate-banner .donate-container{
+  #donation-banner .donate-container {
     flex-direction: column;
-    flex-wrap: wrap;
     align-items: center;
     text-align: center;
     padding: 10px;
-
   }
 
-  @media only screen and (max-width: 640px) {
-    .donate-banner .donate-container .donate-button {
-      margin-bottom: 1rem;
-    }
-  }
   .donate-icon {
     margin-bottom: 10px;
   }
@@ -209,13 +258,12 @@
     right: 0;
     vertical-align: middle;
   }
+}
 
-  .donation-bar {
-    background-color: white;
-    margin-top: 90px;
-    padding: 10px 0; 
+@media only screen and (max-width: 640px) {
+  .donate-button {
+    margin-bottom: 1rem;
   }
-
 }
 
 #scrollToTopBtn {