wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-30 18:35:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update TOC spacing to match spec

Browse source 
Bug: T324877
Change-Id: Ifb51dd8b37c8489cd1e9e74ec50e6d2e84411845
This commit is contained in:
bwang 2022-12-22 17:10:29 -06:00
parent 8e4da83908
commit 9db08ef300
6 changed files with 60 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
bundlesize.config.json
View file

@ -5,7 +5,7 @@
}, },
{ {
"resourceModule": "skins.vector.styles", "resourceModule": "skins.vector.styles",
"maxSize": "11.6kB" "maxSize": "11.7kB"
}, },
{ {
"resourceModule": "skins.vector.legacy.js", "resourceModule": "skins.vector.legacy.js",

1
resources/common/variables.less
View file

@ -147,6 +147,7 @@
// a 15px spacing without clipping the chevron icon // a 15px spacing without clipping the chevron icon
// https://phabricator.wikimedia.org/T312156#8095894 // https://phabricator.wikimedia.org/T312156#8095894
@padding-left-toc: 15px + @padding-right-toc; @padding-left-toc: 15px + @padding-right-toc;
@spacing-subsection-toggle: 22px; // @size-toc-subsection-toggle-icon @ 12
@size-toc-subsection-toggle-icon: 1.834em; @size-toc-subsection-toggle-icon: 1.834em;
// Sidebar // Sidebar

9
resources/skins.vector.styles/components/PinnableHeader.less
View file

@ -10,10 +10,11 @@
.vector-page-tools, .vector-page-tools,
.sidebar-toc, .sidebar-toc,
.vector-toc { .vector-toc {
.vector-pinned-container & .vector-pinnable-header { .vector-feature-page-tools-enabled .vector-pinned-container & .vector-pinnable-header {
// Align TOC and Page Tools pinnable header border with page toolbar border // Match styles with tabs in page toolbar to ensure TOC and Page Tools pinnable headers
// 40px (page toolbar height) - 17px (pinnable header height) - 6px (pinnable header bottom padding) = 17px // align with page toolbar border
padding-top: 17px; padding: @padding-vertical-tabs;
margin-bottom: -1px;
} }
} }

29
resources/skins.vector.styles/components/TableOfContents.less
View file

@ -4,17 +4,20 @@
.sidebar-toc, .sidebar-toc,
.vector-toc { .vector-toc {
max-height: 75vh; max-height: 75vh;
padding: @padding-vertical-toc @padding-right-toc @padding-vertical-toc @padding-left-toc;
box-sizing: border-box; box-sizing: border-box;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
background-color: @background-color-page-container; background-color: @background-color-page-container;
.vector-feature-page-tools-disabled & .vector-toc-pinnable-header { .vector-feature-page-tools-disabled & {
// Override default pinnable header styles padding: @padding-vertical-toc @padding-right-toc @padding-vertical-toc @padding-left-toc;
padding: 0 0 12px 0;
border: 0; .vector-toc-pinnable-header {
line-height: initial; // Override default pinnable header styles
padding: 0 0 12px 0;
border: 0;
line-height: initial;
}
} }
.vector-pinnable-header-label { .vector-pinnable-header-label {
@ -40,6 +43,11 @@
transition: @transition-duration-base; transition: @transition-duration-base;
color: transparent; color: transparent;
cursor: pointer; cursor: pointer;
.vector-feature-page-tools-enabled & {
// Vertically center the icon with the text
margin-top: 2px;
}
} }
.sidebar-toc-link, .sidebar-toc-link,
@ -81,6 +89,11 @@
.sidebar-toc-text, .sidebar-toc-text,
.vector-toc-text { .vector-toc-text {
padding: 4px 0; 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, .sidebar-toc-contents,
@ -99,6 +112,10 @@
list-style-type: none; list-style-type: none;
padding-left: 8px; padding-left: 8px;
.vector-feature-page-tools-enabled & {
margin: 0;
}
&.sidebar-toc-level-1, &.sidebar-toc-level-1,
&.vector-toc-level-1 { &.vector-toc-level-1 {
padding-left: 0; padding-left: 0;

20
resources/skins.vector.styles/components/TableOfContentsPinned.less
View file

@ -18,19 +18,31 @@
padding-top: 1.5em; 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-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 & {
// Needed to align TOC with bottom of title, 1.5em padding + 1.5em margin = 3em // Needed to align TOC with bottom of title, 1.5em padding + 1.5em margin = 3em
margin-top: 1.5em; 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 // FIXME: Remove all .sidebar-toc selectors after I5b9228380f5c4674ef424d33127a5cb4010822da is in prod for 5 days
.sidebar-toc, .sidebar-toc,
.sidebar-toc:after, .sidebar-toc:after,
.vector-toc, .vector-toc,
.vector-toc:after { .vector-toc:after {
// Align the left edge of the TOC text with the main menu button icon. .vector-feature-page-tools-disabled & {
margin-left: -@padding-left-toc; // 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 // T302076: Add fade scrollable indicator when TOC is in sidebar

14
resources/skins.vector.styles/components/TableOfContentsUnpinned.less
View file

@ -7,6 +7,20 @@
// Use calc so that the same max width can apply even when the TOC is in different containers // 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 @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() { .mixin-toc-dropdown-button() {
display: none; display: none;
margin-right: 4px; margin-right: 4px;