diff --git a/src/pydata_sphinx_theme/assets/scripts/index.js b/src/pydata_sphinx_theme/assets/scripts/index.js index d2817fcb5..a0fe48953 100644 --- a/src/pydata_sphinx_theme/assets/scripts/index.js +++ b/src/pydata_sphinx_theme/assets/scripts/index.js @@ -350,6 +350,33 @@ if (themeSwitchBtns) { ); } +/******************************************************************************* + * MutationObserver to move the ReadTheDocs button + */ + +function initRTDObserver() { + const mutatedCallback = (mutationList, observer) => { + mutationList.forEach((mutation) => { + // Check whether the mutation is for RTD, which will have a specific structure + if (mutation.addedNodes.length === 0) { + return; + } + if (mutation.addedNodes[0].data === undefined) { + return; + } + if (mutation.addedNodes[0].data.search("Inserted RTD Footer") != -1) { + mutation.addedNodes.forEach((node) => { + document.getElementById("rtd-footer-container").append(node); + }); + } + }); + }; + + const observer = new MutationObserver(mutatedCallback); + const config = { childList: true }; + observer.observe(document.body, config); +} + /******************************************************************************* * Finalize */ @@ -361,3 +388,4 @@ $(scrollToActive); $(addTOCInteractivity); $(setupSearchButtons); $('[data-toggle="tooltip"]').tooltip({ delay: { show: 500, hide: 100 } }); +$(initRTDObserver); diff --git a/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss b/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss new file mode 100644 index 000000000..bfc3f4892 --- /dev/null +++ b/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss @@ -0,0 +1,69 @@ +.bd-sidebar-primary div#rtd-footer-container { + position: sticky; + bottom: -1rem; + margin: -1rem; // ignore sidebar padding + + .rst-versions.rst-badge { + position: unset; + font-size: 0.9em; + font-family: var(--pst-font-family-base); + max-width: unset; + + .rst-current-version { + display: flex; + align-items: center; + gap: 0.2rem; + height: 2.5rem; + transition: background-color 0.2s ease-out; + background-color: var(--pst-color-background); + color: var(--pst-color-success); + border-top: 1px solid var(--pst-color-border); + } + + .fa.fa-book { + color: var(--pst-color-text-muted); + margin-right: auto; + + &::after { + color: var(--pst-color-text-base); + content: "Read The Docs"; + font-family: var(--pst-font-family-base); + font-weight: var(--pst-font-weight-heading); + } + } + .fa.fa-caret-down { + color: var(--pst-color-text-muted); + } + } + + .rst-versions.rst-badge.shift-up { + .rst-current-version { + border-bottom: 1px solid var(--pst-color-border); + } + } + + .rst-other-versions { + background-color: var(--pst-color-surface); + color: var(--pst-color-text-base); + + dl { + dd a { + color: var(--pst-color-text-muted); + } + } + + hr { + background-color: var(--pst-color-border); + } + + small a { + color: var(--pst-color-link); + } + + input { + padding-left: 0.5rem; + border: 1px solid var(--pst-color-border); + background-color: var(--pst-color-surface); + } + } +} diff --git a/src/pydata_sphinx_theme/assets/styles/index.scss b/src/pydata_sphinx_theme/assets/styles/index.scss index 6130ecc51..81900b248 100644 --- a/src/pydata_sphinx_theme/assets/styles/index.scss +++ b/src/pydata_sphinx_theme/assets/styles/index.scss @@ -55,6 +55,7 @@ $grid-breakpoints: ( @import "./components/toc-inpage"; @import "./components/versionmodified"; @import "./components/indices"; +@import "./components/readthedocs-switcher"; // Content blocks in standard Sphinx @import "./content/admonitions"; diff --git a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/sidebar-primary.html b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/sidebar-primary.html index ace72f1fb..59cedfe69 100644 --- a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/sidebar-primary.html +++ b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/sidebar-primary.html @@ -34,7 +34,7 @@ {% endif %} - {# Items that will snap to the bottom of the screen#} + {# Items that will snap to the bottom of the screen #} + + {# add the rtd flyout in the sidebar if existing #} + {% endblock %} diff --git a/tests/test_build/sidebar_subpage.html b/tests/test_build/sidebar_subpage.html index 09dcab5ad..835736bb5 100644 --- a/tests/test_build/sidebar_subpage.html +++ b/tests/test_build/sidebar_subpage.html @@ -79,4 +79,6 @@ +