wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-12-01 18:57:04 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-skins-Vector/includes/templates/PageTitlebar.mustache

41 lines
1.4 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
{{!-
Replace incorrectly mw- prefixed classes Rename template and CSS files to match updated naming conventions, replaces instances of "sidebar" with "main menu" Bug: T316570 Bug: T317437 Change-Id: Ib4050768f20b1734d356104f18aa539f657099d8
2022-10-17 20:09:53 +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}}">
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
{{#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
{{! 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. }}
{{#data-page-titlebar-toc}}
{{>Dropdown/Open}}
Templates: Reorganize pinned containers The UnpinnedContainer and PinnedContainer are versions of the same component but with different states. Recognize them by organizing them in the same subfolder. Update all existing usages. Bug: T317900 Change-Id: I2c25937190997764fa23e0b581be5538ba4d06de
2022-12-09 23:32:43 +00:00
{{>PinnableContainer/Unpinned/Open}}
{{>PinnableContainer/Close}}
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
{{>Dropdown/Close}}
{{/data-page-titlebar-toc}}
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
{{/data-toc}}
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
[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
{{{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}}
[Technical] Prepare for template rename The user links and language button are SkinVector22 features but they are buried inside SkinVector. When we rename the templates this code will become problematic as SkinVector22 requires these modifications Bug: T319349 Change-Id: Id5e5b97af0ea020ef20565a7e1acc685d7be0892
2022-10-27 23:46:19 +00:00
{{#data-lang-btn}}
Fix language button fallback * Don't hide language button This code can be removed now T287206 is resolved. Also simplify legacy logic - as the language menu is always a portlet there. Additional changes: * Create LanguageButtonDropdown component to distinguish this code from the LanguageButton in the sticky header. * Fixes a style in LanguageButtonDropdown.less which wasn't accounting for multiple vector-menu-content classes Bug: T320927 Bug: T325017 Change-Id: Ic331684c384c5d57b60b098f23485e44fb75fb8f
2022-12-16 18:03:07 +00:00
{{>LanguageDropdown}}
[Technical] Prepare for template rename The user links and language button are SkinVector22 features but they are buried inside SkinVector. When we rename the templates this code will become problematic as SkinVector22 requires these modifications Bug: T319349 Change-Id: Id5e5b97af0ea020ef20565a7e1acc685d7be0892
2022-10-27 23:46:19 +00:00
{{/data-lang-btn}}
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}}
{{^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