mediawiki-skins-Vector/includes/templates/skin.mustache
jdlrobson 53d9452795 Move the personal tools and search into header
To support roll out and avoid issues with cached HTML the new
styles for the new search feature are restricted to HTML where
the body tag has `skin-vector-search-header` class.

For legacy mode, we introduce a new class
`skin-vector-search-header-legacy` and temporarily use a CSS3 `:not()`
selector to ensure the styles ship during the phase where cached
HTML can be served. While this will create some display issues in
browsers that do not support CSS3 selectors, all grade A browsers in
our compatability matrix support this.

Bug: T249363
Change-Id: I7f8059d43eaab49de362405784b34a4fe502c7b0
2020-08-11 23:36:01 +00:00

123 lines
4.4 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 html-body-content
string html-categories
string html-after-content
string html-navigation-heading heading for entire navigation that is usually hidden to screen
readers
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">
<div class="mw-page-container-inner">
<div id="mw-page-base" class="mw-header-placeholder noprint"></div>
<input
type="checkbox"
id="mw-sidebar-checkbox"
class="mw-checkbox-hack-checkbox"
{{#sidebar-visible}}checked{{/sidebar-visible}}>
<div class="mw-workspace-container">
<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>
<a class="mw-jump-link" href="#mw-sidebar-button">{{msg-vector-jumptonavigation}}</a>
<a class="mw-jump-link" href="#searchInput">{{msg-vector-jumptosearch}}</a>
{{{html-body-content}}}
{{{html-categories}}}
</div>
</main>
{{{html-after-content}}}
</div> {{! END mw-content-container }}
</div> {{! END mw-workspace-container }}
<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"
tabindex="0">
{{msg-vector-action-toggle-sidebar}}
</label>
<div class="mw-workspace-container mw-sidebar-container">
{{#data-sidebar}}{{>Sidebar}}{{/data-sidebar}}
</div>
{{>Logo}}
{{#is-search-in-header}}
{{#data-search-box}}{{>SearchBox}}{{/data-search-box}}
{{#data-personal-menu}}{{>Menu}}{{/data-personal-menu}}
{{/is-search-in-header}}
</header>
<div id="mw-navigation">
<h2>{{{html-navigation-heading}}}</h2>
<div id="mw-head">
{{^is-search-in-header}}
{{#data-personal-menu}}{{>Menu}}{{/data-personal-menu}}
{{/is-search-in-header}}
<div class="mw-content-container mw-article-toolbar-container">
<div id="left-navigation">
{{#data-namespace-tabs}}{{>Menu}}{{/data-namespace-tabs}}
{{#data-variants}}{{>Menu}}{{/data-variants}}
</div>
<div id="right-navigation">
{{#data-page-actions}}{{>Menu}}{{/data-page-actions}}
{{#data-page-actions-more}}{{>Menu}}{{/data-page-actions-more}}
{{^is-search-in-header}}
{{#data-search-box}}{{>SearchBox}}{{/data-search-box}}
{{/is-search-in-header}}
</div>
</div>
</div>
</div>
<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 }}