2020-02-17 19:49:43 +00:00
|
|
|
{{!
|
2020-07-09 16:32:45 +00:00
|
|
|
string|null html-site-notice the contents of a banner defined in MediaWiki:Sitenotice.
|
2020-04-08 21:40:56 +00:00
|
|
|
Also used by CentralNotice to inject banners into Vector.
|
2020-07-09 16:32:45 +00:00
|
|
|
Indicator[] array-indicators wiki-defined badges such as "good article",
|
2020-06-03 19:41:59 +00:00
|
|
|
"featured article". An empty array if none are defined.
|
2020-04-08 21:40:56 +00:00
|
|
|
string html-title
|
2021-05-01 09:09:02 +00:00
|
|
|
bool is-article
|
2020-04-08 21:40:56 +00:00
|
|
|
string msg-tagline
|
|
|
|
|
string html-subtitle
|
2020-07-09 16:32:45 +00:00
|
|
|
string html-undelete-link
|
2020-04-08 21:40:56 +00:00
|
|
|
string html-newtalk
|
2020-06-01 19:28:51 +00:00
|
|
|
string msg-vector-jumptonavigation
|
|
|
|
|
string msg-vector-jumptosearch
|
2020-09-08 23:20:58 +00:00
|
|
|
string msg-vector-jumptocontent
|
2020-07-09 16:32:45 +00:00
|
|
|
string html-body-content
|
|
|
|
|
string html-categories
|
|
|
|
|
string html-after-content
|
[modern] A new version of Vector with a new logo
Changes to support feature:
* ResourceLoaderSkinModule logo features are dropped
* New layout provided given the fork in layout between legacy and new.
* Legacy sidebar styles now pulled out
* breakpoint styles are not carried over from legacy Vector
The new Vector layout for now has one breakpoint.
Changes to storybook:
* The storybook script now pulls down image assets so that the logos can
be shown in storybook. The script is adjusted to make use of a static folder to
serve these images.
Note:
* The legacy mode is not touched as part of this patchset.
* The personal menu is unaffected by this patch and is out of scope.
* The alignment issue is noted, but will be solved at a later date.
* Changes to portal are out of scope.
* Adding storybook for modern descoped, given its not possible to load
both legacy layout and modern layout inside a storybook at current time.
Sample config:
$wgLogos = [
'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png',
'tagline' => [
'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg',
'width' => 117,
'height' => 13,
],
'1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png',
'wordmark' => [
'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg',
'width' => 116,
'height' => 18,
],
];
Coauthor: Aron Manning
Bug: T246170
Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
2020-03-09 05:51:00 +00:00
|
|
|
LogoOptions data-logos
|
2020-09-04 19:18:57 +00:00
|
|
|
object data-portlets
|
|
|
|
|
MenuDefinition data-portlets.data-personal
|
|
|
|
|
MenuDefinition data-portlets.data-namespaces
|
|
|
|
|
MenuDefinition data-portlets.data-variants
|
|
|
|
|
MenuDefinition data-portlets.data-views
|
|
|
|
|
MenuDefinition data-portlets.data-actions
|
2020-04-08 21:40:56 +00:00
|
|
|
object data-search-box. See SearchBox.mustache for documentation.
|
2020-06-23 02:43:28 +00:00
|
|
|
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.
|
2021-08-25 15:24:58 +00:00
|
|
|
string msg-vector-main-menu-tooltip The title attribute for the main menu icon.
|
2021-08-30 22:27:15 +00:00
|
|
|
string msg-vector-menu-checkbox-expanded Dropdown menu span content for expanded selection in checkbox hack.
|
|
|
|
|
string msg-vector-menu-checkbox-collapsed Dropdown menu span content for collapsed selection in checkbox hack.
|
2020-09-04 19:18:57 +00:00
|
|
|
object data-portlets-sidebar. See Sidebar.mustache for documentation.
|
2020-04-08 21:40:56 +00:00
|
|
|
object data-footer for footer template partial. see Footer.mustache for documentation.
|
2020-02-17 19:49:43 +00:00
|
|
|
}}
|
Implement Page, Workspace, Content, and Article Toolbar Containers
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
2020-06-23 18:02:32 +00:00
|
|
|
<div class="mw-page-container">
|
2020-09-08 23:20:58 +00:00
|
|
|
<a class="mw-jump-link" href="#content">{{msg-vector-jumptocontent}}</a>
|
Implement Page, Workspace, Content, and Article Toolbar Containers
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
2020-06-23 18:02:32 +00:00
|
|
|
<div class="mw-page-container-inner">
|
|
|
|
|
|
2020-06-23 02:43:28 +00:00
|
|
|
<input
|
|
|
|
|
type="checkbox"
|
|
|
|
|
id="mw-sidebar-checkbox"
|
|
|
|
|
class="mw-checkbox-hack-checkbox"
|
2020-06-23 16:21:25 +00:00
|
|
|
{{#sidebar-visible}}checked{{/sidebar-visible}}>
|
2020-06-23 02:43:28 +00:00
|
|
|
|
2020-09-08 23:20:58 +00:00
|
|
|
{{>Header}}
|
Implement Page, Workspace, Content, and Article Toolbar Containers
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
2020-06-23 18:02:32 +00:00
|
|
|
<div class="mw-workspace-container">
|
2020-09-08 23:20:58 +00:00
|
|
|
{{>Navigation}}
|
Implement Page, Workspace, Content, and Article Toolbar Containers
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
2020-06-23 18:02:32 +00:00
|
|
|
<div class="mw-content-container">
|
2020-05-13 22:46:23 +00:00
|
|
|
{{! `role` is unnecessary but kept to support selectors in any gadgets or user styles. }}
|
|
|
|
|
<main id="content" class="mw-body" role="main">
|
2019-02-26 18:44:10 +00:00
|
|
|
<a id="top"></a>
|
2021-04-26 23:25:30 +00:00
|
|
|
<div id="siteNotice">{{{html-site-notice}}}</div>
|
2021-01-22 18:24:34 +00:00
|
|
|
|
2020-08-18 21:30:25 +00:00
|
|
|
{{^is-language-in-header}}
|
2021-01-22 18:24:34 +00:00
|
|
|
{{>Indicators}}
|
2021-01-21 00:10:54 +00:00
|
|
|
<h1 id="firstHeading" class="firstHeading" {{{html-user-language-attributes}}}>{{{html-title}}}</h1>
|
2020-08-18 21:30:25 +00:00
|
|
|
{{/is-language-in-header}}
|
2021-01-22 18:24:34 +00:00
|
|
|
|
2020-08-18 21:30:25 +00:00
|
|
|
{{#is-language-in-header}}
|
2021-01-22 18:24:34 +00:00
|
|
|
<header class="mw-body-header">
|
2021-05-03 13:48:46 +00:00
|
|
|
{{^is-mainpage}}
|
|
|
|
|
{{#data-portlets.data-languages}}{{>Menu}}{{/data-portlets.data-languages}}
|
|
|
|
|
{{/is-mainpage}}
|
2021-06-24 16:43:23 +00:00
|
|
|
<h1 id="firstHeading" class="firstHeading" {{{html-user-language-attributes}}}>{{{html-title}}}</h1>
|
2021-02-03 22:19:30 +00:00
|
|
|
{{>Indicators}}
|
2021-05-01 09:09:02 +00:00
|
|
|
{{#is-article}}
|
2021-01-22 18:24:34 +00:00
|
|
|
<div id="siteSub" class="noprint">{{msg-tagline}}</div>
|
2021-05-01 09:09:02 +00:00
|
|
|
{{/is-article}}
|
2020-08-18 21:30:25 +00:00
|
|
|
</header>
|
|
|
|
|
{{/is-language-in-header}}
|
2021-01-22 18:24:34 +00:00
|
|
|
|
2021-05-21 01:02:07 +00:00
|
|
|
<div id="bodyContent" class="vector-body">
|
2021-01-22 18:24:34 +00:00
|
|
|
{{^is-language-in-header}}
|
2021-05-01 09:09:02 +00:00
|
|
|
{{#is-article}}<div id="siteSub" class="noprint">{{msg-tagline}}</div>{{/is-article}}
|
2021-01-22 18:24:34 +00:00
|
|
|
{{/is-language-in-header}}
|
2020-07-14 21:40:28 +00:00
|
|
|
<div id="contentSub"{{{html-user-language-attributes}}}>{{{html-subtitle}}}</div>
|
2020-07-09 16:32:45 +00:00
|
|
|
<div id="contentSub2">{{{html-undelete-link}}}</div>
|
2020-10-09 00:15:34 +00:00
|
|
|
{{{html-user-message}}}
|
2020-07-09 16:32:45 +00:00
|
|
|
{{{html-body-content}}}
|
|
|
|
|
{{{html-categories}}}
|
2019-02-26 18:44:10 +00:00
|
|
|
</div>
|
2021-05-03 13:48:46 +00:00
|
|
|
|
|
|
|
|
{{#is-mainpage}}
|
|
|
|
|
{{#is-language-in-header}}
|
|
|
|
|
{{#data-portlets.data-languages}}{{>Menu}}{{/data-portlets.data-languages}}
|
|
|
|
|
{{/is-language-in-header}}
|
|
|
|
|
{{/is-mainpage}}
|
|
|
|
|
|
2020-05-13 22:46:23 +00:00
|
|
|
</main>
|
2020-07-09 16:32:45 +00:00
|
|
|
{{{html-after-content}}}
|
Implement Page, Workspace, Content, and Article Toolbar Containers
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
2020-06-23 18:02:32 +00:00
|
|
|
</div> {{! END mw-content-container }}
|
|
|
|
|
</div> {{! END mw-workspace-container }}
|
2020-04-28 01:44:16 +00:00
|
|
|
|
Implement Page, Workspace, Content, and Article Toolbar Containers
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
2020-06-23 18:02:32 +00:00
|
|
|
<div class="mw-workspace-container mw-footer-container">
|
2020-07-13 19:12:53 +00:00
|
|
|
<div class="mw-content-container">
|
|
|
|
|
{{#data-footer}}{{>Footer}}{{/data-footer}}
|
|
|
|
|
</div>
|
Implement Page, Workspace, Content, and Article Toolbar Containers
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
2020-06-23 18:02:32 +00:00
|
|
|
</div>
|
|
|
|
|
</div> {{! END mw-page-container-inner }}
|
|
|
|
|
</div> {{! END mw-page-container }}
|
2021-08-30 22:44:00 +00:00
|
|
|
{{#data-vector-sticky-header}}
|
|
|
|
|
{{>StickyHeader}}
|
|
|
|
|
{{/data-vector-sticky-header}}
|