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

Layout: Fixes table of contents alignment issues 

This patch also adds some grid variables to be reused

Bug: T311793
Change-Id: Ib985e929b5ff013dfe9dcff1d0f33cebc24bbed6
This commit is contained in:
Jon Robson 2022-06-30 15:37:08 -07:00 committed by Jdlrobson
parent 43677cfe63
commit e8130d6628
5 changed files with 50 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
resources/common/variables.less
View File

@ -192,3 +192,6 @@
@max-width-content-container: unit( 960px / @font-size-browser, em ); // 60em @ 16
@padding-horizontal-page-container: unit( 32px / @font-size-browser, em );
@padding-horizontal-page-container-wide: unit( 40px / @font-size-browser, em );
// Grid
@grid-row-gap: 24px;

22
resources/skins.vector.styles/components/Sidebar.less
View File

@ -59,6 +59,21 @@ body:not( .vector-toc-enabled ) .mw-sidebar {
}
}
& .vector-layout-grid {
@media ( min-width: @min-width-desktop ) {
.mw-sidebar {
// Prevent grid row gap from affecting TOC spacing when main menu is open
margin-bottom: -@grid-row-gap;
}
}
.sidebar-toc {
// Use margin-top to align TOC rather than grid row gap
// Applies when the TOC sticky and when the main menu is both open and closed.
margin-top: @top-margin-sidebar-toc;
}
}
/* FIXME: The following selector can be removed when the option to disable `VectorTitleAboveTabs` is removed. */
@{selector-workspace-container-sidebar-open} {
@media ( max-width: @max-width-tablet ) {
@ -71,16 +86,17 @@ body:not( .vector-toc-enabled ) .mw-sidebar {
// FIXME: Merge margin-top styles with above when .vector-toc-enabled is removed (T310527)
.sidebar-toc {
.vector-toc-enabled & {
.vector-toc-enabled .vector-layout-legacy & {
// Main menu is closed
margin-top: @top-margin-sidebar-toc_title_inline;
}
.vector-toc-enabled @{selector-workspace-container-sidebar-open} & {
.vector-toc-enabled .vector-layout-legacy @{selector-workspace-container-sidebar-open} & {
// Main menu is open
margin-top: @top-margin-sidebar-toc;
}
.vector-toc-enabled.vector-sticky-header-visible & {
.vector-toc-enabled.vector-sticky-header-visible .vector-layout-legacy & {
// Sticky header is visible
margin-top: @top-margin-sidebar-toc;
}

7
resources/skins.vector.styles/components/TableOfContentsCollapsed.less
View File

@ -32,8 +32,11 @@
.mw-table-of-contents-container {
position: relative;
// Reset styles used by sticky TOC
top: 0;
.vector-layout-legacy & {
// !important needed to override rules in screen.less
top: 0 !important; /* stylelint-disable-line declaration-no-important */
}
}
.sidebar-toc {

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

@ -1,6 +1,11 @@
//
// Grid layout
//
@height-header: 66px;
@width-gutter: 20px;
@padding-top-footer: 50px;
// Makes a column span entire page
.mixin-column-full-width() {
grid-column: sidebar / content;
@ -33,8 +38,6 @@
}
}
@padding-top-footer: 50px;
.mw-footer-container {
padding-top: @padding-top-footer;
padding-bottom: 82px;
@ -42,25 +45,23 @@
@media ( max-width: @max-width-tablet ) {
.mw-header {
// Should match grid-template-rows definition below.
height: 66px;
// Should match row-gap below.
margin-bottom: 24px;
// Match header styles applied by grid-template-rows and row-gap
// when grid is disabled on lower resolutions
height: @height-header;
margin-bottom: @grid-row-gap;
}
}
@media ( min-width: @min-width-desktop ) {
@row-gap: 24px;
.mw-page-container-inner {
display: grid;
width: 100%;
grid-template: ~'66px min-content 1fr min-content / 232px 20px minmax(0, 1fr)';
grid-template: ~'@{height-header} min-content 1fr min-content / 232px @{width-gutter} minmax(0, 1fr)';
grid-template-areas: 'header header header'
'sidebar gutter content'
'toc gutter content'
'footer footer footer';
row-gap: @row-gap;
row-gap: @grid-row-gap;
}
.mw-body {
@ -90,13 +91,13 @@
.mw-footer-container {
grid-area: footer;
padding-top: @padding-top-footer - @row-gap;
padding-top: @padding-top-footer - @grid-row-gap;
}
}
@media ( min-width: @min-width-desktop-wide ) {
.mw-page-container-inner {
grid-template-columns: ~'284px 20px 1fr';
grid-template-columns: ~'284px @{width-gutter} 1fr';
}
}

18
resources/skins.vector.styles/layouts/screen.less
View File

@ -198,18 +198,20 @@ body {
.mw-table-of-contents-container {
// stylelint-disable-next-line plugin/no-unsupported-browser-features
position: sticky;
// To ensure the TOC is 1.5em (24px) from the top of the viewport when sticky
// we account for the TOC's top margin
top: ~'calc( 1.5em - @{top-margin-sidebar-toc_title_inline} )'; // top: -2em
// When main menu is open the TOC's top margin is reduced
@{selector-workspace-container-sidebar-open} & {
top: ~'calc( 1.5em - @{top-margin-sidebar-toc} )'; // top: 0
}
top: 0;
// Needed for Grid-based layout
align-self: start;
.vector-layout-legacy & {
float: left;
clear: both;
// To ensure the TOC is 1.5em (24px) from the top of the viewport when sticky
// we account for the TOC's top margin
top: ~'calc( 1.5em - @{top-margin-sidebar-toc_title_inline} )'; // top: -2em
}
.vector-layout-legacy @{selector-workspace-container-sidebar-open} & {
// When main menu is open the TOC's top margin is reduced
top: ~'calc( 1.5em - @{top-margin-sidebar-toc} )'; // top: 0
}
}