Header}}
-{{#is-vector-table-of-contents-visible}}{{>TableOfContents}}{{/is-vector-table-of-contents-visible}}
-
{{>Navigation}}
+ {{#is-vector-table-of-contents-visible}}
+ {{>TableOfContents}}
+ {{/is-vector-table-of-contents-visible}}
{{! `role` is unnecessary but kept to support selectors in any gadgets or user styles. }}
diff --git a/resources/skins.vector.styles/components/Sidebar.less b/resources/skins.vector.styles/components/Sidebar.less
index 81bb5e10..8211fcf5 100644
--- a/resources/skins.vector.styles/components/Sidebar.less
+++ b/resources/skins.vector.styles/components/Sidebar.less
@@ -100,3 +100,10 @@
);
}
}
+
+// Update article page's content container when table of contents is enabled
+.vector-toc-enabled #mw-panel {
+ width: @margin-toc-start-content;
+ background-color: @background-color-base;
+ background-image: none;
+}
diff --git a/resources/skins.vector.styles/components/TableOfContents.less b/resources/skins.vector.styles/components/TableOfContents.less
new file mode 100644
index 00000000..65687bc8
--- /dev/null
+++ b/resources/skins.vector.styles/components/TableOfContents.less
@@ -0,0 +1,65 @@
+@import '../../common/variables.less';
+
+@subcategory-indent: 8px;
+
+.sidebar-toc {
+ width: 200px;
+ max-height: 90vh;
+ overflow: auto;
+ padding: 12px;
+ float: left;
+ position: sticky;
+ top: calc( @height-sticky-header + 1.5em );
+ background-color: @background-color-base;
+ border: @border-base;
+ border-radius: @border-radius-base;
+
+ .sidebar-toc-header {
+ padding-bottom: 12px;
+ }
+
+ .sidebar-toc-title {
+ font-weight: bold;
+ font-size: @font-size-heading-3;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ }
+
+ .sidebar-toc-numb {
+ display: none;
+ }
+
+ .sidebar-toc-text {
+ padding-bottom: 5px;
+ }
+
+ ul {
+ margin: 0;
+ list-style: none;
+ line-height: 18px;
+
+ li {
+ list-style-type: none;
+ padding-left: @subcategory-indent;
+
+ a {
+ color: @color-base;
+ font-size: @font-size-base;
+ }
+
+ &.sidebar-toc-level-1 {
+ padding-left: 0;
+
+ > a {
+ color: @color-link;
+ }
+ }
+ }
+ }
+}
+
+// Hide TOC when sidebar is open
+.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .sidebar-toc {
+ display: none;
+}
diff --git a/resources/skins.vector.styles/layouts/screen.less b/resources/skins.vector.styles/layouts/screen.less
index 92fed216..04a232dc 100644
--- a/resources/skins.vector.styles/layouts/screen.less
+++ b/resources/skins.vector.styles/layouts/screen.less
@@ -39,6 +39,8 @@
// content container for aesthetic reasons. The sidebar is already displaced
// -30px so we simply add 30px of space to the width of the sidebar.
@margin-start-content: @width-grid-column-one + unit( 8px / @font-size-browser, em ); // 11.5em @ 16
+// Ensure there's enough space between the TOC and content container
+@margin-toc-start-content: 16em;
// Tabs
@@ -231,6 +233,7 @@ body {
}
.mw-content-container {
+ display: flow-root;
max-width: @max-width-content-container;
margin-left: auto;
margin-right: auto;
@@ -283,6 +286,13 @@ body {
}
}
+// Increase margin when TOC is enabled
+.vector-toc-enabled .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container {
+ .skin-vector-disable-max-width & {
+ margin-left: @margin-toc-start-content;
+ }
+}
+
@media ( max-width: @max-width-margin-start-content ) {
// Adjusts the content and mw-article-toolbar-container.
.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container,
@@ -290,6 +300,12 @@ body {
margin-left: @margin-start-content;
}
+ // Increase margin when TOC is enabled
+ .vector-toc-enabled .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container,
+ .vector-toc-enabled .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-article-toolbar-container {
+ margin-left: @margin-toc-start-content;
+ }
+
// Specificity needed to disable the default animations at lower resolutions.
.vector-animations-ready .mw-sidebar {
// Remove sidebar transition at smaller widths.
@@ -297,6 +313,21 @@ body {
}
}
+// Update article page's content container when
+// TOC is visible and when TOC is enabled and the sidebar is open
+.vector-toc-visible .mw-workspace-container .mw-content-container,
+.vector-toc-visible .mw-workspace-container .mw-article-toolbar-container,
+.vector-toc-enabled .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container,
+.vector-toc-enabled .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-article-toolbar-container {
+ // Use !important to override checkbox status dependent styles applied above
+ margin-left: @margin-toc-start-content !important; /* stylelint-disable-line declaration-no-important */
+}
+
+// Prevent center align when TOC is visible
+.vector-toc-visible .mw-workspace-container {
+ margin-left: initial;
+}
+
@media ( min-width: ( @max-width-workspace-container + ( 2 * @padding-horizontal-page-container ) ) ) {
#mw-panel {
background: @background-color-page-container;
diff --git a/resources/skins.vector.styles/skin.less b/resources/skins.vector.styles/skin.less
index 4d51e9e0..f2e2141f 100644
--- a/resources/skins.vector.styles/skin.less
+++ b/resources/skins.vector.styles/skin.less
@@ -18,6 +18,7 @@
@import './components/UserLinks.less';
@import './components/Header.less';
@import './components/StickyHeader.less';
+ @import './components/TableOfContents.less';
}
@media all {