Skip to content

[docs] Add global table of contents #9614

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

Draft
wants to merge 3 commits into
base: docs/guide
Choose a base branch
from
Draft

[docs] Add global table of contents #9614

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a89ac43
Fix indentation issue
oliver-ni Oct 18, 2023
62c635d
Add global toc and move local toc to right
oliver-ni Oct 18, 2023
2b1b2f8
Increase toctree depth
oliver-ni Oct 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions docs/_static/custom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,13 +60,15 @@ document.addEventListener('DOMContentLoaded', () => {
bottomHeightThreshold = document.documentElement.scrollHeight - 30;
sections = document.querySelectorAll('section');
hamburgerToggle = document.getElementById('hamburger-toggle');

toTop = document.getElementById('to-top');
toTop.hidden = !(window.scrollY > 0);

if (hamburgerToggle) {
hamburgerToggle.addEventListener('click', (e) => {
sidebar.element.classList.toggle('sidebar-toggle');
document.querySelectorAll('.toc').forEach((element) => {
element.classList.toggle('sidebar-toggle');
});
let button = hamburgerToggle.firstElementChild;
if (button.textContent == 'menu') {
button.textContent = 'close';
Expand Down
2 changes: 1 addition & 1 deletion docs/_static/sidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ function getCurrentSection() {
}

document.addEventListener('DOMContentLoaded', () => {
sidebar = new Sidebar(document.getElementById('sidebar'));
sidebar = new Sidebar(document.querySelector('#local-toc .toc'));
sidebar.resize();
sidebar.createCollapsableSections();

Expand Down
172 changes: 105 additions & 67 deletions docs/_static/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,16 +206,16 @@ body {

/* Scrollbar related */

#sidebar::-webkit-scrollbar {
.toc::-webkit-scrollbar {
width: 0.5em;
}

#sidebar::-webkit-scrollbar-thumb {
.toc::-webkit-scrollbar-thumb {
background-color: var(--scrollbar);
border-radius: 0.25em;
}

#sidebar::-webkit-scrollbar-thumb:hover {
.toc::-webkit-scrollbar-thumb:hover {
background-color: var(--scrollbar-hover);
}

Expand All @@ -229,6 +229,7 @@ body {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"s"
"r"
"h"
"n"
"c"
Expand Down Expand Up @@ -378,7 +379,6 @@ footer a {
/* sidebar stuff */

aside {
grid-area: s;
font-size: 14px;
line-height: 1.75em;
top: 0;
Expand All @@ -392,6 +392,16 @@ aside {
overscroll-behavior-y: contain;
}

#global-toc {
grid-area: s;
z-index: 100;
}

#local-toc {
grid-area: r;
display: none;
}

aside h3 {
color: var(--mobile-nav-header-text);
font-size: 24px;
Expand Down Expand Up @@ -433,42 +443,44 @@ aside .material-icons,
display: unset !important;
}

#sidebar {
.toc {
display: none;
}

#sidebar a {
.toc a {
color: var(--mobile-nav-text);
}

#sidebar a:hover {
.toc a:hover {
color: var(--mobile-nav-hover-text);
}

#sidebar h3 {
.toc h3 {
font-size: 24px;
margin: 1em 1em 0 0;
}

#sidebar ul {
.toc ul {
list-style: none;
margin: 1em 2em 2em 1em;
/* margin: 1em 2em 2em 1em; */
padding: 0;
}

#sidebar ul ul {
.toc ul ul {
list-style: square;
margin: 0em;
margin-left: 1.5em;
}

#sidebar li.no-list-style {
.toc li.no-list-style {
list-style: none;
}

#sidebar form {
margin: 1em 0;
display: flex;
.toc li.current > a {
font-weight: bold;
}

.toc form {
align-items: baseline;
}

Expand Down Expand Up @@ -1223,6 +1235,8 @@ div.code-block-caption {

/* desktop stuff */

/* global toc collapsed but local toc shown */

@media screen and (min-width: 768px) {
.grid-item {
max-width: unset;
Expand All @@ -1231,43 +1245,15 @@ div.code-block-caption {
.main-grid {
grid-template-columns: repeat(6, 1fr);
grid-template-areas:
"s s s s s s"
"h h h h h h"
"n n n n n n"
"s s c c c c"
"s s f f f f";
}

.mobile-only {
display: none;
}

header {
background-color: var(--black);
}

header > nav {
background-color: unset;
}

.sub-header {
display: flex;
align-items: center;
}

.sub-header > label {
display: initial;
}

.sub-header > select {
display: initial;
margin-right: auto;
}

.sub-header > .settings {
display: initial;
"c c c c r r"
"f f f f r r";
}

aside {
#local-toc {
display: unset;
top: initial;
position: initial;
background-color: var(--nav-background);
Expand All @@ -1277,24 +1263,31 @@ div.code-block-caption {
overscroll-behavior-y: unset;
}

aside h3 {
#local-toc h3 {
color: var(--nav-header-text);
}

#sidebar {
display: inline-block;
#local-toc .toc {
display: block;
position: sticky;
top: 1em;
top: 5.25em;
max-height: calc(100vh - 2em);
max-width: 100%;
overflow-y: auto;
margin: 1em;
}

#sidebar a {
#local-toc .toc a {
color: var(--nav-text);
}

#local-toc .toc a:hover {
color: var(--nav-hover-text);
}

.mobile-only {
display: none;
}

.active {
background-color: transparent;
border-left: none;
Expand All @@ -1313,17 +1306,10 @@ div.code-block-caption {
border-radius: 4px;
z-index: -1;
}

#sidebar a:hover {
color: var(--nav-hover-text);
}

#hamburger-toggle, #settings-toggle {
display: none;

}
}

/* both sidebars shown */

@media screen and (min-width: 1200px) {
.main-grid {
/* 62.5% width => multiple of 5/8 content */
Expand All @@ -1332,25 +1318,73 @@ div.code-block-caption {
grid-template-areas:
"h h h h h h h h h h h h h h h h"
"n n n n n n n n n n n n n n n n"
"s s s . . c c c c c c c c c . ."
"s s s f f f f f f f f f f f f f"
"s s s s c c c c c c c c r r r r"
"s s s s f f f f f f f f r r r r"
}

#sidebar {
max-width: unset;
#local-toc .toc {
top: 1em;
}

#global-toc {
top: initial;
position: initial;
background-color: var(--nav-background);
color: var(--nav-text);
max-height: unset;
overflow-y: unset;
overscroll-behavior-y: unset;
}

#global-toc h3 {
color: var(--nav-header-text);
}

#global-toc .toc {
display: block;
position: sticky;
top: 1em;
max-height: calc(100vh - 2em);
overflow-y: auto;
margin: 1em;
}

#global-toc .toc a {
color: var(--nav-text);
}

#global-toc .toc a:hover {
color: var(--nav-hover-text);
}

header {
background-color: var(--black);
}

header > nav {
background-color: unset;
margin-left: 18.75%;
margin-right: 18.75%;
}

.sub-header {
display: flex;
align-items: center;
}

.sub-header > label {
display: initial;
margin-left: 18.75%;
margin-right: 1em;
}

.sub-header > select {
display: initial;
margin-right: auto;
}

.sub-header > .settings {
display: initial;
margin-right: 18.75%;
margin-left: 1em;
}
Expand All @@ -1368,4 +1402,8 @@ div.code-block-caption {
margin-left: auto;
margin-right: auto;
}

#hamburger-toggle, #settings-toggle {
display: none;
}
}
Loading