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.

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

[docs] Add global table of contents #9614

Draft
wants to merge 3 commits into
base: docs/guide
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
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
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
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
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
Loading