mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-18 13:05:50 +00:00
092a2957af
This patch closely follows the desired guidelines/desired styles Alex Hollender has put forth in his prototype, but uses multiple containers to achieve this look since our DOM order/structure is different than the DOM structure in the prototype. The following containers are used, but unlike his prototype, they are sometimes used more than once: * Page Container: Contains every other container and limits the overall max-width of the white part of the page. * Workspace Container: Contains the sidebar and content container. The sidebar is displaced ~30 pixels to the start (left) of the workspace container at all times. * Content Container: Contains the content. The max-width of this changes depending on whether you are on a special page/history page vs. other pages. * Article Toolbar Container: Contains the article toolbar. The max-width of this is always the same as the max-width of the article content as we don't want the toolbar to move when going from the article page to the history/special page. Changes to be aware: * To test locally, `$wgVectorLayoutMaxWidth = true;`. This design is temporarily feature flagged and defaults to being "off". * Note that layout-max-width.less is a temporary file made to meet the feature flag requirement of T246420 (intended to derisk the deployment). After the deploy, we should merge most if not all of the rules into layout.less where the max-width design will become the default. * Per Jon's code review comment, I have relaxed the indenting of skin.mustache to make the diff easier to reason about. If desired, the correct indenting can be achieved in a (much less risky) follow-up commit. Bug: T246420 Bug: T153043 Change-Id: Ie49f629bc705850c6996164a516957476c034048
131 lines
4.8 KiB
Plaintext
131 lines
4.8 KiB
Plaintext
{{!
|
|
string html-headelement a string of attribute HTML that begins with `<html>` and ends with
|
|
`</head>` and contains `meta` tags and ResourceLoader internals.
|
|
string|null html-sitenotice the contents of a banner defined in MediaWiki:Sitenotice.
|
|
Also used by CentralNotice to inject banners into Vector.
|
|
Indicator[] data-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
|
|
string html-prebodyhtml
|
|
bool page-isarticle
|
|
string msg-tagline
|
|
string html-subtitle
|
|
string html-undelete
|
|
string html-newtalk
|
|
string msg-vector-jumptonavigation
|
|
string msg-vector-jumptosearch
|
|
string html-bodycontent
|
|
string html-printfooter
|
|
string html-catlinks
|
|
string html-debuglog
|
|
string html-dataAfterContent
|
|
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.
|
|
string html-printtail HTML to render at the end of the page contained necessary script tags for
|
|
ResourceLoader terminated with `</body></html>`.
|
|
}}
|
|
|
|
{{{html-headelement}}}
|
|
|
|
<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>
|
|
{{#html-sitenotice}}
|
|
<div id="siteNotice" class="mw-body-content">{{{html-sitenotice}}}</div>
|
|
{{/html-sitenotice}}
|
|
{{>Indicators}}
|
|
<h1 id="firstHeading" class="firstHeading" lang="{{page-langcode}}">{{{html-title}}}</h1>
|
|
{{{html-prebodyhtml}}}
|
|
<div id="bodyContent" class="mw-body-content">
|
|
{{#page-isarticle}}<div id="siteSub" class="noprint">{{msg-tagline}}</div>{{/page-isarticle}}
|
|
<div id="contentSub"{{{html-userlangattributes}}}>{{{html-subtitle}}}</div>
|
|
{{#html-undelete}}<div id="contentSub2">{{{html-undelete}}}</div>{{/html-undelete}}
|
|
{{#html-newtalk}}<div class="usermessage">{{{html-newtalk}}}</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-bodycontent}}}
|
|
{{#html-printfooter}}
|
|
<div class="printfooter">{{{html-printfooter}}}</div>
|
|
{{/html-printfooter}}
|
|
{{{html-catlinks}}}
|
|
{{{html-debuglog}}}
|
|
</div>
|
|
</main>
|
|
{{{html-dataAfterContent}}}
|
|
</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}}
|
|
</header>
|
|
|
|
<div id="mw-navigation">
|
|
<h2>{{{html-navigation-heading}}}</h2>
|
|
<div id="mw-head">
|
|
{{#data-personal-menu}}{{>Menu}}{{/data-personal-menu}}
|
|
<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}}
|
|
{{#data-search-box}}{{>SearchBox}}{{/data-search-box}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mw-workspace-container mw-footer-container">
|
|
{{#data-footer}}{{>Footer}}{{/data-footer}}
|
|
</div>
|
|
</div> {{! END mw-page-container-inner }}
|
|
</div> {{! END mw-page-container }}
|
|
{{{html-printtail}}}
|