Remove TableOfContents mustache template and mark layout rules

Follow up to I3484a790ce8ebadf21054ac1d222d5632b2dc5a4

__Template__

The template is not particularly useful - it is only ever
used once in this context and features a static ID which means
it can never be reused. It is also tied to the #vector-toc-collapsed-checkbox
element. In current form it doesn't make sense to have this template.

Maybe in future, I could see an argument for a PinnableTableOfContents component
that wrapped the checkbox and nav element, and generalized the IDs but
currently there's no pressing need or value for that.

__Layouts__

The existing Pinned and Unpinned stylesheets are concerned with how the table
of contents is layed out holistically with regards to other components and
features enabled on the page. I think these should therefore be organized as such.
The way I reason with this, is these styles would be irrelevant in a component
library if the component was rendered in isolation.

Bug: T328719
Change-Id: I9ff0e0eeb35f215a8cae5950d08dc1277b662a71
This commit is contained in:
Jon Robson 2023-02-27 16:09:27 -08:00 committed by Jdlrobson
parent 392a2f0e97
commit d4903b8e57
6 changed files with 19 additions and 20 deletions

View file

@ -1,12 +0,0 @@
{{#data-toc}}
<nav id="mw-panel-toc" role="navigation" aria-label="{{ msg-vector-toc-label }}" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark">
{{! T313060 Additional container div needed to prevent the sticky element from being siblings with the footer }}
{{#data-toc-pinnable-container}}
{{>PinnableContainer/Pinned/Open}}
{{#is-pinned}}
{{#data-toc}}{{>TableOfContents}}{{/data-toc}}
{{/is-pinned}}
{{>PinnableContainer/Close}}
{{/data-toc-pinnable-container}}
</nav>
{{/data-toc}}

View file

@ -43,8 +43,19 @@
<div class="vector-sitenotice-container">
<div id="siteNotice">{{{html-site-notice}}}</div>
</div>
{{#data-toc}}<input type="checkbox" id="vector-toc-collapsed-checkbox" class="mw-checkbox-hack-checkbox">{{/data-toc}}
{{>TableOfContentsPinned}}
{{#data-toc}}
<input type="checkbox" id="vector-toc-collapsed-checkbox" class="mw-checkbox-hack-checkbox">
<nav id="mw-panel-toc" role="navigation" aria-label="{{ msg-vector-toc-label }}" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark">
{{! T313060 Additional container div needed to prevent the sticky element from being siblings with the footer }}
{{#data-toc-pinnable-container}}
{{>PinnableContainer/Pinned/Open}}
{{#is-pinned}}
{{#data-toc}}{{>TableOfContents}}{{/data-toc}}
{{/is-pinned}}
{{>PinnableContainer/Close}}
{{/data-toc-pinnable-container}}
</nav>
{{/data-toc}}
<div class="mw-content-container">
{{! `role` is unnecessary but kept to support selectors in any gadgets or user styles. }}
<main id="content" class="mw-body" role="main">

View file

@ -150,3 +150,5 @@ body {
}
@import 'grid.less';
@import 'toc/pinned.less';
@import 'toc/unpinned.less';

View file

@ -1,5 +1,5 @@
@import '../../common/variables.less';
@import '../../common/mixins.less';
@import '../../../common/variables.less';
@import '../../../common/mixins.less';
.mw-table-of-contents-container {
// Needed for Grid-based layout

View file

@ -1,5 +1,5 @@
@import '../../common/variables.less';
@import '../../common/mixins.less';
@import '../../../common/variables.less';
@import '../../../common/mixins.less';
@selector-nojs-collapsed-toc-open: ~'#vector-toc-collapsed-checkbox:checked';

View file

@ -30,8 +30,6 @@
@import './components/StickyHeader.less';
@import './components/TabWatchstarLink.less';
@import './components/TableOfContents.less';
@import './components/TableOfContentsPinned.less';
@import './components/TableOfContentsUnpinned.less';
@import './components/Icon.less';
.vector-feature-page-tools-disabled {