ENH animation for the top banner (pydata#1693)

* ENH animation for the top banner * unset forcefully set styles to let css take over; animation also added for version warning banner * make transition a bit longer * resolve conversations * retrigger CI * Update src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js --------- Co-authored-by: Daniel McCloy <dan@mccloy.info>
melissawm · Feb 2, 2024 · 4ebcd94 · 4ebcd94
1 parent 5319cf3
commit 4ebcd94
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 20 deletions.
diff --git a/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js b/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js
@@ -484,7 +484,8 @@ function showVersionWarningBanner(data) {
   const bold = document.createElement("strong");
   const button = document.createElement("a");
   // these classes exist since pydata-sphinx-theme v0.10.0
-  outer.classList = "bd-header-version-warning container-fluid";
+  // the init class is used for animation
+  outer.classList = "bd-header-version-warning container-fluid init";
   middle.classList = "bd-header-announcement__content";
   inner.classList = "sidebar-message";
   button.classList =
@@ -516,6 +517,28 @@ function showVersionWarningBanner(data) {
   inner.appendChild(button);
   const skipLink = document.getElementById("pst-skip-link");
   skipLink.after(outer);
+  // At least 3rem height
+  const autoHeight = Math.max(
+    outer.offsetHeight,
+    3 * parseFloat(getComputedStyle(document.documentElement).fontSize)
+  );
+  // Set height and vertical padding to 0 to prepare the height transition
+  outer.style.setProperty("height", 0);
+  outer.style.setProperty("padding-top", 0);
+  outer.style.setProperty("padding-bottom", 0);
+  outer.classList.remove("init");
+  // Set height to the computed height with a small timeout to activate the transition
+  setTimeout(() => {
+    outer.style.setProperty("height", `${autoHeight}px`);
+    // Wait for a bit more than 300ms (the transition duration) then remove the
+    // forcefully set styles and let CSS take over
+    setTimeout(() => {
+      outer.style.removeProperty("padding-top");
+      outer.style.removeProperty("padding-bottom");
+      outer.style.removeProperty("height");
+      outer.style.setProperty("min-height", "3rem");
+    }, 320);
+  }, 10);
 }
 
 /*******************************************************************************

diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss b/src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss
@@ -1,34 +1,30 @@
 .bd-header-version-warning,
 .bd-header-announcement {
-  min-height: 3rem;
   width: 100%;
   display: flex;
   position: relative;
   align-items: center;
   justify-content: center;
   text-align: center;
+  transition: height 300ms ease-in-out;
+  overflow-y: hidden;
   padding: 0.5rem 12.5%; // Horizontal padding so the width is 75%
   // One breakpoint less than $breakpoint-sidebar-primary. See variables/_layout.scss for more info.
   @include media-breakpoint-down(lg) {
     // Announcements can take a bit more width on mobile
     padding: 0.5rem 2%;
   }
 
+  &.init {
+    position: fixed;
+    visibility: hidden;
+  }
+
   p {
     font-weight: bold;
     margin: 0;
   }
 
-  &:after {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-    content: "";
-    z-index: -1; // So it doesn't hover over the content
-  }
-
   &:empty {
     display: none;
   }
@@ -41,13 +37,9 @@
 
 // Bg color is now defined in the theme color palette - using our secondary color
 .bd-header-announcement {
-  &:after {
-    background-color: var(--pst-color-secondary-bg);
-  }
+  background-color: var(--pst-color-secondary-bg);
 }
 
 .bd-header-version-warning {
-  &:after {
-    background-color: var(--pst-color-danger-bg);
-  }
+  background-color: var(--pst-color-danger-bg);
 }
diff --git a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/announcement.html b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/announcement.html
@@ -1,4 +1,4 @@
-{% set header_classes = ["bd-header-announcement", "container-fluid"] %}
+{% set header_classes = ["bd-header-announcement", "container-fluid", "init"] %}
 {% set is_remote=theme_announcement.startswith("http") %}
 {# If we are remote, add a script to make an HTTP request for the value on page load #}
 {%- if is_remote %}
@@ -12,8 +12,29 @@
       return;
     } else {
       div = document.querySelector(".bd-header-announcement");
-      div.classList.add(...["bd-header-announcement", "container-fluid"]);
+      div.classList.add(...{{ header_classes | tojson }});
       div.innerHTML = `<div class="bd-header-announcement__content">${data}</div>`;
+      // At least 3rem height
+      const autoHeight = Math.min(
+        div.offsetHeight,
+        3 * parseFloat(getComputedStyle(document.documentElement).fontSize));
+      // Set height and vertical padding to 0 to prepare the height transition
+      div.style.setProperty("height", 0);
+      div.style.setProperty("padding-top", 0);
+      div.style.setProperty("padding-bottom", 0);
+      div.classList.remove("init");
+      // Set height to the computed height with a small timeout to activate the transition
+      setTimeout(() => {
+        div.style.setProperty("height", `${autoHeight}px`);
+        // Wait for a bit more than 300ms (the transition duration) then remove the
+        // forcefully set styles and let CSS take over
+        setTimeout(() => {
+          div.style.removeProperty("padding-top");
+          div.style.removeProperty("padding-bottom");
+          div.style.removeProperty("height");
+          div.style.setProperty("min-height", "3rem");
+        }, 320);
+      }, 10);
     }
   })
   .catch(error => {