Skip to content

ENH animation for the top banner #1693

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Feb 1, 2024
Merged

ENH animation for the top banner #1693

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c86ff36
ENH animation for the top banner
Charlie-XIAO Jan 30, 2024
85a166d
unset forcefully set styles to let css take over; animation also adde…
Charlie-XIAO Jan 30, 2024
c5fd0bb
make transition a bit longer
Charlie-XIAO Jan 30, 2024
3c087cd
resolve conversations
Charlie-XIAO Feb 1, 2024
c99ec05
retrigger CI
Charlie-XIAO Feb 1, 2024
dd5ceb2
Update src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js
drammock Feb 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 24 additions & 1 deletion src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 =
Expand Down Expand Up @@ -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.min(
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);
}

/*******************************************************************************
Expand Down
26 changes: 9 additions & 17 deletions src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,30 @@
.bd-header-version-warning,
.bd-header-announcement {
min-height: 3rem;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this seems to be the one thing about the final appearance that still differs between current main and this PR... can we change the definition of autoHeight to be the maximum of 3rem and outer.offsetHeight?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(or is there a better approach you can think of?)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The suggested solution is clean enough, but I'm thinking perhaps we need still need to add the min-height property for safety. If 3rem > offsetHeight then when we remove the height property it is likely that the height drops back to offsetHeight. I will experiment a bit on that.

Copy link
Contributor Author

@Charlie-XIAO Charlie-XIAO Feb 1, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay so experimenting with min-height 10rem we can see that min-height is still needed.

(Only the last 3 seconds of the video is meaningful... something's wrong with my screen recording)

The.PyData.Sphinx.Theme.PyData.Theme.0.15.3dev0.documentation.7.-.-.Microsoft.Edge.2024-02-02.02-50-43.mp4

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;
}
Expand All @@ -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);
}
23 changes: 22 additions & 1 deletion src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/announcement.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 %}
Expand All @@ -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 }}");
Expand Down