mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-09-23 10:21:40 +00:00
[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",
|
||||
"maxSize": "10.7 kB"
|
||||
"maxSize": "11.0 kB"
|
||||
},
|
||||
{
|
||||
"resourceModule": "skins.vector.legacy.js",
|
||||
|
|
|
@ -43,7 +43,7 @@
|
|||
|
||||
{{>Header}}
|
||||
|
||||
<div class="mw-workspace-container">
|
||||
<div class="mw-workspace-container vector-sidebar-container">
|
||||
<div id="mw-navigation">
|
||||
{{^is-title-above-tabs}}
|
||||
{{>ArticleToolbar}}
|
||||
|
|
17
resources/skins.vector.styles/layouts/gradeC.less
Normal file
17
resources/skins.vector.styles/layouts/gradeC.less
Normal file
|
@ -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;
|
||||
}
|
||||
}
|
63
resources/skins.vector.styles/layouts/grid.less
Normal file
63
resources/skins.vector.styles/layouts/grid.less
Normal file
|
@ -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 {
|
||||
@import './layouts/print.less';
|
||||
}
|
||||
|
||||
@import './layouts/gradeC.less';
|
||||
|
|
Loading…
Reference in a new issue