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 <[email protected]>

Author: 2 people

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);
 }
 
 /*******************************************************************************

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);
 }

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 %}
@@ -10,6 +10,27 @@
     div = document.querySelector(".bd-header-announcement");
     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 => {
     console.log("[PST]: Failed to load announcement at: {{ theme_announcement }}");