wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-09-24 02:39:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update dropdown and pinnable element styles to match spec

Browse source 
- Generalize spacing for pinnable header and menu items under PinnableHeader.less and PinnableElement.less
- Impacts main menu, page tools & personal tools

Bug: T324877
Change-Id: I4042e5c1957d64797f21146f687ef960721299ce
This commit is contained in:
bwang 2022-12-19 10:27:54 -06:00
parent 7f2118e756
commit fe105edcdb
11 changed files with 125 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
includes/templates/MainMenu.mustache
View file

@ -1,5 +1,6 @@
{{! Use `.vector-main-menu` to target styles at this element}}
{{>PinnableElement/Open}}
{{^is-page-tools-enabled}}
{{#data-portlets-first}}{{>MainMenuGroup}}{{/data-portlets-first}}
{{#data-main-menu-action}}{{>MainMenuAction}}{{/data-main-menu-action}}
{{#array-portlets-rest}}{{>MainMenuGroup}}{{/array-portlets-rest}}
@ -8,4 +9,16 @@
{{/is-language-in-content}}
{{! T295555 Add language switch alert message. }}
{{#data-vector-language-switch-alert}}{{>MainMenuAction}}{{/data-vector-language-switch-alert}}
{{/is-page-tools-enabled}}
{{#is-page-tools-enabled}}
{{#data-portlets-first}}{{>Menu}}{{/data-portlets-first}}
{{#data-main-menu-action}}{{>MainMenuAction}}{{/data-main-menu-action}}
{{#array-portlets-rest}}{{>Menu}}{{/array-portlets-rest}}
{{^is-language-in-content}}
{{#data-languages}}{{>Menu}}{{/data-languages}}
{{/is-language-in-content}}
{{! T295555 Add language switch alert message. }}
{{#data-vector-language-switch-alert}}{{>MainMenuAction}}{{/data-vector-language-switch-alert}}
{{/is-page-tools-enabled}}
{{>PinnableElement/Close}}

9
resources/common/mixins.less
View file

@ -32,11 +32,16 @@
margin-left: -1px;
}
.mixin-vector-dropdown-menu-item() {
// Remove this mixin after VectorPageTools is enabled everywhere
.mixin-vector-dropdown-menu-item-deprecated() {
min-height: @height-dropdown-menu-item;
padding: @padding-dropdown-menu-item;
}
.mixin-vector-dropdown-menu-item() {
display: flex;
align-items: center;
padding: @padding-dropdown-menu-item;
padding: @padding-vertical-dropdown-menu-item @padding-horizontal-dropdown-menu-item;
font-size: @font-size-dropdown;
&:visited {

3
resources/common/variables.less
View file

@ -129,7 +129,10 @@
// Dropdowns
@height-dropdown-menu-item: unit( 32 / @font-size-browser, rem );
// Remove this variable after VectorPageTools is enabled everywhere
@padding-dropdown-menu-item: 0 12px;
@padding-vertical-dropdown-menu-item: 6px;
@padding-horizontal-dropdown-menu-item: 14px;
@font-size-dropdown: unit( @font-size-base, rem ); // Equals `0.875rem`.
// Main menu

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

@ -37,5 +37,9 @@
.mixin-vector-dropdown-menu-item();
white-space: nowrap;
color: @color-link;
.vector-feature-page-tools-disabled & {
.mixin-vector-dropdown-menu-item-deprecated();
}
}
}

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

@ -12,6 +12,44 @@
}
}
.vector-main-menu {
box-sizing: border-box;
// Hide #p-navigation label
#p-navigation .vector-menu-heading {
display: none;
}
}
.vector-feature-page-tools-enabled .vector-main-menu {
.vector-main-menu-action-opt-out a {
font-weight: bold;
}
.vector-language-sidebar-alert {
// Override default .mw-message-box styles
padding: 8px;
margin: 0;
}
}
// Main menu when pinned in the sidebar
.vector-feature-page-tools-enabled #vector-main-menu-pinned-container .vector-main-menu {
padding: @padding-vertical-dropdown-menu-item @padding-horizontal-dropdown-menu-item;
background-color: @background-color-secondary--modern;
// Align text with page container
margin-left: -@padding-horizontal-dropdown-menu-item;
}
// Main menu when unpinned in the dropdown
#vector-main-menu-unpinned-container .vector-main-menu {
width: 250px;
.vector-language-sidebar-alert {
margin-bottom: 6px;
}
}
.vector-feature-page-tools-disabled {
@media ( max-width: @max-width-tablet ) {
.vector-main-menu {
@ -25,18 +63,7 @@
}
}
.vector-main-menu {
box-sizing: border-box;
// Hide #p-navigation label
#p-navigation .vector-menu-heading {
display: none;
}
}
// Main menu when pinned in the sidebar
.vector-feature-page-tools-disabled .vector-main-menu,
#vector-main-menu-pinned-container .vector-main-menu {
.vector-feature-page-tools-disabled .vector-main-menu {
// Temporary magic number, will be calculated after TOC specs are finalized
padding: 12px 19px 12px 9px;
background-color: @background-color-secondary--modern;
@ -47,35 +74,7 @@
}
}
// Main menu when unpinned in the dropdown
#vector-main-menu-unpinned-container .vector-main-menu {
width: 250px;
display: flex;
flex-direction: column;
.vector-menu-heading,
.vector-main-menu-group {
margin: 0;
}
// Main menu when unpinned in the dropdown
.vector-main-menu-unpinned-container & {
width: 250px;
display: flex;
flex-direction: column;
.vector-menu-heading,
.vector-main-menu-group {
margin: 0;
}
.vector-menu-content {
margin-left: 0;
}
}
}
.vector-main-menu-action {
.vector-feature-page-tools-disabled .vector-main-menu-action {
// Styles for MainMenuAction template.
.vector-main-menu-action-item {
// Align with the portal heading/links

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

@ -1,8 +1,8 @@
@import '../../common/variables.less';
@import 'mediawiki.mixins.less';
.vector-main-menu-group,
.vector-main-menu-action-item {
.vector-feature-page-tools-disabled .vector-main-menu-group,
.vector-feature-page-tools-disabled .vector-main-menu-action-item {
margin: 0 @margin-end-portal 0 @margin-start-portal;
padding: 0.25em 0;
direction: ltr;

28
resources/skins.vector.styles/components/PageTools.less
View file

@ -7,37 +7,9 @@
}
.vector-page-tools {
.vector-menu-heading {
.mixin-vector-dropdown-menu-item();
.mixin-vector-menu-heading();
}
.mw-list-item {
a {
.mixin-vector-dropdown-menu-item();
white-space: nowrap;
color: @color-link;
}
}
/**
* Styles applying to all items in the pinned column.
*/
#vector-page-tools-pinned-container & {
padding-left: 45px;
width: 140px;
// Make the heading border line up with the edge of the text
// (Whereas in a dropdown, the border lines up with the edge of the dropdown container).
.vector-menu-heading,
.mw-list-item a {
padding-left: 0;
padding-right: 0;
}
}
.vector-pinnable-header {
padding: @padding-vertical-tabs;
}
}

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

@ -1,13 +1,35 @@
.vector-feature-page-tools-enabled .vector-pinnable-element {
.vector-menu {
& > * + * {
// Apply top border to every children of pinnable elements except the first
border-top: @border-width-base @border-style-base @colorGray14;
}
// Remove the border for the first .vector-menu since
// it already exists on the pinnable header, or, when there's no
// pinnable header, a border exists on the dropdown container.
.vector-menu:first-child,
.vector-pinnable-header + .vector-menu {
border: 0;
.vector-menu-heading {
.mixin-vector-dropdown-menu-item();
.mixin-vector-menu-heading();
}
.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
.vector-pinned-container .vector-pinnable-element {
// Make the heading border line up with the edge of the text
// (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 {
padding-left: 0;
padding-right: 0;
}
}

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

@ -1,12 +1,18 @@
.vector-pinnable-header {
border-bottom: @border-width-base @border-style-base @colorGray14;
.vector-feature-page-tools-enabled & {
.mixin-vector-dropdown-menu-item();
// Override display: flex applied by .mixin-vector-dropdown-menu-item()
display: block;
}
}
.vector-menu-dropdown .vector-pinnable-header {
// Match dropdown item styles
// Line height needed for vertically centering pinnable header
line-height: @height-dropdown-menu-item;
padding: @padding-dropdown-menu-item;
.vector-page-tools,
.sidebar-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-pinnable-header-label {

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

@ -27,7 +27,8 @@
padding-top: 1.5em;
}
.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
margin-top: 1.5em;
}
@ -64,7 +65,7 @@
overflow-x: hidden;
background-color: @background-color-page-container;
.vector-toc-pinnable-header {
.vector-feature-page-tools-disabled & .vector-toc-pinnable-header {
// Override default pinnable header styles
padding: 0 0 12px 0;
border: 0;

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

@ -55,6 +55,10 @@
.mw-portlet-personal .mw-list-item {
a {
.mixin-vector-dropdown-menu-item();
.vector-feature-page-tools-disabled & {
.mixin-vector-dropdown-menu-item-deprecated();
}
white-space: nowrap;
color: @color-link;
}
@ -115,6 +119,14 @@
// Anon editor notice i.e. "Pages for logged out editors".
.vector-user-menu-anon-editor {
.mixin-vector-dropdown-menu-item();
.vector-feature-page-tools-disabled & {
.mixin-vector-dropdown-menu-item-deprecated();
}
.vector-feature-page-tools-enabled & p {
margin: 0;
}
color: @color-base--subtle;
a:before {