From 9db08ef300cced90e863c6535a5d91f532c9b2c4 Mon Sep 17 00:00:00 2001 From: bwang Date: Thu, 22 Dec 2022 17:10:29 -0600 Subject: [PATCH] Update TOC spacing to match spec Bug: T324877 Change-Id: Ifb51dd8b37c8489cd1e9e74ec50e6d2e84411845 --- bundlesize.config.json | 2 +- resources/common/variables.less | 1 + .../components/PinnableHeader.less | 9 +++--- .../components/TableOfContents.less | 29 +++++++++++++++---- .../components/TableOfContentsPinned.less | 20 ++++++++++--- .../components/TableOfContentsUnpinned.less | 14 +++++++++ 6 files changed, 60 insertions(+), 15 deletions(-) diff --git a/bundlesize.config.json b/bundlesize.config.json index 5645df80b..16b5d188c 100644 --- a/bundlesize.config.json +++ b/bundlesize.config.json @@ -5,7 +5,7 @@ }, { "resourceModule": "skins.vector.styles", - "maxSize": "11.6kB" + "maxSize": "11.7kB" }, { "resourceModule": "skins.vector.legacy.js", diff --git a/resources/common/variables.less b/resources/common/variables.less index 057802c6a..5e3e2e1de 100644 --- a/resources/common/variables.less +++ b/resources/common/variables.less @@ -147,6 +147,7 @@ // a 15px spacing without clipping the chevron icon // https://phabricator.wikimedia.org/T312156#8095894 @padding-left-toc: 15px + @padding-right-toc; +@spacing-subsection-toggle: 22px; // @size-toc-subsection-toggle-icon @ 12 @size-toc-subsection-toggle-icon: 1.834em; // Sidebar diff --git a/resources/skins.vector.styles/components/PinnableHeader.less b/resources/skins.vector.styles/components/PinnableHeader.less index 1a60d55f8..9a5f8a435 100644 --- a/resources/skins.vector.styles/components/PinnableHeader.less +++ b/resources/skins.vector.styles/components/PinnableHeader.less @@ -10,10 +10,11 @@ .vector-page-tools, .sidebar-toc, .vector-toc { - .vector-pinned-container & .vector-pinnable-header { - // Align TOC and Page Tools pinnable header border with page toolbar border - // 40px (page toolbar height) - 17px (pinnable header height) - 6px (pinnable header bottom padding) = 17px - padding-top: 17px; + .vector-feature-page-tools-enabled .vector-pinned-container & .vector-pinnable-header { + // Match styles with tabs in page toolbar to ensure TOC and Page Tools pinnable headers + // align with page toolbar border + padding: @padding-vertical-tabs; + margin-bottom: -1px; } } diff --git a/resources/skins.vector.styles/components/TableOfContents.less b/resources/skins.vector.styles/components/TableOfContents.less index 1a269aebf..53dfc2343 100644 --- a/resources/skins.vector.styles/components/TableOfContents.less +++ b/resources/skins.vector.styles/components/TableOfContents.less @@ -4,17 +4,20 @@ .sidebar-toc, .vector-toc { max-height: 75vh; - padding: @padding-vertical-toc @padding-right-toc @padding-vertical-toc @padding-left-toc; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; background-color: @background-color-page-container; - .vector-feature-page-tools-disabled & .vector-toc-pinnable-header { - // Override default pinnable header styles - padding: 0 0 12px 0; - border: 0; - line-height: initial; + .vector-feature-page-tools-disabled & { + padding: @padding-vertical-toc @padding-right-toc @padding-vertical-toc @padding-left-toc; + + .vector-toc-pinnable-header { + // Override default pinnable header styles + padding: 0 0 12px 0; + border: 0; + line-height: initial; + } } .vector-pinnable-header-label { @@ -40,6 +43,11 @@ transition: @transition-duration-base; color: transparent; cursor: pointer; + + .vector-feature-page-tools-enabled & { + // Vertically center the icon with the text + margin-top: 2px; + } } .sidebar-toc-link, @@ -81,6 +89,11 @@ .sidebar-toc-text, .vector-toc-text { padding: 4px 0; + + .vector-feature-page-tools-enabled & { + // Match .mixin-vector-dropdown-menu-item() vertical padding + padding: @padding-vertical-dropdown-menu-item 0; + } } .sidebar-toc-contents, @@ -99,6 +112,10 @@ list-style-type: none; padding-left: 8px; + .vector-feature-page-tools-enabled & { + margin: 0; + } + &.sidebar-toc-level-1, &.vector-toc-level-1 { padding-left: 0; diff --git a/resources/skins.vector.styles/components/TableOfContentsPinned.less b/resources/skins.vector.styles/components/TableOfContentsPinned.less index 2799588b0..c01ad1e16 100644 --- a/resources/skins.vector.styles/components/TableOfContentsPinned.less +++ b/resources/skins.vector.styles/components/TableOfContentsPinned.less @@ -18,19 +18,31 @@ padding-top: 1.5em; } - .vector-feature-page-tools-disabled.vector-toc-pinned @{selector-main-menu-closed} ~ .mw-table-of-contents-container &, - .vector-feature-page-tools-enabled.vector-toc-pinned.vector-feature-main-menu-pinned-disabled & { + .vector-feature-page-tools-disabled.vector-toc-pinned @{selector-main-menu-closed} ~ .mw-table-of-contents-container & { // Needed to align TOC with bottom of title, 1.5em padding + 1.5em margin = 3em margin-top: 1.5em; } + .vector-feature-page-tools-enabled.vector-toc-pinned.vector-feature-main-menu-pinned-disabled & { + // Needed to align TOC with bottom of title, 1.5em (24px) padding + 22px margin = ~46px (height of page titlebar) + margin-top: 22px; + } + // FIXME: Remove all .sidebar-toc selectors after I5b9228380f5c4674ef424d33127a5cb4010822da is in prod for 5 days .sidebar-toc, .sidebar-toc:after, .vector-toc, .vector-toc:after { - // Align the left edge of the TOC text with the main menu button icon. - margin-left: -@padding-left-toc; + .vector-feature-page-tools-disabled & { + // Align the left edge of the TOC text with the main menu button icon. + margin-left: -@padding-left-toc; + } + + .vector-feature-page-tools-enabled & { + // Align the left edge of the TOC text with the main menu button icon. + margin-left: -@spacing-subsection-toggle; + padding-left: @spacing-subsection-toggle; + } } // T302076: Add fade scrollable indicator when TOC is in sidebar diff --git a/resources/skins.vector.styles/components/TableOfContentsUnpinned.less b/resources/skins.vector.styles/components/TableOfContentsUnpinned.less index edab106ad..afdac0612 100644 --- a/resources/skins.vector.styles/components/TableOfContentsUnpinned.less +++ b/resources/skins.vector.styles/components/TableOfContentsUnpinned.less @@ -7,6 +7,20 @@ // Use calc so that the same max width can apply even when the TOC is in different containers @max-width-collapsed-toc: 0.85 * @max-width-content-container; // 51em +.vector-feature-page-tools-enabled #vector-page-titlebar-toc-unpinned-container, +.vector-feature-page-tools-enabled #vector-sticky-header-toc-unpinned-container { + .vector-toc { + .vector-pinnable-header { + padding-left: @padding-horizontal-dropdown-menu-item + @spacing-subsection-toggle; + } + + .vector-toc-contents { + padding-right: @padding-horizontal-dropdown-menu-item; + padding-left: @padding-horizontal-dropdown-menu-item + @spacing-subsection-toggle; + } + } +} + .mixin-toc-dropdown-button() { display: none; margin-right: 4px;