wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-25 16:15:28 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-skins-Vector/includes/templates/PageTitlebar.mustache

40 lines
1.6 KiB
Plaintext
Raw Normal View History

[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
{{!-
Use tabs consistently in .mustache files Change-Id: I3874b8a03f8a512a4d31f4c85a030de63cbc3c69
2023-01-12 11:19:26 +00:00
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.
[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}}">
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
{{! Checkbox hack used by collapsed TOC on narrow viewports for no JS users }}
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
<label
id="vector-toc-collapsed-button"
Use standard utility classes for flushing icons left and right Restricted to the feature flag (?vectorvisualenhancementnext=1) for now to allow us to not worry about caching. mw-ui-icon-flush-left and mw-ui-icon-flush-right have been in core for some time and using them means we don't have to manage hardcoded values for these. We'll need to think of .mixin-vector-flush-left-left and .mixin-vector-flush-right-margin-left separately - I wonder if these could be revised to use these 2 standard classes. Additional changes: - Drop unused mixin-vector-flush-right-margin-left mixin Bug: T321504 Bug: T317583 Change-Id: I51f8e31be6771a3fb32fb07dc22d0c2872b5706d
2022-10-26 17:01:12 +00:00
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"
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
for="vector-toc-collapsed-checkbox"
role="button"
aria-controls="toc-toggle-list"
data-event-name="vector.toc-toggle-list"
tabindex="0"
Cached CSS is no longer a problem The !important is retained for cached HTML and will be retained for another release cycle Cached HTML will continue to be a problem until next deploy. The CSS cleanup will thus be fixed in a follow up (I47b7a0bc9c5dad5451f1dbb5e32e513643a1534b) Bug: T307900 Change-Id: I47b7a0bc9c5dad5451f1dbb5e32e513643a1534b
2022-06-10 21:13:30 +00:00
title="{{msg-vector-toc-menu-tooltip}}">
Add text to TOC collapsible button label for accessibility. - Provide message translations. - Include other TOC message that was missing. Bug: T310810 Change-Id: Ibd612b48ea3ef3f9f31f4bb5791c0cb82e447ece
2022-07-21 22:21:53 +00:00
{{msg-vector-toc-collapsible-button-label}}
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
</label>
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. }}
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
<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}}
{{>PinnableContainer/Close}}
{{/data-page-titlebar-toc-pinnable-container}}
{{#data-page-titlebar-toc-dropdown}}{{>Dropdown/Close}}{{/data-page-titlebar-toc-dropdown}}
</nav>
Use tabs consistently in .mustache files Change-Id: I3874b8a03f8a512a4d31f4c85a030de63cbc3c69
2023-01-12 11:19:26 +00:00
{{{html-title-heading}}}
Correct ContentHeader source order to match design - Use flexbox instead of float Visual changes: - The title wraps differently when the title is very long Bug: T313947 Change-Id: I2915e36286b21c8fd1a07247ada7754a08a0b574
2022-07-25 20:41:39 +00:00
{{#is-language-in-content-top}}
Use tabs consistently in .mustache files Change-Id: I3874b8a03f8a512a4d31f4c85a030de63cbc3c69
2023-01-12 11:19:26 +00:00
{{#data-lang-btn}}
{{>LanguageDropdown}}
{{/data-lang-btn}}
{{/is-language-in-content-top}}
Correct ContentHeader source order to match design - Use flexbox instead of float Visual changes: - The title wraps differently when the title is very long Bug: T313947 Change-Id: I2915e36286b21c8fd1a07247ada7754a08a0b574
2022-07-25 20:41:39 +00:00
Use tabs consistently in .mustache files Change-Id: I3874b8a03f8a512a4d31f4c85a030de63cbc3c69
2023-01-12 11:19:26 +00:00
{{^is-language-in-content-top}}
{{>Indicators}}
{{/is-language-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>
Reference in a new issue Copy permalink