mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-26 00:25:40 +00:00
24055a6752
* Leverage the infrastructure around feature management to handle the page tools pinning and persistence * Make pinnableHeader.js leverage features.js if the data-feature-name attribute is set * Sets tests/.eslintrc.json ecmaVersion to 2018 to enable destructuring in test files. * Adds a isPinned helper method to pinnableElement * Add a logged in requirement so that the pinned feature is disabled for anon users. Bug: T322051 Change-Id: Ib86282216882fa94e37b7088a3f4bd0c1bcf6cd4
63 lines
1.5 KiB
Plaintext
63 lines
1.5 KiB
Plaintext
// Ensure there is only 1 page tools landmark at anytime
|
|
.vector-page-tools-landmark {
|
|
.vector-feature-page-tools-pinned-enabled .vector-page-toolbar-container &,
|
|
.vector-feature-page-tools-pinned-disabled #vector-page-tools-pinned-container & {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.vector-page-tools-pinnable-element {
|
|
.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;
|
|
}
|
|
}
|
|
|
|
// FIXME: Remove the following selector when page tools feature is on by default, needed for LegacyMoreDropdown
|
|
.vector-feature-page-tools-disabled .vector-page-tools-landmark,
|
|
.vector-page-tools-pinnable-element {
|
|
// Ensure collapsible items are visible on lower resolutions
|
|
.vector-more-collapsible-item {
|
|
display: block;
|
|
|
|
@media ( min-width: @min-width-tablet ) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// Make sure pcactions is displayed on lower resolutions (even if .emptyPortlet present)
|
|
.vector-has-collapsible-items {
|
|
@media ( max-width: @max-width-mobile ) {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|