mediawiki-skins-Vector/includes/templates/PageTitlebar.mustache

{{!-
	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}}
	{{! TOC is moved into this dropdown from the sidebar in stickyHeader.js. }}
	<nav 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>
[HTML] Refactor Content header templates Creates two new templates: - ContentHeader.mustache containing the site header and indicators or languages - ContentSubheader.mustache containing site tagline and conditionally indicators This changes DOM order. - It adds the `<header class="mw-body-header">` to all pages, including special pages & edit pages, not just pages with the language button. - It moves the #siteSub element (tagline) outside of the `<div id="bodyContent">` element. - Adds a clearfix (or margin-collapse fix) to `.vector-body`. This changes causes a minor difference (perhaps improvement) where on special pages, the beginning of the content, starting with the `mw-specialpage-summary` element, was positioned closer to the page title than on regular pages. The clearfix ensures that the height between the page title and content is consistent across all pages. Bug: T303549 Change-Id: I29ba337dbd6f9b0cf58c9a0ca517a9ba59cef414 2022-05-05 16:49:19 +00:00			`{{!-`
Remove unecessary whitespace and new lines from HTML Change-Id: I8fe04d458da292e2990543afa232a91b6dd4db59 2023-07-05 17:19:37 +00:00			`Page titlebar - Main h1 title for all pages, with either the indicators or language selector.`
Use tabs consistently in .mustache files Change-Id: I3874b8a03f8a512a4d31f4c85a030de63cbc3c69 2023-01-12 11:19:26 +00:00			`When language button is visible, indicators are placed in the BeforeContent.mustache template instead.`
[HTML] Refactor Content header templates Creates two new templates: - ContentHeader.mustache containing the site header and indicators or languages - ContentSubheader.mustache containing site tagline and conditionally indicators This changes DOM order. - It adds the `<header class="mw-body-header">` to all pages, including special pages & edit pages, not just pages with the language button. - It moves the #siteSub element (tagline) outside of the `<div id="bodyContent">` element. - Adds a clearfix (or margin-collapse fix) to `.vector-body`. This changes causes a minor difference (perhaps improvement) where on special pages, the beginning of the content, starting with the `mw-specialpage-summary` element, was positioned closer to the page title than on regular pages. The clearfix ensures that the height between the page title and content is consistent across all pages. Bug: T303549 Change-Id: I29ba337dbd6f9b0cf58c9a0ca517a9ba59cef414 2022-05-05 16:49:19 +00:00			`}}`
Fix border when title is hidden and when toolbar is empty Bug: T317930 Change-Id: Iba89a2e642a8377c3603d099fb1157fc2df465d0 2022-09-19 18:26:12 +00:00			`<header class="mw-body-header vector-page-titlebar{{#is-title-blank}} vector-page-titlebar-blank{{/is-title-blank}}">`
Only render TOC related HTML when TOC is available Bug: T328719 Change-Id: I3484a790ce8ebadf21054ac1d222d5632b2dc5a4 2023-02-27 21:58:49 +00:00			`{{#data-toc}}`
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-11-21 22:16:07 +00:00			`{{! TOC is moved into this dropdown from the sidebar in stickyHeader.js. }}`
remove redundant HTML roles Fixes 9 warnings generated by https://validator.w3.org/nu/ - The navigation role is unnecessary for element nav. - The main role is unnecessary for element main. - The contentinfo role is unnecessary for element footer. Bug: T365938 Change-Id: Ibdbe70900f9a85d904252ad8ac26e4bb6e813a1c 2024-05-28 14:18:29 +00:00			`<nav aria-label="{{ msg-vector-toc-label }}" class="vector-toc-landmark">`
Ensure ToC is always accessible via landmark region (<nav>) - We had to add nav element to wrap TOC in all places - Make sure proper nav is only displayed so landmark do not get confused - Remove Eslint block on rules compat/compat for no support IE 11, this was blocking commit - Run lint:fix:js and lint:fix:styles - Fix maxSize in bundlesize.config.json Bug: T324505 Change-Id: I36d26240b87de33318ff1edf97a410872a438103 2023-02-21 21:19:52 +00:00			`{{#data-page-titlebar-toc-dropdown}}{{>Dropdown/Open}}{{/data-page-titlebar-toc-dropdown}}`
			`{{#data-page-titlebar-toc-pinnable-container}}`
			`{{>PinnableContainer/Unpinned/Open}}`
[WIP] Removes the TOC class in body and adds in html Adds new constants for TOC and registers feature. Bug: T325032 Change-Id: I5e0f5f3a6d186b245bdbc98c2bb9e4cc17a03fdb 2023-02-23 21:23:46 +00:00			`{{^is-pinned}}`
			`{{#data-toc}}{{>TableOfContents}}{{/data-toc}}`
			`{{/is-pinned}}`
Ensure ToC is always accessible via landmark region (<nav>) - We had to add nav element to wrap TOC in all places - Make sure proper nav is only displayed so landmark do not get confused - Remove Eslint block on rules compat/compat for no support IE 11, this was blocking commit - Run lint:fix:js and lint:fix:styles - Fix maxSize in bundlesize.config.json Bug: T324505 Change-Id: I36d26240b87de33318ff1edf97a410872a438103 2023-02-21 21:19:52 +00:00			`{{>PinnableContainer/Close}}`
			`{{/data-page-titlebar-toc-pinnable-container}}`
			`{{#data-page-titlebar-toc-dropdown}}{{>Dropdown/Close}}{{/data-page-titlebar-toc-dropdown}}`
			`</nav>`
Only render TOC related HTML when TOC is available Bug: T328719 Change-Id: I3484a790ce8ebadf21054ac1d222d5632b2dc5a4 2023-02-27 21:58:49 +00:00			`{{/data-toc}}`
Use tabs consistently in .mustache files Change-Id: I3874b8a03f8a512a4d31f4c85a030de63cbc3c69 2023-01-12 11:19:26 +00:00			`{{{html-title-heading}}}`
Promote "Add topic" button to PageTitlebar Bug: T267444 Change-Id: I813908d65640566a61eac51d6f55a3b4d3e9537d 2023-01-30 14:55:10 +00:00			`{{#has-buttons-in-content-top}}`
Update instances of Button.mustache to use to use VectorComponentButton Bug: T334881 Change-Id: Iec3fc67c498d230ae7c0dc0ba4316006ccd9626a 2023-04-25 16:53:19 +00:00			`{{#data-lang-dropdown}}`
Use tabs consistently in .mustache files Change-Id: I3874b8a03f8a512a4d31f4c85a030de63cbc3c69 2023-01-12 11:19:26 +00:00			`{{>LanguageDropdown}}`
Update instances of Button.mustache to use to use VectorComponentButton Bug: T334881 Change-Id: Iec3fc67c498d230ae7c0dc0ba4316006ccd9626a 2023-04-25 16:53:19 +00:00			`{{/data-lang-dropdown}}`
Switch order of "Add topic" and language dropdown Bug: T267444 Change-Id: I09ed155b43665dd13c258e37870778a3c7ce446d 2023-03-06 18:29:26 +00:00			`{{#data-add-topic-button}}`
Update instances of Button.mustache to use to use VectorComponentButton Bug: T334881 Change-Id: Iec3fc67c498d230ae7c0dc0ba4316006ccd9626a 2023-04-25 16:53:19 +00:00			`{{>Button}}`
Switch order of "Add topic" and language dropdown Bug: T267444 Change-Id: I09ed155b43665dd13c258e37870778a3c7ce446d 2023-03-06 18:29:26 +00:00			`{{/data-add-topic-button}}`
Promote "Add topic" button to PageTitlebar Bug: T267444 Change-Id: I813908d65640566a61eac51d6f55a3b4d3e9537d 2023-01-30 14:55:10 +00:00			`{{/has-buttons-in-content-top}}`
			`{{^has-buttons-in-content-top}}`
Use tabs consistently in .mustache files Change-Id: I3874b8a03f8a512a4d31f4c85a030de63cbc3c69 2023-01-12 11:19:26 +00:00			`{{>Indicators}}`
Promote "Add topic" button to PageTitlebar Bug: T267444 Change-Id: I813908d65640566a61eac51d6f55a3b4d3e9537d 2023-01-30 14:55:10 +00:00			`{{/has-buttons-in-content-top}}`
Collapse ToC into page title at narrow view ports with CSS/template changes only Bug: T307900 Change-Id: I72607ec9d8b46401468de5815cf47dac9f4612a5 2022-06-08 15:03:38 +00:00			`</header>`