Adjust menu popup behavior contextually (forem#20718)

hackerspace-team · Mar 1, 2024 · 0140a76 · 0140a76
1 parent f2968ba
commit 0140a76
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/app/assets/stylesheets/billboards.scss b/app/assets/stylesheets/billboards.scss
@@ -58,16 +58,13 @@
   animation: popoverEnter 0.5s;
   box-shadow: 0 0 100px 60px rgba(0, 0, 0, 0.2) !important;
   max-height: calc(100vh - var(--header-height));
-  overflow-y: auto;
   .text-styles {
     padding-top: var(--su-4);
     padding-bottom: var(--su-4);
     font-size: calc(0.8em + 0.58vw);
     max-width: calc(var(--site-width) - var(--su-8));
-  }
-  .sponsorship-dropdown {
-    top: auto;
-    bottom: var(--su-8);
+    overflow-y: auto;
+    max-height: calc(100vh - var(--header-height) - var(--su-8));
   }
   @media (min-width: $breakpoint-xl) {
     .crayons-sponsorship__header,
@@ -80,6 +77,13 @@
   }
 }
 
+.popover-billboard--menuopenupwards {
+  .sponsorship-dropdown {
+    top: auto;
+    bottom: var(--su-8);
+  }
+}
+
 .hide-popover-billboard .popover-billboard {
   display: none;
 }

diff --git a/app/javascript/utilities/billboardInteractivity.jsx b/app/javascript/utilities/billboardInteractivity.jsx
@@ -21,6 +21,12 @@ export function setupBillboardInteractivity() {
 
         sponsorshipDropdownButton.dataset.initialized = 'true';
       }
+
+      const popoverParent = sponsorshipDropdownButton.closest('.popover-billboard');
+      if (popoverParent &&
+        sponsorshipDropdownButton.getBoundingClientRect().top > window.innerHeight / 2) {
+        popoverParent.classList.add('popover-billboard--menuopenupwards');
+      }
     });
   }
   const sponsorshipCloseButtons = document.querySelectorAll(