diff --git a/docs/conf.py b/docs/conf.py index 54537a096..40c0a22df 100644 --- a/docs/conf.py +++ b/docs/conf.py @@ -175,6 +175,7 @@ # "footer_start": ["test.html", "test.html"], # "secondary_sidebar_items": ["page-toc.html"], # Remove the source buttons "switcher": { + "use_rtd": True, "json_url": json_url, "version_match": version_match, }, diff --git a/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js b/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js index bf56b0a44..6cfbda5ab 100644 --- a/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js +++ b/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js @@ -483,6 +483,7 @@ function initRTDObserver() { const mutatedCallback = (mutationList, observer) => { mutationList.forEach((mutation) => { // Check whether the mutation is for RTD, which will have a specific structure + console.log(`XXX {mutation.type} XXX`); if (mutation.addedNodes.length === 0) { return; } @@ -490,8 +491,24 @@ function initRTDObserver() { return; } if (mutation.addedNodes[0].data.search("Inserted RTD Footer") != -1) { - mutation.addedNodes.forEach((node) => { - document.getElementById("rtd-footer-container").append(node); + console.log("XXX FOUND MUTATED NODE XXX"); + let flyout = mutation.addedNodes[0].cloneNode(true); + console.log(flyout); + // copy the flyout menu to whichever of the 2 target nodes didn't already get + // written to by the RTD injection script. + document.querySelectorAll('[data-rtd-target="rtd"]').forEach((node) => { + console.log("XXX FOUND A TARGET NODE XXX"); + if (!node.hasChildNodes()) { + console.log("XXX FOUND CHILDLESS NODE XXX"); + node.appendChild(flyout); + flyout.onclick = toggleFlyout; + // replicate the onclick function RTD uses: it can't be cloned by cloneNode() + flyout + .querySelector(".rst-current-version") + .addEventListener("click", function (e) { + e.currentTarget.classList.toggleClass("shift-up"); + }); + } }); } }); diff --git a/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss b/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss index f3fe96be1..368860f6a 100644 --- a/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss +++ b/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss @@ -22,39 +22,46 @@ $link-underline-offset: 0.1578em !default; // - 0.12em (relative to the link's text size) $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default; +@function if-important($important) { + @return #{if($important, "!important", "")}; +} + // Ensures links have an underline decoration by default - needed to meet // WCAG SC 1.4.1 -@mixin link-decoration { - text-decoration: underline; +@mixin link-decoration($important: false) { + text-decoration: underline if-important($important); @if $link-underline-thickness { - text-decoration-thickness: $link-underline-thickness; + text-decoration-thickness: $link-underline-thickness + if-important($important); } @if $link-underline-offset { - text-underline-offset: $link-underline-offset; + text-underline-offset: $link-underline-offset if-important($important); } } // Ensures links have an underline decoration on hover - distinct from the // default behaviour -@mixin link-decoration-hover { +@mixin link-decoration-hover($important: false) { @if $link-hover-decoration-thickness { - text-decoration-thickness: $link-hover-decoration-thickness; + text-decoration-thickness: $link-hover-decoration-thickness + if-important($important); // Disable ink skipping on underlines on hover. Browsers haven't // standardised on this part of the spec yet, so set both properties - text-decoration-skip-ink: none; // Chromium, Firefox - text-decoration-skip: none; // Safari + text-decoration-skip-ink: none + if-important($important); // Chromium, Firefox + text-decoration-skip: none if-important($important); // Safari } } // Simple hover style - can be used alone or in conjunction with other mixins // Add the text underline and change in thickness on hover -@mixin link-style-hover { +@mixin link-style-hover($important: false) { &:hover { - @include link-decoration; - @include link-decoration-hover; - color: var(--pst-color-link-hover); + @include link-decoration($important: $important); + @include link-decoration-hover($important: $important); + color: var(--pst-color-link-hover) if-important($important); } } diff --git a/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss b/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss index 8e9bb83dc..9ce841490 100644 --- a/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss +++ b/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss @@ -1,69 +1,54 @@ -.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-admonition-font-weight-heading); +.rst-versions { + position: relative !important; + font-family: inherit !important; + a { + color: var(--pst-color-link) !important; + text-decoration: underline !important; + @include link-style-hover($important: true); + } + &.rst-badge { + border-color: var(--pst-color-border) !important; + border-radius: $admonition-border-radius; + border-style: solid !important; + border-width: 1px !important; + bottom: unset !important; + right: unset !important; + &.shift-up .rst-current-version { + .fa-book { + float: none !important; + } + > .rst-current-version { + height: inherit !important; } - } - .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-current-version { + background-color: var(--pst-color-on-background) !important; + color: var(--pst-color-text-base) !important; + font-size: unset !important; + .fa-book { + float: none; + display: inline-block !important; } } - .rst-other-versions { - background-color: var(--pst-color-surface); - color: var(--pst-color-text-base); - - dl { - dd a { - color: var(--pst-color-text-muted); - } - } - + position: absolute; + width: 300px; + color: var(--pst-color-text-muted) !important; + background-color: var(--pst-color-on-background) !important; hr { - background-color: var(--pst-color-border); + border: none !important; + border-top: solid 1px var(--pst-color-border) !important; } - - small a { - color: var(--pst-color-link); + dl { + border-top: solid 1px var(--pst-color-border) !important; } - - input { - padding-left: 0.5rem; - border: 1px solid var(--pst-color-border); - background-color: var(--pst-color-surface); + dd { + a { + @include link-style-hover($important: true); + color: var(--pst-color-text-base) !important; + text-decoration: none !important; + } } } } diff --git a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/version-switcher.html b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/version-switcher.html index 974aa8c87..be5403c10 100644 --- a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/version-switcher.html +++ b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/version-switcher.html @@ -1,15 +1,21 @@ {# As the version switcher will only work when JavaScript is enabled, we add it through JavaScript. #} - +{% if theme_switcher.get('use_rtd') is defined and theme_switcher.get('use_rtd') %} + +{% else %} + +{% endif %}