mediawiki-skins-Vector/includes/templates/PageTitlebar.mustache
bwang e1d1de809f Use JS to move the ToC into page title to fix a11y issues and simplify styles
- The collapsible ToC absolute positioning solution has been preserved to be used on no-js mobile resolutions
- The collapsible ToC grid based positioning solution has been removed
- ToC styles have been refactored and organzied

This patch involves HTML changes. In order to avoid additional complexity, this patch disables the collapsible ToC feature for users above the mobile viewport with cached HTML. The ToC continues to be automatically collapsed on mobile viewports for cached HTML users.

This patch results in 9 expected visual changes. In order to see them you need to take the following steps:
1. Run `./pixel.js reference`
2. Checkout the following PR in pixel https://github.com/wikimedia/pixel/pull/149
3. Run ./pixel.js test -c 859143
It should look like this: https://jmp.sh/ZVQqDZw7

Bug: T318013
Change-Id: Iea0d73005b91589c58ae38a3a640fa90c18a860d
2022-12-05 17:24:55 -06:00

41 lines
1.4 KiB
Plaintext

{{!-
Page titlebar - Main <H1> title for all pages, with either the indicators or language selector.
When language button is visible, indicators are placed in the BeforeContent.mustache template instead.
}}
<header class="mw-body-header vector-page-titlebar{{#is-title-blank}} vector-page-titlebar-blank{{/is-title-blank}}">
{{#data-toc}}
{{! Checkbox hack used by collapsed TOC on narrow viewports for no JS users }}
<label
id="vector-toc-collapsed-button"
class="mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-flush-left mw-ui-icon-element mw-ui-icon-wikimedia-listBullet mw-checkbox-hack-button"
for="vector-toc-collapsed-checkbox"
role="button"
aria-controls="toc-toggle-list"
data-event-name="vector.toc-toggle-list"
tabindex="0"
title="{{msg-vector-toc-menu-tooltip}}">
{{msg-vector-toc-collapsible-button-label}}
</label>
{{! TOC is moved into this dropdown from the sidebar in stickyHeader.js. }}
{{#data-page-titlebar-toc}}
{{>Dropdown/Open}}
{{>UnpinnedContainer/Open}}
{{>UnpinnedContainer/Close}}
{{>Dropdown/Close}}
{{/data-page-titlebar-toc}}
{{/data-toc}}
{{{html-title-heading}}}
{{#is-language-in-content-top}}
{{#data-lang-btn}}
{{>LanguageButton}}
{{/data-lang-btn}}
{{/is-language-in-content-top}}
{{^is-language-in-content-top}}
{{>Indicators}}
{{/is-language-in-content-top}}
</header>