[Grid] Vector 2022 layout uses CSS grid
It gracefully degrades to a single column layout on grade C browsers, IE11, and Safari 9. Bug: T303484 Change-Id: Iaa3c1bee146dc39b1259a1ce712a29c6b22305d1
This commit is contained in:
parent
304027073a
commit
664b6c5cc5
|
@ -5,7 +5,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"resourceModule": "skins.vector.styles",
|
"resourceModule": "skins.vector.styles",
|
||||||
"maxSize": "10.7 kB"
|
"maxSize": "11.0 kB"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"resourceModule": "skins.vector.legacy.js",
|
"resourceModule": "skins.vector.legacy.js",
|
||||||
|
|
|
@ -43,7 +43,7 @@
|
||||||
|
|
||||||
{{>Header}}
|
{{>Header}}
|
||||||
|
|
||||||
<div class="mw-workspace-container">
|
<div class="mw-workspace-container vector-sidebar-container">
|
||||||
<div id="mw-navigation">
|
<div id="mw-navigation">
|
||||||
{{^is-title-above-tabs}}
|
{{^is-title-above-tabs}}
|
||||||
{{>ArticleToolbar}}
|
{{>ArticleToolbar}}
|
||||||
|
|
|
@ -0,0 +1,17 @@
|
||||||
|
//
|
||||||
|
// No grid support behaviour
|
||||||
|
//
|
||||||
|
|
||||||
|
// If there is no display grid support we remove the table of contents
|
||||||
|
// On IE11 this leaves a clean single column grid.
|
||||||
|
// To be revisited when table of contents is collapsible in which situation we should be able to
|
||||||
|
// force it as sticky.
|
||||||
|
.vector-layout-grid .mw-table-of-contents-container {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports ( display: grid ) {
|
||||||
|
.vector-layout-grid .mw-table-of-contents-container {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,63 @@
|
||||||
|
//
|
||||||
|
// Grid layout
|
||||||
|
//
|
||||||
|
|
||||||
|
.vector-layout-grid {
|
||||||
|
@media ( max-width: @width-breakpoint-tablet ) {
|
||||||
|
.mw-header {
|
||||||
|
// Should match grid-template-rows definition below.
|
||||||
|
height: 66px;
|
||||||
|
// Should match row-gap below.
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media ( min-width: @width-breakpoint-tablet ) {
|
||||||
|
.mw-page-container-inner {
|
||||||
|
display: grid;
|
||||||
|
width: 100%;
|
||||||
|
grid-template: ~'66px auto 1fr / 232px 20px minmax(0, 1fr)';
|
||||||
|
grid-template-areas: 'header header header'
|
||||||
|
'sidebar gutter content'
|
||||||
|
'sidebar gutter footer';
|
||||||
|
row-gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mw-body {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mw-header {
|
||||||
|
grid-area: header;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vector-sidebar-container {
|
||||||
|
grid-area: sidebar;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mw-content-container {
|
||||||
|
grid-area: content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mw-footer-container {
|
||||||
|
grid-area: footer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media ( min-width: @width-breakpoint-desktop ) {
|
||||||
|
.mw-page-container-inner {
|
||||||
|
grid-template-columns: ~'284px 20px 1fr';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Special handling for sidebar when table of contents is visible */
|
||||||
|
@media ( max-width: @width-breakpoint-desktop ) {
|
||||||
|
@{selector-workspace-container-sidebar-closed} {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
& + .mw-content-container {
|
||||||
|
grid-column: sidebar / content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -415,3 +415,5 @@ body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@import 'grid.less';
|
||||||
|
|
|
@ -30,3 +30,5 @@
|
||||||
@media print {
|
@media print {
|
||||||
@import './layouts/print.less';
|
@import './layouts/print.less';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@import './layouts/gradeC.less';
|
||||||
|
|
Loading…
Reference in New Issue