wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-17 12:43:02 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-skins-Vector/includes/templates/Header.mustache

24 lines
705 B
Plaintext
Raw Normal View History

Switch to navigation-first DOM order under `$wgVectorIsSearchInHeader` feature flag This moves the header, navigation, sidebar, and article toolbar to be before the content in the DOM. As a result, a lot of absolute positioning logic can be removed and styles can be simplified. Note that although the sidebar was moved from the header into the workspace container allowing it to de-absolutely positioned, its absolute positioning was kept intact as it has a fair amount of complexity that should be handled in a separate task. To activate, set `$wgVectorIsSearchInHeader = true;` Changes that could cause concern: * The "jump to search" link was removed as the search is now much earlier in the DOM and I questioned the value of keeping this. However, it can be added back in if this change is contentious. * A "jump to content" link was added to account for the new DOM order. * Because the sidebar was taken out of the header, users will not be able to tab from the sidebar button into the sidebar without additional tweaking (e.g. should we add JS to enable this?). It was deemed that this work can be saved as a follow-up task. * I applied `overflow-y: auto` to the `mw-page-container` because the header's top margin was collapsing and caused whitespace to appear between the viewport and the header. Alternatively, we could apply a top padding to the page container and remove the header's top margin. I went for the simplest solution but am open to alternatives. * I left the footer as-is in this patch to minimize risk. It might be cleaner later on to move the footer inside the workspace container which would leave only one workspace container. Bug: T261802 Change-Id: Ic553fab3bde25769b103d899b92b3b694c00c384
2020-09-08 23:20:58 +00:00
<header class="mw-header">
<label
id="mw-sidebar-button"
class="mw-checkbox-hack-button mw-ui-icon mw-ui-icon-element"
for="mw-sidebar-checkbox"
role="button"
aria-controls="mw-panel"
data-event-name="ui.sidebar"
Add title attributes to menu icons on hover - Add title attribute to Header template for hamburger icon. - Override tooltip for user links menu icon for anon users. - Make sure tooltips are empty for legacy version. - Add translatable strings for new tooltip, title. Bug: T287494 Change-Id: I84ce6a1eb2a37eb9ea71a40c565c059d156a44ba
2021-08-25 15:24:58 +00:00
tabindex="0"
title="{{msg-vector-main-menu-tooltip}}">
Switch to navigation-first DOM order under `$wgVectorIsSearchInHeader` feature flag This moves the header, navigation, sidebar, and article toolbar to be before the content in the DOM. As a result, a lot of absolute positioning logic can be removed and styles can be simplified. Note that although the sidebar was moved from the header into the workspace container allowing it to de-absolutely positioned, its absolute positioning was kept intact as it has a fair amount of complexity that should be handled in a separate task. To activate, set `$wgVectorIsSearchInHeader = true;` Changes that could cause concern: * The "jump to search" link was removed as the search is now much earlier in the DOM and I questioned the value of keeping this. However, it can be added back in if this change is contentious. * A "jump to content" link was added to account for the new DOM order. * Because the sidebar was taken out of the header, users will not be able to tab from the sidebar button into the sidebar without additional tweaking (e.g. should we add JS to enable this?). It was deemed that this work can be saved as a follow-up task. * I applied `overflow-y: auto` to the `mw-page-container` because the header's top margin was collapsing and caused whitespace to appear between the viewport and the header. Alternatively, we could apply a top padding to the page container and remove the header's top margin. I went for the simplest solution but am open to alternatives. * I left the footer as-is in this patch to minimize risk. It might be cleaner later on to move the footer inside the workspace container which would leave only one workspace container. Bug: T261802 Change-Id: Ic553fab3bde25769b103d899b92b3b694c00c384
2020-09-08 23:20:58 +00:00
{{msg-vector-action-toggle-sidebar}}
</label>
{{>Logo}}
{{#data-search-box}}{{>SearchBox}}{{/data-search-box}}
Refactor: Clarify functions that return booleans and template booleans We prefix templates that are booleans with "is-" and tend to prefix functions that return booleans with "if" or "should" This renames the new "shouldConsolidateLinks" method. Follow up to I1c305d89bece147a6f1b478441119c3169abfbdd Change-Id: I6a5908b8b35ca6bceec8b864e3ac651fc7e8ced8
2021-05-06 22:54:55 +00:00
{{^is-consolidated-user-links}}
Remove UserMenu and use Menu template instead - Adds html-before-portlet to Menu.mustache - Removes UserMenu.mustache and type def - Factors out getCreateAccountHTML and getLoginHTML for generating HTML used in Menu - Scopes UserLink template data under "data-vector-user-links" Follow up to: 298f945983 Bug: T284584 Change-Id: I91104eb7c4fd12756e770561666f4c9a64da57d6
2021-06-03 21:37:01 +00:00
{{#data-portlets}}
{{#data-personal}}{{>Menu}}{{/data-personal}}
{{/data-portlets}}
Refactor: Clarify functions that return booleans and template booleans We prefix templates that are booleans with "is-" and tend to prefix functions that return booleans with "if" or "should" This renames the new "shouldConsolidateLinks" method. Follow up to I1c305d89bece147a6f1b478441119c3169abfbdd Change-Id: I6a5908b8b35ca6bceec8b864e3ac651fc7e8ced8
2021-05-06 22:54:55 +00:00
{{/is-consolidated-user-links}}
{{#is-consolidated-user-links}}
Remove UserMenu and use Menu template instead - Adds html-before-portlet to Menu.mustache - Removes UserMenu.mustache and type def - Factors out getCreateAccountHTML and getLoginHTML for generating HTML used in Menu - Scopes UserLink template data under "data-vector-user-links" Follow up to: 298f945983 Bug: T284584 Change-Id: I91104eb7c4fd12756e770561666f4c9a64da57d6
2021-06-03 21:37:01 +00:00
{{#data-vector-user-links}}{{>UserLinks}}{{/data-vector-user-links}}
Refactor: Clarify functions that return booleans and template booleans We prefix templates that are booleans with "is-" and tend to prefix functions that return booleans with "if" or "should" This renames the new "shouldConsolidateLinks" method. Follow up to I1c305d89bece147a6f1b478441119c3169abfbdd Change-Id: I6a5908b8b35ca6bceec8b864e3ac651fc7e8ced8
2021-05-06 22:54:55 +00:00
{{/is-consolidated-user-links}}
Switch to navigation-first DOM order under `$wgVectorIsSearchInHeader` feature flag This moves the header, navigation, sidebar, and article toolbar to be before the content in the DOM. As a result, a lot of absolute positioning logic can be removed and styles can be simplified. Note that although the sidebar was moved from the header into the workspace container allowing it to de-absolutely positioned, its absolute positioning was kept intact as it has a fair amount of complexity that should be handled in a separate task. To activate, set `$wgVectorIsSearchInHeader = true;` Changes that could cause concern: * The "jump to search" link was removed as the search is now much earlier in the DOM and I questioned the value of keeping this. However, it can be added back in if this change is contentious. * A "jump to content" link was added to account for the new DOM order. * Because the sidebar was taken out of the header, users will not be able to tab from the sidebar button into the sidebar without additional tweaking (e.g. should we add JS to enable this?). It was deemed that this work can be saved as a follow-up task. * I applied `overflow-y: auto` to the `mw-page-container` because the header's top margin was collapsing and caused whitespace to appear between the viewport and the header. Alternatively, we could apply a top padding to the page container and remove the header's top margin. I went for the simplest solution but am open to alternatives. * I left the footer as-is in this patch to minimize risk. It might be cleaner later on to move the footer inside the workspace container which would leave only one workspace container. Bug: T261802 Change-Id: Ic553fab3bde25769b103d899b92b3b694c00c384
2020-09-08 23:20:58 +00:00
</header>
Reference in a new issue Copy permalink