From a84549f2437e88b86fdac8760c8583d666e869a7 Mon Sep 17 00:00:00 2001 From: bwang Date: Wed, 29 Jun 2022 14:28:06 -0500 Subject: [PATCH] Remove tablet specific styles for collapsed TOC, and misc CSS clean up This patch also fixes a regression for non grid layout Vector on tablet viewports when the sidebar and collapsed TOC is open https://jmp.sh/xZhkU6q No pixel regressions Change-Id: Ic371f9b7ddd017af835565834e26a65ad3c2afc8 --- resources/common/variables.less | 1 - .../components/Sidebar.less | 73 ++++++++++--------- .../components/TableOfContentsCollapsed.less | 20 ----- .../skins.vector.styles/layouts/screen.less | 28 +++---- 4 files changed, 51 insertions(+), 71 deletions(-) diff --git a/resources/common/variables.less b/resources/common/variables.less index 3bad68b41..71d17d2b5 100644 --- a/resources/common/variables.less +++ b/resources/common/variables.less @@ -126,7 +126,6 @@ @margin-horizontal-sidebar-button-icon: unit( 12px / @font-size-browser, em ); // 0.75em @ 16 // Sidebar -@selector-checkbox-hack: ~'.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container'; @width-sidebar-px: 220; @width-sidebar-px-wide: 244; @margin-toc-start-content: unit( ( @width-sidebar-px + 24 ) / @font-size-browser, em ); diff --git a/resources/skins.vector.styles/components/Sidebar.less b/resources/skins.vector.styles/components/Sidebar.less index c1affc520..1256fb427 100644 --- a/resources/skins.vector.styles/components/Sidebar.less +++ b/resources/skins.vector.styles/components/Sidebar.less @@ -6,19 +6,14 @@ // T305069 Layout adjustments of sidebar elements: // Vertically align the left edge of sidebar elements with the visible edge of the sidebar toggle hamburger menu. @margin-start-sidebar-content: unit( 12px / @font-size-browser, em ); // 0.75em @ 16 -// Top of sidebar TOC border horizontally aligns with page title underline rule. +// Spacing when the main menu is closed, aligns sidebar TOC aligns with bottom of the page title. @top-margin-sidebar-toc_title_inline: 3.5em; -// Top of sidebar TOC border normal spacing. +// Default spacing separating the sidebar TOC from the main menu or viewport @top-margin-sidebar-toc: 1.5em; // Top of sidebar main menu border horizontally aligns with top of tool tabs above page title. @top-margin-sidebar-content: -2.5em; .mw-sidebar { - width: @width-grid-column-one; - // To avoid the white part of the gradient colliding with the sidebar links - // we apply top and bottom padding. - padding: 8px 0 40px @padding-left-sidebar; - background-image: linear-gradient( to bottom, @background-color-base 0%, @background-color-secondary--modern 10%, @background-color-secondary--modern 90%, @background-color-base 100% ); box-sizing: border-box; // Hide #p-navigation label @@ -27,6 +22,15 @@ } } +// FIXME: Delete this selector when .vector-toc-enabled is removed (T310527) +body:not( .vector-toc-enabled ) .mw-sidebar { + width: @width-grid-column-one; + // To avoid the white part of the gradient colliding with the sidebar links + // we apply top and bottom padding. + padding: 8px 0 40px @padding-left-sidebar; + background-image: linear-gradient( to bottom, @background-color-base 0%, @background-color-secondary--modern 10%, @background-color-secondary--modern 90%, @background-color-base 100% ); +} + // FIXME: Can be removed when "VectorTitleAboveTabs" is enabled and old layout is removed. .vector-article-toolbar + .mw-sidebar { margin-top: @top-margin-sidebar-content; @@ -34,6 +38,15 @@ // Update styling when TOC is enabled .vector-toc-enabled { + .mw-sidebar, + .sidebar-toc { + margin-left: 0; + + @media ( min-width: @min-width-desktop-wide ) { + margin-left: @margin-start-sidebar-content; + } + } + .mw-sidebar { width: @width-sidebar; // Temporary magic number, will be calculated after TOC specs are finalized @@ -46,41 +59,29 @@ } } - .sidebar-toc { - margin-top: @top-margin-sidebar-toc_title_inline; - } - - .mw-sidebar, - .sidebar-toc { - margin-left: 0; - - @media ( min-width: @min-width-desktop-wide ) { - margin-left: @margin-start-sidebar-content; - } - } - - @selector-checkbox-hack: ~'.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container'; - // T305069 Apply different top spacing to the topmost sidebar element during menu toggling when sidebar is open. - @{selector-checkbox-hack} { - .sidebar-toc { - 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 ) { .mw-sidebar { margin-top: 0; - margin-left: 0; - } - - .sidebar-toc { - display: none; } } } +} - // T305069 When scrolling down, override the top margin of the sticky TOC - // so that the top of sticky TOC remains at the top of the viewport with normal padding. - &.vector-sticky-header-visible .sidebar-toc { +// FIXME: Merge margin-top styles with above when .vector-toc-enabled is removed (T310527) +.sidebar-toc { + .vector-toc-enabled & { + margin-top: @top-margin-sidebar-toc_title_inline; + } + + .vector-toc-enabled @{selector-workspace-container-sidebar-open} & { + // Main menu is open + margin-top: @top-margin-sidebar-toc; + } + + .vector-toc-enabled.vector-sticky-header-visible & { + // Sticky header is visible margin-top: @top-margin-sidebar-toc; } } @@ -147,7 +148,7 @@ // Use the MediaWiki checkbox hack class from checkboxHack.less. This class exists on the // checkbox input for the menu panel. -#mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container .mw-sidebar { +@{selector-workspace-container-sidebar-closed} .mw-sidebar { // Turn off presentation so that screen readers get the same effect as visually hiding. // Visibility and opacity can be animated. If animation is unnecessary, use `display: none` // instead to avoid hidden rendering. diff --git a/resources/skins.vector.styles/components/TableOfContentsCollapsed.less b/resources/skins.vector.styles/components/TableOfContentsCollapsed.less index ce03a201f..fd61b6420 100644 --- a/resources/skins.vector.styles/components/TableOfContentsCollapsed.less +++ b/resources/skins.vector.styles/components/TableOfContentsCollapsed.less @@ -77,23 +77,3 @@ } } } - -@media ( min-width: @min-width-tablet ) and ( max-width: @max-width-tablet ) { - body:not( .vector-below-page-title ) @{selector-checkbox-hack} .sidebar-toc { - // Adjust TOC for when the main menu is open, which pushes the page title to the right - left: 22px; - } - - @{selector-collapsed-toc-button-checked} { - // Apply float styles to the TOC and main menu to ensure the absolute positioned TOC - // can remain in the correct location even when the main menu is open - & ~ .mw-table-of-contents-container { - clear: none; - float: left; - } - - & ~ #mw-navigation .mw-sidebar { - float: left; - } - } -} diff --git a/resources/skins.vector.styles/layouts/screen.less b/resources/skins.vector.styles/layouts/screen.less index a7c1d2998..14cd50379 100644 --- a/resources/skins.vector.styles/layouts/screen.less +++ b/resources/skins.vector.styles/layouts/screen.less @@ -8,10 +8,10 @@ @import '../../common/variables.less'; @import 'mediawiki.mixins.less'; -@selector-workspace-container-sidebar-open: ~'.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container'; -@selector-workspace-container-sidebar-closed: ~'.mw-checkbox-hack-checkbox:not( :checked ) ~ .mw-workspace-container'; -@selector-sidebar-container-sidebar-closed: ~'.mw-checkbox-hack-checkbox:not( :checked ) ~ .vector-sidebar-container'; -@selector-sidebar-no-toc-sidebar-closed: ~'.mw-checkbox-hack-checkbox:not( :checked ) ~ .vector-sidebar-container-no-toc'; +@selector-workspace-container-sidebar-open: ~'#mw-sidebar-checkbox:checked ~ .mw-workspace-container'; +@selector-workspace-container-sidebar-closed: ~'#mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container'; +@selector-sidebar-container-sidebar-closed: ~'#mw-sidebar-checkbox:not( :checked ) ~ .vector-sidebar-container'; +@selector-sidebar-no-toc-sidebar-closed: ~'#mw-sidebar-checkbox:not( :checked ) ~ .vector-sidebar-container-no-toc'; // Sidebar @width-grid-column-one: 11em; @@ -198,16 +198,17 @@ body { .mw-table-of-contents-container { // stylelint-disable-next-line plugin/no-unsupported-browser-features position: sticky; - float: left; - // Defaults to -2em to account for the TOC's top margin - // ensuring the TOC is 1.5em (24px) from the top of the viewport - // unless .mw-sticky-header-element overrides it. - top: ~'calc( 1.5em - @{top-margin-sidebar-toc_title_inline} )'; + + // 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: 0; + top: ~'calc( 1.5em - @{top-margin-sidebar-toc} )'; // top: 0 } .vector-layout-legacy & { + float: left; clear: both; } } @@ -312,17 +313,18 @@ body { padding-bottom: 82px; } +// FIXME: Delete when .vector-toc-enabled is removed (T310527) // We want it to appear like the sidebar is going into/coming out of // `.mw-page-container`, but we can't use `overflow: hidden` on // `.mw-page-container` because that will cut off the sidebar. Therefore, we // calculate the maximum distance from the start of `mw-page-container` to the // start of the sidebar. -#mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container .mw-sidebar { +@{selector-workspace-container-sidebar-closed} .mw-sidebar { transform: translateX( -( @max-width-page-container - @max-width-workspace-container ) / 2 ); } // Hide sidebar entirely when the checkbox is disabled and the TOC is enabled -.vector-toc-enabled #mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container .mw-sidebar { +.vector-toc-enabled @{selector-workspace-container-sidebar-closed} .mw-sidebar { display: none; } @@ -414,8 +416,6 @@ body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment @{selector-workspace-container-sidebar-open} { #mw-panel { width: 100%; - position: relative; - left: 0; } // !important as we always want to disable the margin-left on these elements