wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-27 17:10:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Page tools styling followup

Browse source 
- Address feedback in https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/870996/10/resources/skins.vector.styles/components/TableOfContentsPinned.less#28
- Avoid handling MainMenuAction styles in PinnableElement.less, move to MainMenu.less
- Reduce top spacing of the language alert
- Allow labels in menus to wrap
- Update TOC line height to match prototype

Bug: T324877
Change-Id: Ic5dc456d6e6126d3ff6cee854e6023cf5cf2595d
This commit is contained in:
bwang 2023-01-06 11:07:29 -06:00
parent 42e5b61b57
commit c298d5d1ea
7 changed files with 32 additions and 12 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",
"maxSize": "11.7kB"
"maxSize": "11.8kB"
},
{
"resourceModule": "skins.vector.legacy.js",

2
resources/common/variables.less
View file

@ -149,6 +149,8 @@
@padding-left-toc: 15px + @padding-right-toc;
@spacing-subsection-toggle: 22px; // @size-toc-subsection-toggle-icon @ 12
@size-toc-subsection-toggle-icon: 1.834em;
// Calculated with: 1.5em (TOC top padding) + @margin-top-pinned-toc = 0.5em (.mw-body padding) + 2.34 (height of #firstHeading)
@margin-top-pinned-toc: @padding-top-content + (@font-size-heading-1 * @line-height-heading) - 1.5em;
// Sidebar
@width-sidebar-px: 220px;

18
resources/skins.vector.styles/components/MainMenu.less
View file

@ -22,10 +22,20 @@
}
.vector-feature-page-tools-enabled .vector-main-menu {
// Match styles of .mw-list-item a in PinnableElement.less
.vector-main-menu-action-opt-out a,
.vector-main-menu-action-lang-alert .vector-main-menu-action-content {
.mixin-vector-dropdown-menu-item();
}
.vector-main-menu-action-opt-out a {
font-weight: bold;
}
.vector-main-menu-action-lang-alert .vector-main-menu-action-content {
padding-top: 0;
}
.vector-language-sidebar-alert {
// Override default .mw-message-box styles
padding: 8px;
@ -39,10 +49,18 @@
background-color: @background-color-secondary--modern;
// Align text with page container
margin-left: -@padding-horizontal-dropdown-menu-item;
// Match styles of .mw-list-item a in PinnableElement.less
.vector-main-menu-action-opt-out a,
.vector-main-menu-action-lang-alert .vector-main-menu-action-content {
padding-left: 0;
padding-right: 0;
}
}
// Main menu when unpinned in the dropdown
#vector-main-menu-unpinned-container .vector-main-menu {
// TODO: Standardize dropdown min and max width
width: 250px;
.vector-language-sidebar-alert {

8
resources/skins.vector.styles/components/PinnableElement.less
View file

@ -12,13 +12,8 @@
.mw-list-item a {
// Mirror styles from Dropdown.less
.mixin-vector-dropdown-menu-item();
white-space: nowrap;
color: @color-link;
}
.vector-main-menu-action-content {
.mixin-vector-dropdown-menu-item();
}
}
// TODO: merge this into the selector above after page tools is enabled everywhere
@ -27,8 +22,7 @@
// (Whereas in a dropdown, the border lines up with the edge of the dropdown container).
.vector-pinnable-header,
.vector-menu-heading,
.mw-list-item a,
.vector-main-menu-action-content {
.mw-list-item a {
padding-left: 0;
padding-right: 0;
}

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

@ -88,7 +88,9 @@
.sidebar-toc-text,
.vector-toc-text {
padding: 4px 0;
.vector-feature-page-tools-disabled & {
padding: 4px 0;
}
.vector-feature-page-tools-enabled & {
// Match .mixin-vector-dropdown-menu-item() vertical padding
@ -102,7 +104,10 @@
.vector-toc-list {
margin: 0;
list-style: none;
line-height: 18px;
.vector-feature-page-tools-disabled & {
line-height: 18px;
}
}
.sidebar-toc-list-item,

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

@ -24,8 +24,8 @@
}
.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;
// Align TOC with bottom of title when main menu is not pinned but the TOC is
margin-top: @margin-top-pinned-toc;
}
// FIXME: Remove all .sidebar-toc selectors after I5b9228380f5c4674ef424d33127a5cb4010822da is in prod for 5 days

1
resources/skins.vector.styles/components/UserLinks.less
View file

@ -39,6 +39,7 @@
.vector-menu-content {
left: auto;
right: 0;
// TODO: Standardize dropdown min and max width
min-width: 200px;
}