From ce45f0b12e8e012f3192e4f35c19cc5b2e1824cc Mon Sep 17 00:00:00 2001 From: 12rambau Date: Mon, 10 Oct 2022 16:23:46 +0200 Subject: [PATCH 01/16] try to set the flyout in the left bottom corner --- .../theme/pydata_sphinx_theme/sections/sidebar-primary.html | 3 +++ 1 file changed, 3 insertions(+) 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 ace72f1fbd..46cf299bfd 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 @@ -42,4 +42,7 @@ {%- endfor %} + + {# add the rtd flyout in the sidebar #} + {% endblock %} From 6266feca9a1b52604cca26564c5befc548ade970 Mon Sep 17 00:00:00 2001 From: 12rambau Date: Mon, 10 Oct 2022 18:30:32 +0200 Subject: [PATCH 02/16] add a mutation observer --- .../assets/scripts/index.js | 28 +++++++++++++++++++ .../sections/sidebar-primary.html | 4 +-- 2 files changed, 30 insertions(+), 2 deletions(-) diff --git a/src/pydata_sphinx_theme/assets/scripts/index.js b/src/pydata_sphinx_theme/assets/scripts/index.js index d2817fcb5b..a0fe489538 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/theme/pydata_sphinx_theme/sections/sidebar-primary.html b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/sidebar-primary.html index 46cf299bfd..59cedfe691 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 #}
{%- for sidebartemplate in theme_primary_sidebar_end %}
@@ -43,6 +43,6 @@ {%- endfor %}
- {# add the rtd flyout in the sidebar #} + {# add the rtd flyout in the sidebar if existing #} {% endblock %} From bec70c563461a02af6c67cb6f8980a7c4c862907 Mon Sep 17 00:00:00 2001 From: 12rambau Date: Mon, 10 Oct 2022 18:47:31 +0200 Subject: [PATCH 03/16] add some styling --- .../components/_readthedocs-switcher.scss | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss 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 0000000000..931aafe53d --- /dev/null +++ b/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss @@ -0,0 +1,20 @@ +.bd-sidebar-primary div#rtd-footer-container { + position: sticky; + bottom: 0; + + .rst-versions.rst-badge { + position: unset; + font-size: 0.9em; + } + + .rst-versions.rst-badge .rst-current-version { + display: flex; + align-items: center; + gap: 0.2rem; + height: 2.5rem; + transition: background-color 0.2s ease-out; + background-color: #fff; + color: #5a5a5a; + border-top: 1px solid rgba(0, 0, 0, 0.1); + } +} From db9c962a8ad9085d50bba80d540796aec7b1461e Mon Sep 17 00:00:00 2001 From: 12rambau Date: Mon, 10 Oct 2022 18:55:20 +0200 Subject: [PATCH 04/16] typo --- src/pydata_sphinx_theme/assets/styles/index.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pydata_sphinx_theme/assets/styles/index.scss b/src/pydata_sphinx_theme/assets/styles/index.scss index 6130ecc51e..81900b2485 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"; From f98e0d5148ad99c6f52135aa50eb3484da2078e6 Mon Sep 17 00:00:00 2001 From: 12rambau Date: Mon, 10 Oct 2022 19:43:39 +0200 Subject: [PATCH 05/16] start customization --- .../components/_readthedocs-switcher.scss | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) 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 931aafe53d..3fd15aeb7b 100644 --- a/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss +++ b/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss @@ -1,6 +1,7 @@ .bd-sidebar-primary div#rtd-footer-container { position: sticky; bottom: 0; + margin: -1rem -1rem; // ignore sidebar padding .rst-versions.rst-badge { position: unset; @@ -13,8 +14,19 @@ gap: 0.2rem; height: 2.5rem; transition: background-color 0.2s ease-out; - background-color: #fff; - color: #5a5a5a; - border-top: 1px solid rgba(0, 0, 0, 0.1); + background-color: var(--pst-color-background); + color: var(--pst-color-text-muted); + border-top: 1px solid var(--pst-color-border); + } + + .rst-current-version { + font-family: var(--pst-font-family-base-system); + + .fa.fa-book { + color: var(--pst-color-text-muted); + } + .fa.fa-carret-down { + color: var(--pst-color-text-muted); + } } } From 489937e8213c9d62a0a6c8bbd3669ce3e7524639 Mon Sep 17 00:00:00 2001 From: 12rambau Date: Mon, 10 Oct 2022 20:03:26 +0200 Subject: [PATCH 06/16] customization --- .../styles/components/_readthedocs-switcher.scss | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) 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 3fd15aeb7b..c39c635f9b 100644 --- a/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss +++ b/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss @@ -1,6 +1,6 @@ .bd-sidebar-primary div#rtd-footer-container { position: sticky; - bottom: 0; + bottom: -1rem; margin: -1rem -1rem; // ignore sidebar padding .rst-versions.rst-badge { @@ -24,8 +24,15 @@ .fa.fa-book { color: var(--pst-color-text-muted); + margin-right: auto; + + &::after { + content: "Read The Docs"; + font-family: var(--pst-font-family-base-system); + font-weight: var(--pst-font-weight-heading); + } } - .fa.fa-carret-down { + .fa.fa-caret-down { color: var(--pst-color-text-muted); } } From 3d92e2ed9466bce9e75a4973e64d63bd95e21974 Mon Sep 17 00:00:00 2001 From: 12rambau Date: Mon, 10 Oct 2022 20:29:25 +0200 Subject: [PATCH 07/16] avoid y scroll --- .../assets/styles/components/_readthedocs-switcher.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 c39c635f9b..93115463a4 100644 --- a/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss +++ b/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss @@ -1,7 +1,7 @@ .bd-sidebar-primary div#rtd-footer-container { position: sticky; bottom: -1rem; - margin: -1rem -1rem; // ignore sidebar padding + margin: -1rem 0 -1rem -1rem; // ignore sidebar padding .rst-versions.rst-badge { position: unset; @@ -27,6 +27,7 @@ margin-right: auto; &::after { + color: var(--pst-color-text-base); content: "Read The Docs"; font-family: var(--pst-font-family-base-system); font-weight: var(--pst-font-weight-heading); From 5472f686b514b853bae06792120912499e479f7f Mon Sep 17 00:00:00 2001 From: 12rambau Date: Mon, 10 Oct 2022 21:28:20 +0200 Subject: [PATCH 08/16] custom content --- .../components/_readthedocs-switcher.scss | 31 ++++++++++++++++--- 1 file changed, 27 insertions(+), 4 deletions(-) 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 93115463a4..12002d3444 100644 --- a/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss +++ b/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss @@ -6,9 +6,6 @@ .rst-versions.rst-badge { position: unset; font-size: 0.9em; - } - - .rst-versions.rst-badge .rst-current-version { display: flex; align-items: center; gap: 0.2rem; @@ -16,11 +13,12 @@ transition: background-color 0.2s ease-out; background-color: var(--pst-color-background); color: var(--pst-color-text-muted); - border-top: 1px solid var(--pst-color-border); } .rst-current-version { font-family: var(--pst-font-family-base-system); + border-top: 1px solid var(--pst-color-border); + border-bottom: 1px solid var(--pst-color-border); .fa.fa-book { color: var(--pst-color-text-muted); @@ -37,4 +35,29 @@ color: var(--pst-color-text-muted); } } + + rst-other-version { + background-color: var(--pst-color-background); + color: var(--pst-color-text-base); + + dl { + dd a { + color: var(--pst-color-text-muted); + } + } + + hr { + background-color: var(--pst-color-border); + } + + small span a { + color: var(--pst-color-link); + } + + input { + padding-left: 0.5rem; + border: 1px solid var(--pst-color-border); + background-color: var(--pst-color-background); + } + } } From e6a06758f8bb7f4fc60e3cf9e4eaf118b960b20d Mon Sep 17 00:00:00 2001 From: 12rambau Date: Mon, 10 Oct 2022 21:35:04 +0200 Subject: [PATCH 09/16] custom content --- .../components/_readthedocs-switcher.scss | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) 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 12002d3444..ac83efa6b1 100644 --- a/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss +++ b/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss @@ -6,19 +6,19 @@ .rst-versions.rst-badge { position: unset; font-size: 0.9em; - 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-text-muted); - } - .rst-current-version { - font-family: var(--pst-font-family-base-system); - border-top: 1px solid var(--pst-color-border); - border-bottom: 1px solid var(--pst-color-border); + .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-text-muted); + font-family: var(--pst-font-family-base-system); + border-top: 1px solid var(--pst-color-border); + border-bottom: 1px solid var(--pst-color-border); + } .fa.fa-book { color: var(--pst-color-text-muted); @@ -36,7 +36,7 @@ } } - rst-other-version { + .rst-other-version { background-color: var(--pst-color-background); color: var(--pst-color-text-base); From c1e024c549e9aa06a3e505a352f1b0683bd6516c Mon Sep 17 00:00:00 2001 From: 12rambau Date: Mon, 10 Oct 2022 21:43:33 +0200 Subject: [PATCH 10/16] typo --- .../assets/styles/components/_readthedocs-switcher.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 ac83efa6b1..664f4726c4 100644 --- a/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss +++ b/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss @@ -36,7 +36,7 @@ } } - .rst-other-version { + .rst-other-versions { background-color: var(--pst-color-background); color: var(--pst-color-text-base); From de1805817e5a45931a39c122f677169e6f7b1911 Mon Sep 17 00:00:00 2001 From: 12rambau Date: Mon, 10 Oct 2022 21:48:19 +0200 Subject: [PATCH 11/16] fix test --- tests/test_build/sidebar_subpage.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/tests/test_build/sidebar_subpage.html b/tests/test_build/sidebar_subpage.html index 09dcab5ad3..835736bb50 100644 --- a/tests/test_build/sidebar_subpage.html +++ b/tests/test_build/sidebar_subpage.html @@ -79,4 +79,6 @@
+ From 0cb95b54f24b9401df9a478671ccbc21f74d99b1 Mon Sep 17 00:00:00 2001 From: 12rambau Date: Mon, 10 Oct 2022 21:51:48 +0200 Subject: [PATCH 12/16] color of the links --- .../assets/styles/components/_readthedocs-switcher.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 664f4726c4..bf75610758 100644 --- a/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss +++ b/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss @@ -50,7 +50,7 @@ background-color: var(--pst-color-border); } - small span a { + small a { color: var(--pst-color-link); } From 8c90166acd26682647a33e515374c55b26f30fad Mon Sep 17 00:00:00 2001 From: 12rambau Date: Mon, 10 Oct 2022 21:59:43 +0200 Subject: [PATCH 13/16] color to surface --- .../assets/styles/components/_readthedocs-switcher.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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 bf75610758..ab1039a79e 100644 --- a/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss +++ b/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss @@ -1,7 +1,7 @@ .bd-sidebar-primary div#rtd-footer-container { position: sticky; bottom: -1rem; - margin: -1rem 0 -1rem -1rem; // ignore sidebar padding + margin: -1rem -1rem -1rem -1rem; // ignore sidebar padding .rst-versions.rst-badge { position: unset; @@ -14,7 +14,7 @@ height: 2.5rem; transition: background-color 0.2s ease-out; background-color: var(--pst-color-background); - color: var(--pst-color-text-muted); + color: var(--pst-color-success); font-family: var(--pst-font-family-base-system); border-top: 1px solid var(--pst-color-border); border-bottom: 1px solid var(--pst-color-border); @@ -37,7 +37,7 @@ } .rst-other-versions { - background-color: var(--pst-color-background); + background-color: var(--pst-color-surface); color: var(--pst-color-text-base); dl { @@ -57,7 +57,7 @@ input { padding-left: 0.5rem; border: 1px solid var(--pst-color-border); - background-color: var(--pst-color-background); + background-color: var(--pst-color-surface); } } } From 5e6c1516e218458b2f1ea7397a12b8d160cb723e Mon Sep 17 00:00:00 2001 From: 12rambau Date: Mon, 10 Oct 2022 22:07:45 +0200 Subject: [PATCH 14/16] final custom ? --- .../styles/components/_readthedocs-switcher.scss | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) 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 ab1039a79e..70607f3155 100644 --- a/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss +++ b/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss @@ -6,6 +6,7 @@ .rst-versions.rst-badge { position: unset; font-size: 0.9em; + font-family: var(--pst-font-family-base); .rst-current-version { display: flex; @@ -15,9 +16,7 @@ transition: background-color 0.2s ease-out; background-color: var(--pst-color-background); color: var(--pst-color-success); - font-family: var(--pst-font-family-base-system); border-top: 1px solid var(--pst-color-border); - border-bottom: 1px solid var(--pst-color-border); } .fa.fa-book { @@ -27,7 +26,7 @@ &::after { color: var(--pst-color-text-base); content: "Read The Docs"; - font-family: var(--pst-font-family-base-system); + font-family: var(--pst-font-family-base); font-weight: var(--pst-font-weight-heading); } } @@ -36,6 +35,12 @@ } } + .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); From 813a4257659495c36130ddcb025cd00ef7d7c92e Mon Sep 17 00:00:00 2001 From: 12rambau Date: Mon, 10 Oct 2022 22:12:52 +0200 Subject: [PATCH 15/16] bug in margins --- .../assets/styles/components/_readthedocs-switcher.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 70607f3155..f66c244a54 100644 --- a/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss +++ b/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss @@ -1,7 +1,7 @@ .bd-sidebar-primary div#rtd-footer-container { position: sticky; bottom: -1rem; - margin: -1rem -1rem -1rem -1rem; // ignore sidebar padding + margin: -1rem 0 -1rem -1rem; // ignore sidebar padding .rst-versions.rst-badge { position: unset; From 84b4b22589399c56f6aae86bc954e6e77f42890a Mon Sep 17 00:00:00 2001 From: 12rambau Date: Mon, 10 Oct 2022 22:19:35 +0200 Subject: [PATCH 16/16] custom for small screen --- .../assets/styles/components/_readthedocs-switcher.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 f66c244a54..bfc3f4892d 100644 --- a/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss +++ b/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss @@ -1,12 +1,13 @@ .bd-sidebar-primary div#rtd-footer-container { position: sticky; bottom: -1rem; - margin: -1rem 0 -1rem -1rem; // ignore sidebar padding + 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;