jonny
/
Vector-Local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Layout: Grid columns are restricted to desktop views 

On tablet, where the table of contents is hidden, the
sidebar should take up the full screen when open.

Fixes Pixel regression
MediaWiki_Test_vector-2022_sidebar-open_0_html_1_tablet.png

Bug: T303484
Change-Id: Ie0aa9f661a652e137d691a1fa4b05e69f0c5f8ab
This commit is contained in:
Jon Robson 2022-06-24 10:22:01 -07:00 committed by Jdlrobson
parent e23fc1fe11
commit 615181154c
1 changed files with 3 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
resources/skins.vector.styles/layouts/grid.less
View File

@ -1,7 +1,6 @@
//
// Grid layout
//
// Makes a column span entire page
.mixin-column-full-width() {
grid-column: sidebar / content;
@ -12,12 +11,6 @@
box-sizing: border-box;
}
// aligns left side of column with hamburger icon.
.mixin-column-align-width-hamburger-icon() {
// Align the content with the hamburger icon
padding: 0 0 0 @margin-horizontal-sidebar-button-icon;
}
.vector-layout-grid {
.mw-content-container {
max-width: @max-width-content-container;
@ -41,7 +34,7 @@
padding-bottom: 82px;
}
@media ( max-width: @max-width-mobile ) {
@media ( max-width: @max-width-tablet ) {
.mw-header {
// Should match grid-template-rows definition below.
height: 66px;
@ -50,7 +43,7 @@
}
}
@media ( min-width: @min-width-tablet ) {
@media ( min-width: @min-width-desktop ) {
@row-gap: 24px;
.mw-page-container-inner {
@ -90,34 +83,12 @@
}
}
@media ( min-width: @min-width-desktop ) {
@media ( min-width: @min-width-desktop-wide ) {
.mw-page-container-inner {
grid-template-columns: ~'284px 20px 1fr';
}
}
/**
* Special handling for sidebar when table of contents is visible.
* This only applies between the tablet and desktop breakpoints.
* It shouldn't apply on mobile as it will lead to misalignment with the hamburger icon.
* Cover the cases where:
* 1) the main menu is closed, there is no TOC in the sidebar
* 2) the main menu is closed, the sidebar TOC is hidden at the breakpoint.
* In these situation content should span the entire page.
*/
@media ( min-width: ( @min-width-tablet ) ) and ( max-width: @max-width-tablet ) {
@{selector-sidebar-container-sidebar-closed} {
.mw-navigation {
display: none;
}
& ~ .mw-content-container {
.mixin-column-full-width();
.mixin-column-align-width-hamburger-icon();
}
}
}
@{selector-sidebar-no-toc-sidebar-closed} {
& ~ .mw-content-container {
.mixin-column-full-width();