78787d9665
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
100 lines
3.5 KiB
Plaintext
100 lines
3.5 KiB
Plaintext
{{!
|
|
string|null html-site-notice the contents of a banner defined in MediaWiki:Sitenotice.
|
|
Also used by CentralNotice to inject banners into Vector.
|
|
Indicator[] array-indicators wiki-defined badges such as "good article",
|
|
"featured article". An empty array if none are defined.
|
|
string page-langcode the content language of the article. Assumed to be escaped HTML.
|
|
string html-title
|
|
bool page-isarticle
|
|
string msg-tagline
|
|
string html-subtitle
|
|
string html-undelete-link
|
|
string html-newtalk
|
|
string msg-vector-jumptonavigation
|
|
string msg-vector-jumptosearch
|
|
string msg-vector-jumptocontent
|
|
string html-body-content
|
|
string html-categories
|
|
string html-after-content
|
|
string msg-navigation-heading
|
|
LogoOptions data-logos
|
|
MenuDefinition data-personal-menu
|
|
MenuDefinition data-namespace-tabs
|
|
MenuDefinition data-variants
|
|
MenuDefinition data-page-actions
|
|
MenuDefinition data-page-actions-more
|
|
object data-search-box. See SearchBox.mustache for documentation.
|
|
boolean sidebar-visible For users that want to see the sidebar on initial render, this should be
|
|
true.
|
|
string msg-vector-action-toggle-sidebar The label used by the sidebar button.
|
|
object data-sidebar. See Sidebar.mustache for documentation.
|
|
object data-footer for footer template partial. see Footer.mustache for documentation.
|
|
}}
|
|
<div class="mw-page-container">
|
|
{{#is-search-in-header}}
|
|
<a class="mw-jump-link" href="#content">{{msg-vector-jumptocontent}}</a>
|
|
{{/is-search-in-header}}
|
|
<div class="mw-page-container-inner">
|
|
|
|
{{^is-search-in-header}}
|
|
<div id="mw-page-base" class="mw-header-placeholder noprint"></div>
|
|
{{/is-search-in-header}}
|
|
|
|
<input
|
|
type="checkbox"
|
|
id="mw-sidebar-checkbox"
|
|
class="mw-checkbox-hack-checkbox"
|
|
{{#sidebar-visible}}checked{{/sidebar-visible}}>
|
|
|
|
{{#is-search-in-header}}
|
|
{{>Header}}
|
|
{{/is-search-in-header}}
|
|
|
|
<div class="mw-workspace-container">
|
|
{{#is-search-in-header}}
|
|
{{#data-sidebar}}{{>Sidebar}}{{/data-sidebar}}
|
|
{{>Navigation}}
|
|
{{/is-search-in-header}}
|
|
<div class="mw-content-container">
|
|
{{! `role` is unnecessary but kept to support selectors in any gadgets or user styles. }}
|
|
<!-- Please do not use role attribute as CSS selector, it is deprecated. -->
|
|
<main id="content" class="mw-body" role="main">
|
|
<a id="top"></a>
|
|
<div id="siteNotice" class="mw-body-content">{{{html-site-notice}}}</div>
|
|
{{>Indicators}}
|
|
<h1 id="firstHeading" class="firstHeading" lang="{{page-langcode}}">{{{html-title}}}</h1>
|
|
<div id="bodyContent" class="mw-body-content">
|
|
{{#page-isarticle}}<div id="siteSub" class="noprint">{{msg-tagline}}</div>{{/page-isarticle}}
|
|
<div id="contentSub"{{{html-user-language-attributes}}}>{{{html-subtitle}}}</div>
|
|
<div id="contentSub2">{{{html-undelete-link}}}</div>
|
|
{{{html-newtalk}}}
|
|
{{!
|
|
Keep this empty `div` for compatibility with gadgets and user scripts
|
|
using this place to insert extra elements before.
|
|
}}
|
|
<div id="jump-to-nav"></div>
|
|
{{^is-search-in-header}}
|
|
<a class="mw-jump-link" href="#mw-sidebar-button">{{msg-vector-jumptonavigation}}</a>
|
|
<a class="mw-jump-link" href="#searchInput">{{msg-vector-jumptosearch}}</a>
|
|
{{/is-search-in-header}}
|
|
{{{html-body-content}}}
|
|
{{{html-categories}}}
|
|
</div>
|
|
</main>
|
|
{{{html-after-content}}}
|
|
</div> {{! END mw-content-container }}
|
|
</div> {{! END mw-workspace-container }}
|
|
|
|
{{^is-search-in-header}}
|
|
{{>Header}}
|
|
{{>Navigation}}
|
|
{{/is-search-in-header}}
|
|
|
|
<div class="mw-workspace-container mw-footer-container">
|
|
<div class="mw-content-container">
|
|
{{#data-footer}}{{>Footer}}{{/data-footer}}
|
|
</div>
|
|
</div>
|
|
</div> {{! END mw-page-container-inner }}
|
|
</div> {{! END mw-page-container }}
|