mediawiki-skins-Vector/includes/templates/PageTitlebar.mustache
Jon Robson 68239ae344 Use Codex for button styles, start transitioning icons to use Codex icon mixins
Changes:
- mw-ui-button to cdx-button
- mw-ui-quiet to cdx-button--weight-quiet
- mw-ui-icon-element to cdx-button--icon-only
- mw-ui-icon to vector-icon
- mw-ui-icon-flush-right/left to vector-button-flush-right/left
- Removes $isSmallIcon param in Hooks.php

85 Visual Changes
- ~36 changes from minor pixel changes from the new button classes in the main menu, language button
- 22 from standardizing the padding of the TOC in page title
- ~10 changes from addition of .cdx-button to the TOC toggle buttons

PERFORMANCE:
This will result in an overall increase of 2.7kb of render blocking
CSS, 1kb will be reclaimed when
I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d is merged.

Co-author: Bernard Wang <bwang@wikimedia.org>
Bug: T336526
Change-Id: Ibd558238a41a0d3edb981e441638f9564f43d226
2023-06-12 16:26:28 -07:00

48 lines
1.8 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="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet vector-button-flush-left cdx-button--icon-only"
for="vector-toc-collapsed-checkbox"
role="button"
aria-controls="vector-toc"
tabindex="0"
title="{{msg-vector-toc-menu-tooltip}}">
<span class="vector-icon mw-ui-icon-wikimedia-listBullet"></span>
<span>{{msg-vector-toc-collapsible-button-label}}</span>
</label>
{{! TOC is moved into this dropdown from the sidebar in stickyHeader.js. }}
<nav role="navigation" aria-label="{{ msg-vector-toc-label }}" class="vector-toc-landmark">
{{#data-page-titlebar-toc-dropdown}}{{>Dropdown/Open}}{{/data-page-titlebar-toc-dropdown}}
{{#data-page-titlebar-toc-pinnable-container}}
{{>PinnableContainer/Unpinned/Open}}
{{^is-pinned}}
{{#data-toc}}{{>TableOfContents}}{{/data-toc}}
{{/is-pinned}}
{{>PinnableContainer/Close}}
{{/data-page-titlebar-toc-pinnable-container}}
{{#data-page-titlebar-toc-dropdown}}{{>Dropdown/Close}}{{/data-page-titlebar-toc-dropdown}}
</nav>
{{/data-toc}}
{{{html-title-heading}}}
{{#has-buttons-in-content-top}}
{{#data-lang-dropdown}}
{{>LanguageDropdown}}
{{/data-lang-dropdown}}
{{#data-add-topic-button}}
{{>Button}}
{{/data-add-topic-button}}
{{/has-buttons-in-content-top}}
{{^has-buttons-in-content-top}}
{{>Indicators}}
{{/has-buttons-in-content-top}}
</header>