From e8130d662812d1ad15be8c2730008ff5ad4c8c40 Mon Sep 17 00:00:00 2001 From: Jon Robson Date: Thu, 30 Jun 2022 15:37:08 -0700 Subject: [PATCH] Layout: Fixes table of contents alignment issues This patch also adds some grid variables to be reused Bug: T311793 Change-Id: Ib985e929b5ff013dfe9dcff1d0f33cebc24bbed6 --- resources/common/variables.less | 3 +++ .../components/Sidebar.less | 22 +++++++++++++--- .../components/TableOfContentsCollapsed.less | 7 ++++-- .../skins.vector.styles/layouts/grid.less | 25 ++++++++++--------- .../skins.vector.styles/layouts/screen.less | 18 +++++++------ 5 files changed, 50 insertions(+), 25 deletions(-) diff --git a/resources/common/variables.less b/resources/common/variables.less index 71d17d2b5..f31875f0a 100644 --- a/resources/common/variables.less +++ b/resources/common/variables.less @@ -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; diff --git a/resources/skins.vector.styles/components/Sidebar.less b/resources/skins.vector.styles/components/Sidebar.less index 1256fb427..adbea3efa 100644 --- a/resources/skins.vector.styles/components/Sidebar.less +++ b/resources/skins.vector.styles/components/Sidebar.less @@ -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; } diff --git a/resources/skins.vector.styles/components/TableOfContentsCollapsed.less b/resources/skins.vector.styles/components/TableOfContentsCollapsed.less index fd61b6420..e9bbe05f8 100644 --- a/resources/skins.vector.styles/components/TableOfContentsCollapsed.less +++ b/resources/skins.vector.styles/components/TableOfContentsCollapsed.less @@ -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 { diff --git a/resources/skins.vector.styles/layouts/grid.less b/resources/skins.vector.styles/layouts/grid.less index f59f836d2..28874c091 100644 --- a/resources/skins.vector.styles/layouts/grid.less +++ b/resources/skins.vector.styles/layouts/grid.less @@ -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'; } } diff --git a/resources/skins.vector.styles/layouts/screen.less b/resources/skins.vector.styles/layouts/screen.less index 14cd50379..a4c9c42aa 100644 --- a/resources/skins.vector.styles/layouts/screen.less +++ b/resources/skins.vector.styles/layouts/screen.less @@ -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 } }