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

Layout: Align content with hamburger icon 

Content should always be aligned with the hamburger icon in the
new design between the tablet and desktop breakpoints.

Fixes: F35282438

Bug: T303484
Change-Id: I15215703d6392cd69ec57212d25c9a52149a6ac0
This commit is contained in:
Jon Robson 2022-06-24 09:04:22 -07:00 committed by Jdlrobson
parent 63e6daeb53
commit 82f0433a11
1 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,12 +2,20 @@
// Grid layout
//
// Makes a column span entire page
.mixin-column-full-width() {
grid-column: sidebar / content;
margin-left: auto;
margin-right: auto;
// Needed for minimal content e.g. one word articles.
width: 100%;
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 {
@ -60,17 +68,20 @@
/**
* 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 ( max-width: @width-breakpoint-desktop ) {
@media ( min-width: ( @width-breakpoint-tablet - 1px ) ) and ( max-width: @width-breakpoint-desktop ) {
@{selector-sidebar-container-sidebar-closed} {
display: none;
& + .mw-content-container {
.mixin-column-full-width();
.mixin-column-align-width-hamburger-icon();
}
}
}
@ -78,6 +89,10 @@
@{selector-sidebar-no-toc-sidebar-closed} {
& + .mw-content-container {
.mixin-column-full-width();
@media ( min-width: @width-breakpoint-tablet ) and ( max-width: @width-breakpoint-desktop ) {
.mixin-column-align-width-hamburger-icon();
}
}
}
}