From 88d4aef08865ee111c22aaf0ea9deb550ced0dee Mon Sep 17 00:00:00 2001 From: bwang Date: Fri, 9 Sep 2022 11:56:44 -0500 Subject: [PATCH] Follow-up: Clean up sticky header and collapsed TOC styles Bug: T316056 Change-Id: I4c803bfd820aeb7270afa65cf8412415b437ff42 --- resources/common/variables.less | 3 - .../components/StickyHeader.less | 72 +++++++++---------- .../components/TableOfContentsCollapsed.less | 54 +++++++------- 3 files changed, 62 insertions(+), 67 deletions(-) diff --git a/resources/common/variables.less b/resources/common/variables.less index 9047c38a6..9d71444f9 100644 --- a/resources/common/variables.less +++ b/resources/common/variables.less @@ -140,9 +140,6 @@ @width-sidebar-px: 220px; @width-sidebar-px-wide: 244px; -// TOC -@sidebar-toc-selector: ~'.mw-table-of-contents-container .sidebar-toc'; - // Search @max-width-search: unit( 500px / @font-size-browser / @font-size-base, em ); // 35.71428571em @ 16 & 0.875em T270202 @min-width-search-button: 28px; diff --git a/resources/skins.vector.styles/components/StickyHeader.less b/resources/skins.vector.styles/components/StickyHeader.less index da3a06e2b..d759aff05 100644 --- a/resources/skins.vector.styles/components/StickyHeader.less +++ b/resources/skins.vector.styles/components/StickyHeader.less @@ -12,7 +12,6 @@ right: 0; z-index: @z-index-header; transition: @transition-sticky-header; - display: none; align-items: center; margin: 0 auto; background: @background-color-base; @@ -28,24 +27,10 @@ max-width: @max-width-page-container + ( @padding-horizontal-page-container-desktop-wide * 2 ); } - // Hide sticky header and it's children until visible class is applied to the body - .client-js.vector-sticky-header-enabled :not( .vector-sticky-header-visible ) & { - transform: translateY( -100% ); - - > div { - display: none; - } - } - - // Hide sticky header for no-js users - .client-nojs & { - display: none; - } - - // T298836 Only show sticky header at higher resolutions. - @media ( min-width: @min-width-desktop ) { - display: flex; - } + // Hide sticky header until visible class is applied to the body + display: none; + transform: translateY( -100% ); + opacity: 0; // // Layout @@ -81,15 +66,15 @@ min-width: 0; } - // Hide TOC in sticky header by default &-toc-container { display: none; - } - - .vector-toc-collapsed &-toc-container { - display: block; position: relative; margin-left: -@icon-padding-md; + + // Only show TOC in sticky header when collapsed class is present + .vector-toc-collapsed & { + display: block; + } } &-context-bar-primary { @@ -146,7 +131,8 @@ } } -@media ( min-width: @min-width-tablet ) { +// T298836 Sticky header is only shown at higher resolutions +@media ( min-width: @min-width-desktop ) { .client-js.vector-sticky-header-enabled { // T290518: When the sticky header is enabled (feature flag is on, js is // enabled, and viewport is at higher resolutions), add scroll padding to the @@ -159,21 +145,29 @@ // sticky header isn't visible yet but we still need scroll padding applied // (e.g. when the user navigates to a page with a hash fragment in the URI). scroll-padding-top: @height-sticky-header; - } -} -// T298836 Sticky header is only shown at higher resolutions -@media ( min-width: @min-width-desktop ) { - .client-js .vector-sticky-header-visible { - // T289817 Override other sticky element offsets to ensure that other - // sticky elements (i.e. table headers) appear below the sticky header. - // - // @stable See the Integration notes for developers section at - // https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improvements/Features/Sticky_Header - .mw-sticky-header-element, - .charts-stickyhead th { - /* stylelint-disable-next-line declaration-no-important */ - top: @height-sticky-header !important; + .vector-sticky-header { + // Sticky header is only enabled for js users and when feature flag is enabled + display: flex; + } + + .vector-sticky-header-visible { + .vector-sticky-header { + // Show sticky header with transition when visible class is applied to the body + opacity: 1; + transform: translateY( 0 ); + } + + // T289817 Override other sticky element offsets to ensure that other + // sticky elements (i.e. table headers) appear below the sticky header. + // + // @stable See the Integration notes for developers section at + // https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improvements/Features/Sticky_Header + .mw-sticky-header-element, + .charts-stickyhead th { + /* stylelint-disable-next-line declaration-no-important */ + top: @height-sticky-header !important; + } } } } diff --git a/resources/skins.vector.styles/components/TableOfContentsCollapsed.less b/resources/skins.vector.styles/components/TableOfContentsCollapsed.less index 2c8f084a0..c992b4de0 100644 --- a/resources/skins.vector.styles/components/TableOfContentsCollapsed.less +++ b/resources/skins.vector.styles/components/TableOfContentsCollapsed.less @@ -34,7 +34,7 @@ } } -// Override button styles for the "move to sidebar/hide" links. Default hide. +// Styles for the "move to sidebar/hide" buttons, hidden by default. .vector-toc-collapse-button, .vector-toc-uncollapse-button { display: none; @@ -59,7 +59,7 @@ } } -// Shared collapsed TOC styles, applies across all collapsed cases (page title, floating, sticky header) +// Shared collapsed TOC styles, applies across all collapsed cases (header, floating, sticky header) .mixin-toc-collapsed() { margin: 0; // T316056 Remove TOC menu fixed width and apply max-width @@ -68,18 +68,18 @@ max-width: ~'min( @{max-width-collapsed-toc}, 75vw )'; // 51em } -// Applies when TOC is collapsed in it's original DOM location -// Doesn't apply to the collapsed TOC in the sticky header -.mixin-toc-collapsed-unmoved() { +// TOC styles when collapsed to header +.mixin-toc-collapsed-header() { #vector-toc-collapsed-button { display: block; } .vector-sticky-toc-container { + // Override TOC container's sticky positioning position: relative; } - @{sidebar-toc-selector} { + .sidebar-toc { .mixin-toc-collapsed(); display: none; position: absolute; @@ -89,12 +89,13 @@ border: @border-width-base @border-style-base @border-color-base; } - @{selector-collapsed-toc-open} ~ @{sidebar-toc-selector} { + @{selector-collapsed-toc-open} ~ .mw-table-of-contents-container .sidebar-toc { // Hide the TOC when the button is not checked display: block; } } +// TOC styles when collapsed to floating button .mixin-toc-collapsed-floating() { #vector-toc-collapsed-button { position: fixed; @@ -111,14 +112,18 @@ } @media ( max-width: @max-width-tablet ) { - // Collapsed to page title on narrow screens - .mixin-toc-collapsed-unmoved(); + // + // Collapsed to header on narrow screens + // + .mixin-toc-collapsed-header(); - @{sidebar-toc-selector} { + .sidebar-toc { left: -@icon-padding-md; } - // Collapsed to floating icon on narrow screens when below page + // + // Collapsed to floating button on narrow screens when below page title + // .vector-below-page-title { .mixin-toc-collapsed-floating(); } @@ -127,29 +132,28 @@ @media ( min-width: @min-width-desktop ) { @supports ( display: grid ) { .client-js { - // Collapsed to page title - .vector-toc-collapsed { - .mixin-toc-collapsed-unmoved(); + .vector-toc-collapsed:not( .vector-sticky-header-visible ) { + // + // Collapsed to header + // + .mixin-toc-collapsed-header(); .mw-table-of-contents-container { grid-area: content; } - // Collapsed to floating icon - // when sticky header not visible and below page title - body:not( .vector-sticky-header-visible ).vector-below-page-title& { + // + // Collapsed to floating icon when below page title + // + .vector-below-page-title& { .mixin-toc-collapsed-floating(); } - - .vector-toc-uncollapse-button { - display: inline-block; - } } - .vector-toc-not-collapsed { - .vector-toc-collapse-button { - display: inline-block; - } + // Show the "move to sidebar/hide" buttons + .vector-toc-collapsed .vector-toc-uncollapse-button, + .vector-toc-not-collapsed .vector-toc-collapse-button { + display: inline-block; } } }