diff --git a/source/_static/js/main.js b/source/_static/js/main.js
index 8585edc8..96b207bf 100644
--- a/source/_static/js/main.js
+++ b/source/_static/js/main.js
@@ -1,5 +1,5 @@
window.addEventListener("DOMContentLoaded", (event) => {
- const tocMenuEl = document.querySelector(".content__toc__inner > ul");
+ const tocMenuEl = document.querySelector("#table-of-contents > ul.simple");
var readModeLs = localStorage.getItem("read-mode");
// --------------------------------------------------
@@ -10,6 +10,17 @@ window.addEventListener("DOMContentLoaded", (event) => {
}
+ // --------------------------------------------------
+ // Detect parent iframe.
+ // This is required to hide the navigation links when viewed via PathFactory for analytics purposes
+ // --------------------------------------------------
+ (function () {
+ if (window.location !== window.parent.location) {
+ document.body.classList.add("inside-iframe");
+ }
+ })();
+
+
// --------------------------------------------------
// Read mode
// --------------------------------------------------
@@ -91,17 +102,6 @@ window.addEventListener("DOMContentLoaded", (event) => {
})();
- // --------------------------------------------------
- // Detect parent iframe.
- // This is required to hide the navigation links when viewed via PathFactory for analytics purposes
- // --------------------------------------------------
- (function () {
- if (window.location !== window.parent.location) {
- document.body.classList.add("inside-iframe");
- }
- })();
-
-
// --------------------------------------------------
// Get meta key based on the OS
// --------------------------------------------------
@@ -120,6 +120,34 @@ window.addEventListener("DOMContentLoaded", (event) => {
})();
+ // --------------------------------------------------
+ // TOC
+ // --------------------------------------------------
+ (function () {
+ // Move the TOC to the right side of the page
+ const tocOriginalEl = document.getElementById("table-of-contents");
+ const tocTargetEl = document.getElementById("content-toc");
+ const tocAsideEL = document.querySelector(".content__toc");
+
+ if (tocOriginalEl) {
+ tocTargetEl.parentNode.replaceChild(tocOriginalEl, tocTargetEl);
+ }
+ else {
+ tocAsideEL.style.display = "none";
+ }
+
+
+ // Treat the TOC as a dropdown in mobile
+ const tocToggleEl = document.querySelector(".topic-title");
+ if(tocToggleEl) {
+ tocToggleEl.addEventListener("click", (event) => {
+ event.preventDefault();
+ tocMenuEl.closest(".content__toc").classList.toggle("active");
+ });
+ }
+ })();
+
+
// --------------------------------------------------
// Cookie banner
// --------------------------------------------------
@@ -211,6 +239,11 @@ window.addEventListener("DOMContentLoaded", (event) => {
function hideAside() {
document.querySelector(".aside-backdrop").remove();
document.documentElement.classList.remove("doc-active", "nav-active");
+
+ // Hide opened toc menu on mobile
+ if(tocMenuEl) {
+ tocMenuEl.closest(".content__toc").classList.remove("active");
+ }
}
asideToggleEls.forEach((item) => {
@@ -244,21 +277,6 @@ window.addEventListener("DOMContentLoaded", (event) => {
});
})();
-
- // --------------------------------------------------
- // TOC in mobile
- // --------------------------------------------------
- (function () {
- const tocToggleEl = document.querySelector(".content__toc__inner > h3 > a");
-
- if(tocToggleEl) {
- tocToggleEl.addEventListener("click", (event) => {
- event.preventDefault();
- tocMenuEl.closest(".content__toc").classList.toggle("active");
- });
- }
- })();
-
// --------------------------------------------------
// Icon switches
@@ -344,7 +362,7 @@ window.addEventListener("DOMContentLoaded", (event) => {
if(tableEls.length > 0) {
tableEls.forEach((item) => {
var tableWrapper = document.createElement("div");
- tableWrapper.classList.add("table-responsive");
+ tableWrapper.classList.add("table-responsive", "scrollbar");
item.insertAdjacentElement("beforebegin", tableWrapper);
tableWrapper.appendChild(item);
});
diff --git a/source/_static/scss/includes/_layout.scss b/source/_static/scss/includes/_layout.scss
index fd57632f..a8229122 100644
--- a/source/_static/scss/includes/_layout.scss
+++ b/source/_static/scss/includes/_layout.scss
@@ -7,22 +7,9 @@
.content__main {
flex: 1;
min-width: 0;
- align-self: flex-start;
padding: var(--content-padding);
}
-.sidebar-active {
- .content__main {
- padding-left: var(--content-padding);
- }
-}
-
-.content__right {
- position: sticky;
- top: 0;
- overflow: scroll;
-}
-
.container {
margin: 0 auto;
padding: 0 var(--content-padding);
diff --git a/source/_static/scss/includes/_misc.scss b/source/_static/scss/includes/_misc.scss
index 5113b51c..6a9d578c 100644
--- a/source/_static/scss/includes/_misc.scss
+++ b/source/_static/scss/includes/_misc.scss
@@ -16,6 +16,7 @@
&::-webkit-scrollbar {
width: 12px;
+ height: 12px;
}
&::-webkit-scrollbar-track {
diff --git a/source/_static/scss/includes/_reset.scss b/source/_static/scss/includes/_reset.scss
index cebc9824..91c7fc34 100644
--- a/source/_static/scss/includes/_reset.scss
+++ b/source/_static/scss/includes/_reset.scss
@@ -209,16 +209,32 @@ table.docutils {
.table-responsive {
- overflow-x: auto;
- -webkit-overflow-scrolling: touch;
margin: 1rem 0 2rem;
- border-left: 1px solid var(--table-border-color);
- border-right: 1px solid var(--table-border-color);
+ border: 1px solid var(--table-border-color);
+
+ &.scrollbar {
+ overflow-x: auto;
+ overflow-x: overlay;
+ -webkit-overflow-scrolling: touch;
+
+ }
table {
margin: 0;
tr {
+ &:first-child {
+ th {
+ border-top-color: transparent;
+ }
+ }
+
+ &:last-child {
+ td {
+ border-bottom-color: transparent;
+ }
+ }
+
td, th {
&:first-child {
border-left-color: transparent;
diff --git a/source/_static/scss/includes/_theme.scss b/source/_static/scss/includes/_theme.scss
index d8b3fb6a..2c42bfad 100644
--- a/source/_static/scss/includes/_theme.scss
+++ b/source/_static/scss/includes/_theme.scss
@@ -79,6 +79,7 @@ $theme-properties: (
// TOC
--toc-caret-icon: url("../img/icons/chevron-down.svg") url("../img/icons/chevron-down-dark.svg"),
+ --toc-dropdown-bg: $light-100 $dark-100,
// Mainmenu
--nav-bg: $white $dark-100,
diff --git a/source/_static/scss/includes/_toc.scss b/source/_static/scss/includes/_toc.scss
index 1649cdd1..8862765a 100644
--- a/source/_static/scss/includes/_toc.scss
+++ b/source/_static/scss/includes/_toc.scss
@@ -1,5 +1,5 @@
-#table-of-contents {
- display: none;
+div.topic {
+ all: revert;
}
.content__toc {
@@ -21,6 +21,7 @@
@include breakpoint-max(breakpoints(lg)) {
display: flex;
+ gap: 0.75rem;
align-items: center;
padding: var(--content-padding);
background-color: var(--body-bg);
@@ -28,20 +29,24 @@
}
.icon {
- height: 2.7rem;
- width: 2.7rem;
- padding: 0.75rem;
+ height: 2.5rem;
+ width: 2.5rem;
+ padding: 0.7rem;
border: 1px solid var(--theme-light-bg);
cursor: pointer;
+
+ &:last-child {
+ margin-left: auto;
+ }
}
&.active {
- & > .content__toc__inner {
- & > ul {
+ #table-of-contents {
+ & > ul {
display: block;
}
-
- h3 > a {
+
+ .topic-title {
border-radius: $border-radius $border-radius 0 0;
&:after {
@@ -52,63 +57,47 @@
}
}
-.content__toc__inner {
- @include breakpoint-max(breakpoints(lg)) {
- position: relative;
- display: flex;
- align-items: center;
- flex: 1;
- margin: 0 0.75rem;
+#table-of-contents {
+ flex: 1;
+ position: relative;
- & > h3 {
- flex: 1;
- }
- }
-
- h3 {
+ .topic-title {
+ color: var(--headings-color);
margin: 0;
line-height: 1;
- & > a {
- font-size: 1rem;
- color: var(--headings-color);
- font-size: 0;
+ @include breakpoint-max(breakpoints(lg)) {
+ padding: 0.85rem 1rem;
+ background-color: var(--theme-light-bg);
+ border-radius: $border-radius;
+ display: block;
+ position: relative;
+ font-size: $font-size-sm;
+ cursor: pointer;
- &:before {
- content: "Contents";
- font-size: 1rem;
- }
-
- @include breakpoint-max(breakpoints(lg)) {
- padding: 0.85rem;
- background-color: var(--theme-light-bg);
- border-radius: $border-radius;
- display: block;
- position: relative;
-
- &:after {
- content: "";
- height: 1rem;
- width: 1rem;
- position: absolute;
- right: 1.25rem;
- top: 0.9rem;
- background: var(--toc-caret-icon) no-repeat center;
- background-size: 1rem;
- transform-origin: center;
- }
+ &:after {
+ content: "";
+ height: 1rem;
+ width: 1rem;
+ position: absolute;
+ right: 1rem;
+ top: 0.8rem;
+ background: var(--toc-caret-icon) no-repeat center;
+ background-size: 0.8rem;
+ transform-origin: center;
}
}
}
ul {
- margin: 0;
- padding: 0;
list-style: none;
+ padding: 0;
+ margin: 0;
font-size: $font-size-sm;
+ color: var(--text-muted-color);
- ul ul {
- margin-left: 1rem;
+ ul {
+ margin-left: 0.75rem;
}
}
@@ -134,57 +123,26 @@
left: 0;
top: 100%;
width: 100%;
- background-color: var(--theme-light-bg);
+ background-color: var(--toc-dropdown-bg);
display: none;
border-radius: 0 0 $border-radius $border-radius;
z-index: 1;
- border-top: 1px solid var(--theme-light-hover-bg);
padding: 0.65rem 1rem 1rem;
max-height: 12rem;
overflow-y: auto;
}
- & > li {
- & > a {
- font-size: 0;
+ a {
+ display: block;
+ color: var(--text-muted-color);
+ padding: 0.15rem 0;
- &:before {
- content: "Introduction";
- font-size: $font-size-sm;
- transition: color 300ms;
- }
+ code {
+ display: none;
}
- a {
- display: block;
- color: var(--text-muted-color);
- code {
- display: none;
- }
-
- &:hover {
- color: var(--text-color);
- }
- }
-
- & > ul {
- & > li {
- a {
- transition: color 300ms;
- margin: 0.25rem 0;
- position: relative;
-
- &:before {
- content: "";
- width: 2px;
- height: calc(100% - 0.8rem);
- position: absolute;
- left: 0;
- top: 0.5rem;
-
- }
- }
- }
+ &:hover {
+ color: var(--text-color);
}
}
}
diff --git a/source/_templates/toc.html b/source/_templates/toc.html
index fd134cf7..482a8e72 100644
--- a/source/_templates/toc.html
+++ b/source/_templates/toc.html
@@ -4,11 +4,7 @@
TOC Menu
-
- {%- block sidebartoc %}
- {%- include "localtoc.html" %}
- {%- endblock %}
-
+