Merge "Add ColumnEnd.mustache and new grid styles to support third column"

This commit is contained in:
jenkins-bot 2022-11-09 23:08:31 +00:00 committed by Gerrit Code Review
commit e60d8f6917
6 changed files with 120 additions and 71 deletions

View file

@ -5,7 +5,7 @@
},
{
"resourceModule": "skins.vector.styles",
"maxSize": "11.0 kB"
"maxSize": "11.3 kB"
},
{
"resourceModule": "skins.vector.legacy.js",

View file

@ -0,0 +1,5 @@
<div class="vector-column-end">
<nav id="vector-column-end-page-tools-container" class="vector-page-tools-landmark" aria-label="{{msg-tooltip-p-cactions}}">
{{#data-page-tools}}{{>PinnableDropdownContents}}{{/data-page-tools}}
</nav>
</div>

View file

@ -8,17 +8,14 @@
</nav>
</div>
<div id="right-navigation" class="vector-collapsible">
{{#data-views}}
<nav aria-label="{{msg-views}}">
{{>Tabs}}
{{#data-views}}{{>Tabs}}{{/data-views}}
</nav>
{{/data-views}}
{{#data-actions}}
<nav aria-label="{{msg-tooltip-p-cactions}}">
{{>Dropdown}}
<nav class="vector-page-tools-landmark" aria-label="{{msg-tooltip-p-cactions}}">
{{#is-page-tools-enabled}}{{#data-page-tools}}{{>PinnableDropdown}}{{/data-page-tools}}{{/is-page-tools-enabled}}
{{^is-page-tools-enabled}}{{#data-actions}}{{>Dropdown}}{{/data-actions}}{{/is-page-tools-enabled}}
</nav>
{{/data-actions}}
</div>
{{/data-portlets}}
</div>

View file

@ -50,6 +50,7 @@
<main id="content" class="mw-body" role="main">
{{>PageTitlebar}}
{{>PageToolbar}}
{{>ColumnEnd}}
<div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container>
{{>BeforeContent}}
{{! the #contentSub element is currently used by editors, do not hide or remove it
@ -59,10 +60,13 @@
{{{html-user-message}}}
{{{html-body-content}}}
{{{html-categories}}}
{{#is-page-tools-enabled}}{{#is-language-in-content-bottom}}
{{#data-lang-btn}}{{>Dropdown}}{{/data-lang-btn}}
{{/is-language-in-content-bottom}}{{/is-page-tools-enabled}}
</div>
{{#is-language-in-content-bottom}}
{{#data-lang-btn}}{{>Dropdown}}{{/data-lang-btn}}
{{/is-language-in-content-bottom}}
{{^is-page-tools-enabled}}{{#is-language-in-content-bottom}}
{{#data-lang-btn}}{{>Dropdown}}{{/data-lang-btn}}
{{/is-language-in-content-bottom}}{{/is-page-tools-enabled}}
</main>
{{{html-after-content}}}
</div>

View file

@ -144,7 +144,7 @@
.mixin-toc-collapsed-header();
.mw-table-of-contents-container {
grid-area: content;
grid-area: pageContent;
}
//

View file

@ -2,24 +2,67 @@
// Grid layout
//
// Makes a column span entire page
.mixin-column-full-width() {
grid-column: sidebar / content;
@width-sidebar-end: unit( 185px / @font-size-browser, em );
@media ( min-width: @min-width-desktop ) {
.mw-page-container-inner {
display: grid;
width: 100%;
column-gap: 8px; // 8px + 12px (.mw-body padding-left) = 20px total spacing
grid-template: ~'min-content min-content min-content 1fr min-content / 232px minmax(0, 1fr)';
grid-template-areas: 'header header'
'siteNotice siteNotice'
'mainMenu pageContent'
'toc pageContent'
'footer footer';
}
.vector-sitenotice-container {
grid-area: siteNotice;
}
.mw-table-of-contents-container {
grid-area: toc;
}
.mw-header {
grid-area: header;
}
.vector-main-menu-container {
grid-area: mainMenu;
}
.mw-content-container {
grid-area: pageContent;
}
.mw-footer-container {
grid-area: footer;
}
}
@media ( min-width: @min-width-desktop-wide ) {
.mw-page-container-inner {
/* Use of minmax is important to restrict the maximum grid column width
more information: T314756 */
grid-template-columns: ~'284px minmax(0, 1fr)';
}
}
.mixin-horizontally-centered() {
grid-column: mainMenu / pageContent;
margin-left: auto;
margin-right: auto;
// Needed for minimal content e.g. one word articles.
width: 100%;
box-sizing: border-box;
max-width: @max-width-content-container;
.vector-feature-limited-width-disabled & {
max-width: none;
}
}
.mw-content-container,
.mw-table-of-contents-container {
max-width: @max-width-content-container;
.vector-feature-page-tools-disabled & {
max-width: @max-width-content-container;
}
// For container logic specific to special pages and history pages.
// FIXME: Remove `.skin-vector-disable-max-width` when caching no longer an issue.
@ -40,61 +83,61 @@
}
}
@media ( min-width: @min-width-desktop ) {
.mw-page-container-inner {
display: grid;
width: 100%;
column-gap: 8px; // 8px + 12px (.mw-body padding-left) = 20px total spacing
grid-template: ~'min-content min-content min-content 1fr min-content / 232px minmax(0, 1fr)';
grid-template-areas: 'header header'
'sitenotice sitenotice'
'sidebar content'
'toc content'
'footer footer';
}
// Our usage of grid to position the ToC when it is collapsed in the page title
// requires us to manually define the max width depending on the number of columns.
// This also requires us to define a set width for the sidebar end column
// FIXME: Remove this max-width mess with T318013
@{selector-sidebar-no-toc-sidebar-closed} ~ .mw-content-container {
.mixin-horizontally-centered();
max-width: @max-width-content-container;
.vector-sitenotice-container {
grid-area: sitenotice;
}
.mw-table-of-contents-container {
grid-area: toc;
}
.mw-header {
grid-area: header;
}
.vector-main-menu-container {
grid-area: sidebar;
}
.mw-content-container {
grid-area: content;
}
.mw-footer-container {
grid-area: footer;
}
}
@media ( min-width: @min-width-desktop-wide ) {
.mw-page-container-inner {
/* Use of minmax is important to restrict the maximum grid column width
more information: T314756 */
grid-template-columns: ~'284px minmax(0, 1fr)';
}
}
@{selector-sidebar-no-toc-sidebar-closed} {
& ~ .mw-content-container {
.mixin-column-full-width();
.vector-feature-page-tools-enabled.vector-page-tools-pinned & {
max-width: @max-width-content-container + @width-sidebar-end;
}
}
.vector-toc-collapsed @{selector-main-menu-closed} {
& ~ .mw-content-container,
& ~ .mw-table-of-contents-container {
.mixin-column-full-width();
.mixin-horizontally-centered();
max-width: @max-width-content-container;
.vector-feature-page-tools-enabled.vector-page-tools-pinned& {
max-width: @max-width-content-container + @width-sidebar-end;
}
}
}
@media ( min-width: @min-width-desktop ) {
.vector-feature-page-tools-enabled .mw-body {
display: grid;
grid-auto-rows: auto;
grid-template-columns: ~'minmax(0, @{max-width-content-container}) min-content';
grid-template-areas: 'titlebar .'
'toolbar columnEnd'
'content columnEnd';
// FIXME: Remove `.skin-vector-disable-max-width` when caching no longer an issue.
.vector-feature-limited-width-disabled&,
.vector-feature-limited-width-content-disabled&,
.skin-vector-disable-max-width& {
grid-template-columns: ~'1fr min-content';
}
.vector-page-titlebar {
grid-area: titlebar;
}
.vector-page-toolbar {
grid-area: toolbar;
}
#bodyContent {
grid-area: content;
}
.vector-column-end {
grid-area: columnEnd;
}
}
}