From aedc6a21b6975ad0cffc31c03a71ad0bd0f79c3a Mon Sep 17 00:00:00 2001 From: Gabriel Fouasnon Date: Thu, 17 Aug 2023 21:12:04 +0300 Subject: [PATCH 1/9] Fix More dropdown (html, aria, bootstrap classes) --- src/pydata_sphinx_theme/toctree.py | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/pydata_sphinx_theme/toctree.py b/src/pydata_sphinx_theme/toctree.py index 1d35e2a0c..b3bd37cee 100644 --- a/src/pydata_sphinx_theme/toctree.py +++ b/src/pydata_sphinx_theme/toctree.py @@ -137,18 +137,22 @@ def generate_header_nav_html(n_links_before_dropdown: int = 5) -> str: out = "\n".join(links_solo) # Wrap the final few header items in a "more" dropdown - links_dropdown = links_html[n_links_before_dropdown:] + links_dropdown = [ + html.replace("nav-link", "nav-link dropdown-item") + for html in links_html[n_links_before_dropdown:] + ] + if links_dropdown: links_dropdown_html = "\n".join(links_dropdown) out += f""" -
- -
+
-
+ + """ return out From 41f3b931ec4a50b9751bcb59ef178c48760fb539 Mon Sep 17 00:00:00 2001 From: Gabriel Fouasnon Date: Thu, 17 Aug 2023 23:19:18 +0300 Subject: [PATCH 2/9] update dropdowns when user changes light/dark theme --- .../assets/scripts/pydata-sphinx-theme.js | 9 +++++++++ 1 file changed, 9 insertions(+) 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 0ad64952b..658d4ba42 100644 --- a/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js +++ b/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js @@ -38,6 +38,15 @@ function setTheme(mode) { document.documentElement.dataset.mode = mode; var theme = mode == "auto" ? colorScheme : mode; document.documentElement.dataset.theme = theme; + // TODO: remove this line after Bootstrap upgrade + // v5.3 has a colors mode: https://getbootstrap.com/docs/5.3/customize/color-modes/ + document.querySelectorAll(".dropdown-menu").forEach((el) => { + if (theme === "dark") { + el.classList.add("dropdown-menu-dark"); + } else { + el.classList.remove("dropdown-menu-dark"); + } + }); // save mode and theme localStorage.setItem("mode", mode); From 1d28b0491a32d289dbf6bd7f652345a042088bc8 Mon Sep 17 00:00:00 2001 From: Gabriel Fouasnon Date: Thu, 17 Aug 2023 23:27:31 +0300 Subject: [PATCH 3/9] fix padding --- src/pydata_sphinx_theme/assets/styles/sections/_header.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_header.scss b/src/pydata_sphinx_theme/assets/styles/sections/_header.scss index 2f6de94d7..2a66b0be0 100644 --- a/src/pydata_sphinx_theme/assets/styles/sections/_header.scss +++ b/src/pydata_sphinx_theme/assets/styles/sections/_header.scss @@ -107,10 +107,14 @@ border: 1px solid var(--pst-color-border); box-shadow: 0 0 0.3rem 0.1rem var(--pst-color-shadow); background-color: var(--pst-color-on-background); - padding: 0.5rem 1rem; + padding: 0.5rem 0; margin: 0.5rem 0; min-width: 20rem; + .dropdown-item { + padding: 0.25rem 1.5rem; + } + // Hide the menu unless show has been clicked &:not(.show) { display: none; From a7f307c9e5ce0e985f68e3e28b1d0c3831b7da4c Mon Sep 17 00:00:00 2001 From: Gabriel Fouasnon Date: Fri, 18 Aug 2023 16:31:58 +0300 Subject: [PATCH 4/9] fix active, hover - colors, transition --- .../assets/styles/sections/_header.scss | 12 ++++++++++++ .../assets/styles/variables/_bootstrap.scss | 7 +++++++ 2 files changed, 19 insertions(+) diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_header.scss b/src/pydata_sphinx_theme/assets/styles/sections/_header.scss index 2a66b0be0..fd70d1c2d 100644 --- a/src/pydata_sphinx_theme/assets/styles/sections/_header.scss +++ b/src/pydata_sphinx_theme/assets/styles/sections/_header.scss @@ -112,7 +112,19 @@ min-width: 20rem; .dropdown-item { + // Give the items in the dropdown some breathing room but let the hit + // and hover area of the items extend to the edges of the menu padding: 0.25rem 1.5rem; + + // Override Bootstrap + &:focus:not(:hover):not(:active) { + background-color: inherit; + } + } + + // Override Bootstrap + .nav-link { + transition: none; } // Hide the menu unless show has been clicked diff --git a/src/pydata_sphinx_theme/assets/styles/variables/_bootstrap.scss b/src/pydata_sphinx_theme/assets/styles/variables/_bootstrap.scss index 56c946eef..8cf8303d6 100644 --- a/src/pydata_sphinx_theme/assets/styles/variables/_bootstrap.scss +++ b/src/pydata_sphinx_theme/assets/styles/variables/_bootstrap.scss @@ -15,3 +15,10 @@ $grid-breakpoints: ( lg: 960px, xl: 1200px, ); + +$dropdown-link-hover-bg: var(--pst-color-surface); +// --pst-color-surface can also be assigned to the dark variant because it is +// scoped to different values depending on light/dark theme +$dropdown-dark-link-hover-bg: var(--pst-color-surface); +$dropdown-link-active-bg: var(--pst-color-surface); +$dropdown-dark-link-active-bg: var(--pst-color-surface); From 10dac40f4163745f9a2cef7b2738c3dd955133e0 Mon Sep 17 00:00:00 2001 From: gabalafou Date: Fri, 18 Aug 2023 09:33:05 -0500 Subject: [PATCH 5/9] Update src/pydata_sphinx_theme/toctree.py --- src/pydata_sphinx_theme/toctree.py | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pydata_sphinx_theme/toctree.py b/src/pydata_sphinx_theme/toctree.py index b3bd37cee..5f741a309 100644 --- a/src/pydata_sphinx_theme/toctree.py +++ b/src/pydata_sphinx_theme/toctree.py @@ -138,6 +138,8 @@ def generate_header_nav_html(n_links_before_dropdown: int = 5) -> str: # Wrap the final few header items in a "more" dropdown links_dropdown = [ + # 🐲 brittle code, relies on the assumption that the code above + # gives each link in the nav a `nav-link` CSS class html.replace("nav-link", "nav-link dropdown-item") for html in links_html[n_links_before_dropdown:] ] From eed8141069da56b23a91b5219d5d30f2d712f80e Mon Sep 17 00:00:00 2001 From: Gabriel Fouasnon Date: Fri, 18 Aug 2023 18:01:54 +0300 Subject: [PATCH 6/9] lint --- src/pydata_sphinx_theme/toctree.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pydata_sphinx_theme/toctree.py b/src/pydata_sphinx_theme/toctree.py index 5f741a309..0ddbf9feb 100644 --- a/src/pydata_sphinx_theme/toctree.py +++ b/src/pydata_sphinx_theme/toctree.py @@ -139,7 +139,7 @@ def generate_header_nav_html(n_links_before_dropdown: int = 5) -> str: # Wrap the final few header items in a "more" dropdown links_dropdown = [ # 🐲 brittle code, relies on the assumption that the code above - # gives each link in the nav a `nav-link` CSS class + # gives each link in the nav a `nav-link` CSS class html.replace("nav-link", "nav-link dropdown-item") for html in links_html[n_links_before_dropdown:] ] From 9648d665f85720476c8f7a9144c9a8bd45274bbb Mon Sep 17 00:00:00 2001 From: Gabriel Fouasnon Date: Tue, 22 Aug 2023 15:57:53 +0300 Subject: [PATCH 7/9] turn off all transitions on .nav-link --- .../assets/styles/sections/_header.scss | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_header.scss b/src/pydata_sphinx_theme/assets/styles/sections/_header.scss index fd70d1c2d..0e491274f 100644 --- a/src/pydata_sphinx_theme/assets/styles/sections/_header.scss +++ b/src/pydata_sphinx_theme/assets/styles/sections/_header.scss @@ -122,11 +122,6 @@ } } - // Override Bootstrap - .nav-link { - transition: none; - } - // Hide the menu unless show has been clicked &:not(.show) { display: none; @@ -146,6 +141,9 @@ .nav-link { @include link-style-hover; + // Override Bootstrap + transition: none; + &.nav-external:after { font: var(--fa-font-solid); content: var(--pst-icon-external-link); From 13761bb581644edd7b74c471a9f947bebbd76b30 Mon Sep 17 00:00:00 2001 From: Gabriel Fouasnon Date: Wed, 23 Aug 2023 18:51:33 +0300 Subject: [PATCH 8/9] fix test --- tests/test_build.py | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/tests/test_build.py b/tests/test_build.py index e347a87c9..379ef7cc8 100644 --- a/tests/test_build.py +++ b/tests/test_build.py @@ -322,19 +322,19 @@ def test_navbar_header_dropdown(sphinx_build_factory, n_links) -> None: navbar = index_html.select("ul.bd-navbar-elements")[0] if n_links == 0: # There should be *only* a dropdown and no standalone links - assert navbar.select("div.dropdown") and not navbar.select( - ".navbar-nav > li.nav-item" + assert navbar.select("li.dropdown") and not navbar.select( + ".navbar-nav > li.nav-item:not(.dropdown)" ) if n_links == 4: # There should be at least one standalone link, and a dropdown - assert navbar.select(".navbar-nav > li.nav-item") and navbar.select( - "div.dropdown" - ) + assert navbar.select( + ".navbar-nav > li.nav-item:not(.dropdown)" + ) and navbar.select("li.dropdown") if n_links == 8: # There should be no dropdown and only standalone links - assert navbar.select(".navbar-nav > li.nav-item") and not navbar.select( - "div.dropdown" - ) + assert navbar.select( + ".navbar-nav > li.nav-item:not(.dropdown)" + ) and not navbar.select("li.dropdown") def test_sidebars_captions(sphinx_build_factory, file_regression) -> None: From 00e2fae1006538a2031f91d5c20f52c8042c9cc6 Mon Sep 17 00:00:00 2001 From: Gabriel Fouasnon Date: Thu, 24 Aug 2023 11:46:32 +0300 Subject: [PATCH 9/9] make test more dry, readable --- tests/test_build.py | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/tests/test_build.py b/tests/test_build.py index 379ef7cc8..e2fa91457 100644 --- a/tests/test_build.py +++ b/tests/test_build.py @@ -320,21 +320,17 @@ def test_navbar_header_dropdown(sphinx_build_factory, n_links) -> None: sphinx_build = sphinx_build_factory("base", confoverrides=confoverrides).build() index_html = sphinx_build.html_tree("index.html") navbar = index_html.select("ul.bd-navbar-elements")[0] + dropdowns = navbar.select("li.dropdown") + standalone_links = navbar.select(".navbar-nav > li.nav-item:not(.dropdown)") if n_links == 0: # There should be *only* a dropdown and no standalone links - assert navbar.select("li.dropdown") and not navbar.select( - ".navbar-nav > li.nav-item:not(.dropdown)" - ) + assert len(dropdowns) == 1 and not standalone_links if n_links == 4: - # There should be at least one standalone link, and a dropdown - assert navbar.select( - ".navbar-nav > li.nav-item:not(.dropdown)" - ) and navbar.select("li.dropdown") + # There should be `n_links` standalone links, and a dropdown + assert len(standalone_links) == n_links and len(dropdowns) == 1 if n_links == 8: # There should be no dropdown and only standalone links - assert navbar.select( - ".navbar-nav > li.nav-item:not(.dropdown)" - ) and not navbar.select("li.dropdown") + assert standalone_links and not dropdowns def test_sidebars_captions(sphinx_build_factory, file_regression) -> None: