From 2d14e2e08dc7dedefd619be80c6526a33d153405 Mon Sep 17 00:00:00 2001
From: Michael Weiner <47571709+mike-weiner@users.noreply.github.com>
Date: Wed, 26 Jul 2023 08:30:41 -0500
Subject: [PATCH] Fix Improper Spacing When Displaying Multiple Banners
 (#13616)

* change banner to sticky positioning

* add homepage banner logic to dynamically adjust

* resolve lint findings
---
 src/sass/misc/_banners.scss |  7 +-----
 src/ts/events.ts            | 46 ++++++++++++++++++++++++++++++-------
 2 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/src/sass/misc/_banners.scss b/src/sass/misc/_banners.scss
index c279adbd6e..6fb0419f56 100644
--- a/src/sass/misc/_banners.scss
+++ b/src/sass/misc/_banners.scss
@@ -9,7 +9,7 @@
 
     @media screen AND (min-width: $bp-md) {
         display: block;
-        position: fixed;
+        position: sticky;
         z-index: $banner-z;
         width: 100%;
         text-align: center;
@@ -57,8 +57,3 @@
         top: $headerHeightLg;
     }
 }
-@media screen AND (min-width: $bp-md) {
-    .banner-padding {
-        padding-top: 5rem !important;
-    }
-}
diff --git a/src/ts/events.ts b/src/ts/events.ts
index 851162e2c9..14354e796b 100644
--- a/src/ts/events.ts
+++ b/src/ts/events.ts
@@ -83,13 +83,29 @@ function handleEvents(): void {
 
                 if (display) {
                     el.style.display = "block";
-                    const main = document.querySelector<HTMLElement>("main.primary");
-                    if (main) {
-                        main.classList.add("banner-padding");
+                    const heroSection = document.querySelector<HTMLElement>("main.landing section#banner");
+                    const banners = document.querySelector<HTMLElement>(".banner-container");
+
+                    if (banners && heroSection) {
+
+                        let activeBannerCount = 0;
+
+                        banners.childNodes.forEach((childNode) => {
+                          if ((childNode as HTMLElement).style.display === "block" && (childNode as HTMLElement).classList.contains("banner")) {
+                            activeBannerCount += 1
+                          }
+                        })
+
+                        const remSpacing = 8.125 + (60/16)*(activeBannerCount)
+
+                        heroSection.style.marginTop="-"+String(remSpacing)+"rem";
+                        heroSection.style.paddingTop=String(remSpacing)+"rem"
+
                         if (timeout > 0) {
                             window.setTimeout(() => {
                                 el.style.display = "none";
-                                main.classList.remove("banner-padding");
+                                heroSection.style.marginTop="";
+                                heroSection.style.paddingTop=""
                             }, timeout * 1000);
                         }
                     }
@@ -97,10 +113,24 @@ function handleEvents(): void {
 
                 listen(el, click, () => {
                     el.style.display = "none";
-                    const main = document.querySelector<HTMLElement>("main.primary");
-                    if (main) {
-                        main.classList.remove("banner-padding");
-                    }
+                    const heroSection = document.querySelector<HTMLElement>("main.landing section#banner");
+                    const banners = document.querySelector<HTMLElement>(".banner-container");
+
+                    if (banners && heroSection) {
+
+                        let activeBannerCount = 0;
+
+                        banners.childNodes.forEach((childNode) => {
+                          if ((childNode as HTMLElement).style.display === "block" && (childNode as HTMLElement).classList.contains("banner")) {
+                            activeBannerCount += 1
+                          }
+                        })
+
+                        const remSpacing = 8.125 + (60/16)*(activeBannerCount)
+
+                        heroSection.style.marginTop="-"+String(remSpacing)+"rem";
+                        heroSection.style.paddingTop=String(remSpacing)+"rem"
+                      }
                     remainingEventImpressions[title].impressions = 0;
                     saveRemainingEventImpressions();
                 });