Skip to content
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

Jump to bottom

ENH: Left navigation menu to collapse at the "part" level #594

Merged
merged 29 commits into from Mar 11, 2022
Merged

ENH: Left navigation menu to collapse at the "part" level #594

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
47985bb
restructuring html for parts
AakashGfude Feb 22, 2022
cbcc5c3
added styling and restructured bs html
AakashGfude Feb 22, 2022
c33f15e
adding list-caption class
AakashGfude Feb 22, 2022
c267479
not adding collapse parts for now
AakashGfude Feb 22, 2022
fc53df7
modified tests
AakashGfude Feb 22, 2022
c54dfb4
pre-commit
AakashGfude Feb 22, 2022
dcf9c2c
Update src/pydata_sphinx_theme/__init__.py
AakashGfude Feb 23, 2022
6698203
opening captions explicitly
AakashGfude Feb 23, 2022
f9a127b
Merge branch 'parts-collapse' of https://github.com/AakashGfude/pydat…
AakashGfude Feb 23, 2022
3761169
making parts text clickable
AakashGfude Feb 23, 2022
ef87163
style for part label
AakashGfude Feb 23, 2022
67c4c2f
pre-commit
AakashGfude Feb 23, 2022
3785a47
corrections in __init__ and tests
AakashGfude Feb 23, 2022
cce1bf9
adding docs for show_nav_levek: 0
AakashGfude Feb 24, 2022
63acd91
parts collapse only when show_nav_level: 0
AakashGfude Feb 24, 2022
cd7ecb3
tests update
AakashGfude Feb 25, 2022
d67480e
added test for sidebar nav_level0
AakashGfude Feb 25, 2022
270fe93
docs edit
AakashGfude Feb 25, 2022
4650f39
parts chevron style
AakashGfude Feb 28, 2022
99b2340
Update docs/user_guide/configuring.rst
AakashGfude Feb 28, 2022
dca2f5d
Update src/pydata_sphinx_theme/__init__.py
AakashGfude Feb 28, 2022
c5ef7d1
Update src/pydata_sphinx_theme/__init__.py
AakashGfude Feb 28, 2022
8e94faf
Update src/pydata_sphinx_theme/__init__.py
AakashGfude Feb 28, 2022
a60b2a7
Update src/pydata_sphinx_theme/__init__.py
AakashGfude Feb 28, 2022
819caed
Update src/pydata_sphinx_theme/__init__.py
AakashGfude Feb 28, 2022
2b43a8c
tests and some code refactoring
AakashGfude Feb 28, 2022
df2ca97
Clarify this in the docs
choldgraf Mar 10, 2022
7da634d
Update docs/user_guide/configuring.rst
choldgraf Mar 10, 2022
a3d4caf
Cleaning up docs
choldgraf Mar 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
30 changes: 25 additions & 5 deletions src/pydata_sphinx_theme/__init__.py
View file
Open in desktop
Expand Up @@ -131,19 +131,39 @@ def generate_nav_html(kind, startdepth=None, show_nav_level=1, **kwargs):
for ul in soup("ul", recursive=False):
ul.attrs["class"] = ul.attrs.get("class", []) + ["nav", "bd-sidenav"]

# restructing html to handle part collapsing
AakashGfude marked this conversation as resolved.
Show resolved Hide resolved
partcaptions = soup.find_all("p", attrs={"class": "caption"})
choldgraf marked this conversation as resolved.
Show resolved Hide resolved
if len(partcaptions):
new_soup = bs("<ul class='list-caption'></ul>", "html.parser")
for caption in partcaptions:
for sibling in caption.next_siblings:
if sibling.name == "ul":
toclist = sibling
break
li = soup.new_tag("li", attrs={"class": "toctree-l0"})
li.append(caption)
li.append(toclist)
new_soup.ul.append(li)
else:
new_soup = soup

# Add icons and labels for collapsible nested sections
_add_collapse_checkboxes(soup)
_add_collapse_checkboxes(new_soup)

# Open the navbar to the proper depth
for ii in range(int(show_nav_level)):
for checkbox in soup.select(
ii = 0
while True:
ii += 1
for checkbox in new_soup.select(
f"li.toctree-l{ii} > input.toctree-checkbox"
):
checkbox.attrs["checked"] = None
Copy link
Collaborator

Choose a reason for hiding this comment

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

@AakashGfude I believe that the logic for automatically opening checkboxes for an active page is actually here:

pydata-sphinx-theme/src/pydata_sphinx_theme/__init__.py

Lines 295 to 298 in c987276

# if this has a "current" class, be expanded by default
# (by checking the checkbox)
if "current" in classes:
checkbox.attrs["checked"] = ""

So you'd want to add a similar piece of logic to that block that also detects a caption that corresponds to that section of the toctree, and opens it.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks @choldgraf , I had to add the logic to expand the part explicitly here 6698203#diff-d9f80958bbaaf03124bb877a07f31183c094105bbe78ea167de87e02b18d66b7R284, as it does not seem to have the current class when show_nav_level: 0. Which makes it work now.
Not sure where is the logic to add current class to an element, but will try to find it.

Copy link
Collaborator

Choose a reason for hiding this comment

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

I believe that current is added by Sphinx, so perhaps after you've nested everything you can do something like

if new_soup.select(".current"):
  # Check the top `ul`

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@choldgraf, have implemented similar logic. if the child li elements have current class then "checking" the parent part

out = soup.prettify()
if ii >= int(show_nav_level):
break
out = new_soup.prettify()

elif kind == "raw":
out = soup
out = new_soup

return out

Expand Down
75 changes: 38 additions & 37 deletions src/pydata_sphinx_theme/assets/styles/index.scss
View file
Open in desktop
Expand Up @@ -165,34 +165,6 @@ footer {
}
}

.bd-sidebar {
padding-top: 1em;
overflow-y: auto;
display: flex;
flex-direction: column;

@include media-breakpoint-up(md) {
border-right: 1px solid rgba(0, 0, 0, 0.1);

@supports (position: -webkit-sticky) or (position: sticky) {
position: -webkit-sticky;
position: sticky;
top: var(--pst-header-height);
z-index: 1000;
height: calc(100vh - var(--pst-header-height));
}
}

&.no-sidebar {
border-right: 0;
}

.sidebar-end-items {
margin-top: auto;
margin-bottom: 1em;
}
}

.bd-links {
padding-top: 1rem;
padding-bottom: 1rem;
Expand Down Expand Up @@ -346,7 +318,8 @@ nav.bd-links {

/* Nav: hide second level (shown on .active) */

.bd-toc .nav {
.bd-toc .nav,
.list-caption {
.nav {
display: none;

Expand Down Expand Up @@ -522,8 +495,44 @@ nav.bd-links {
}

.bd-sidebar {
padding-top: 1em;
AakashGfude marked this conversation as resolved.
Show resolved Hide resolved
overflow-y: auto;
display: flex;
flex-direction: column;

@include media-breakpoint-up(md) {
border-right: 1px solid rgba(0, 0, 0, 0.1);

@supports (position: -webkit-sticky) or (position: sticky) {
position: -webkit-sticky;
position: sticky;
top: var(--pst-header-height);
z-index: 1000;
height: calc(100vh - var(--pst-header-height));
}
}

&.no-sidebar {
border-right: 0;
}

.sidebar-end-items {
margin-top: auto;
margin-bottom: 1em;
}
.list-caption {
list-style: none;
padding-left: 0px;
}
li {
position: relative;
// If it has children, add a bit more padding to wrap the content to avoid
// overlapping with the <label>
&.has-children {
> .reference {
padding-right: 30px;
}
}
}
label {
position: absolute;
Expand Down Expand Up @@ -553,14 +562,6 @@ nav.bd-links {
}
}
}

// If it has children, add a bit more padding to wrap the content to avoid
// overlapping with the <label>
li.has-children {
> .reference {
padding-right: 30px;
}
}
}

// From https://stackoverflow.com/a/34372191
Expand Down
55 changes: 32 additions & 23 deletions tests/test_build/test_sidebars_captions.html
View file
Open in desktop
@@ -1,39 +1,48 @@
<nav aria-label="Main navigation" class="bd-links" id="bd-docs-nav">
<div class="bd-toc-item active">
<p aria-level="2" class="caption" role="heading">
<span class="caption-text">
Section 1
</span>
</p>
<ul class="nav bd-sidenav">
<li class="toctree-l1 has-children">
<a class="reference internal" href="subsection1/index.html">
Subsection 1.1 index
</a>
<input class="toctree-checkbox" id="toctree-checkbox-1" name="toctree-checkbox-1" type="checkbox">
<ul class="list-caption">
<li class="toctree-l0 has-children">
<p aria-level="2" class="caption" role="heading">
<span class="caption-text">
Section 1
</span>
</p>
<input checked="" class="toctree-checkbox" id="toctree-checkbox-1" name="toctree-checkbox-1" type="checkbox">
<label for="toctree-checkbox-1">
<i class="fas fa-chevron-down">
</i>
</label>
<ul>
<li class="toctree-l2">
<a class="reference internal" href="subsection1/page1.html">
Section 1 sub 1 page 1
<ul class="nav bd-sidenav">
<li class="toctree-l1 has-children">
<a class="reference internal" href="subsection1/index.html">
Subsection 1.1 index
</a>
<input class="toctree-checkbox" id="toctree-checkbox-2" name="toctree-checkbox-2" type="checkbox"/>
<label for="toctree-checkbox-2">
<i class="fas fa-chevron-down">
</i>
</label>
<ul>
<li class="toctree-l2">
<a class="reference internal" href="subsection1/page1.html">
Section 1 sub 1 page 1
</a>
</li>
<li class="toctree-l2">
<a class="reference internal" href="subsection1/page2.html">
Section 1 sub 1 page 2
</a>
</li>
</ul>
</li>
<li class="toctree-l2">
<a class="reference internal" href="subsection1/page2.html">
Section 1 sub 1 page 2
<li class="toctree-l1">
<a class="reference internal" href="page2.html">
Section 1 page 1
</a>
</li>
</ul>
</input>
</li>
<li class="toctree-l1">
<a class="reference internal" href="page2.html">
Section 1 page 1
</a>
</li>
</ul>
</div>
</nav>
40 changes: 25 additions & 15 deletions tests/test_build/test_sidebars_level2.html
View file
Open in desktop
@@ -1,21 +1,31 @@
<nav aria-label="Main navigation" class="bd-links" id="bd-docs-nav">
<div class="bd-toc-item active">
<!-- Use deeper level for sidebar -->
<p aria-level="2" class="caption" role="heading">
<span class="caption-text">
Subsection 1.1
</span>
</p>
<ul class="nav bd-sidenav">
<li class="toctree-l1">
<a class="reference internal" href="page1.html">
Section 1 sub 1 page 1
</a>
</li>
<li class="toctree-l1">
<a class="reference internal" href="page2.html">
Section 1 sub 1 page 2
</a>
<ul class="list-caption">
<li class="toctree-l0 has-children">
<p aria-level="2" class="caption" role="heading">
<span class="caption-text">
Subsection 1.1
</span>
</p>
<input checked="" class="toctree-checkbox" id="toctree-checkbox-1" name="toctree-checkbox-1" type="checkbox">
<label for="toctree-checkbox-1">
<i class="fas fa-chevron-down">
</i>
</label>
<ul class="nav bd-sidenav">
<li class="toctree-l1">
<a class="reference internal" href="page1.html">
Section 1 sub 1 page 1
</a>
</li>
<li class="toctree-l1">
<a class="reference internal" href="page2.html">
Section 1 sub 1 page 2
</a>
</li>
</ul>
</input>
</li>
</ul>
</div>
Expand Down
53 changes: 31 additions & 22 deletions tests/test_build/test_sidebars_nested_page.html
View file
Open in desktop
@@ -1,39 +1,48 @@
<nav aria-label="Main navigation" class="bd-links" id="bd-docs-nav">
<div class="bd-toc-item active">
<p aria-level="2" class="caption" role="heading">
<span class="caption-text">
Section 1
</span>
</p>
<ul class="current nav bd-sidenav">
<li class="toctree-l1 current active has-children">
<a class="reference internal" href="index.html">
Subsection 1.1 index
</a>
<ul class="list-caption">
<li class="toctree-l0 has-children">
<p aria-level="2" class="caption" role="heading">
<span class="caption-text">
Section 1
</span>
</p>
<input checked="" class="toctree-checkbox" id="toctree-checkbox-1" name="toctree-checkbox-1" type="checkbox">
<label for="toctree-checkbox-1">
<i class="fas fa-chevron-down">
</i>
</label>
<ul class="current">
<li class="toctree-l2 current active">
<a class="current reference internal" href="#">
Section 1 sub 1 page 1
<ul class="current nav bd-sidenav">
<li class="toctree-l1 current active has-children">
<a class="reference internal" href="index.html">
Subsection 1.1 index
</a>
<input checked="" class="toctree-checkbox" id="toctree-checkbox-2" name="toctree-checkbox-2" type="checkbox"/>
<label for="toctree-checkbox-2">
<i class="fas fa-chevron-down">
</i>
</label>
<ul class="current">
<li class="toctree-l2 current active">
<a class="current reference internal" href="#">
Section 1 sub 1 page 1
</a>
</li>
<li class="toctree-l2">
<a class="reference internal" href="page2.html">
Section 1 sub 1 page 2
</a>
</li>
</ul>
</li>
<li class="toctree-l2">
<a class="reference internal" href="page2.html">
Section 1 sub 1 page 2
<li class="toctree-l1">
<a class="reference internal" href="../page2.html">
Section 1 page 1
</a>
</li>
</ul>
</input>
</li>
<li class="toctree-l1">
<a class="reference internal" href="../page2.html">
Section 1 page 1
</a>
</li>
</ul>
</div>
</nav>