wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-09-23 10:21:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add generic classes to pinnable container

Browse source 
Bug: T324877
Change-Id: Iab94f9f600f8e6d032ad70d6b8e502686977441c
This commit is contained in:
bwang 2022-12-19 11:40:17 -06:00
parent bcd382648b
commit a348db9969
8 changed files with 29 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
includes/templates/ColumnEnd.mustache
View file

@ -2,6 +2,7 @@
<nav class="vector-page-tools-landmark" aria-label="{{msg-tooltip-p-cactions}}">
{{#data-page-tools}}
{{>PinnableContainer/Pinned/Open}}
{{! Use `#vector-page-tools-pinned-container .vector-page-tools` to target styles at this element}}
{{#is-pinned}}{{>PageTools}}{{/is-pinned}}
{{>PinnableContainer/Close}}
{{/data-page-tools}}

2
includes/templates/MainMenuDropdown.mustache
View file

@ -1,7 +1,7 @@
{{#data-main-menu-dropdown}}{{>Dropdown/Open}}{{/data-main-menu-dropdown}}
{{#data-main-menu}}
{{>PinnableContainer/Unpinned/Open}}
{{! Use `.vector-main-menu-unpinned-container .vector-main-menu` to target styles at this element}}
{{! Use `#vector-main-menu-unpinned-container .vector-main-menu` to target styles at this element}}
{{^is-pinned}}{{>MainMenu}}{{/is-pinned}}
{{>PinnableContainer/Close}}
{{/data-main-menu}}

2
includes/templates/MainMenuPinned.mustache
View file

@ -17,7 +17,7 @@
{{#is-page-tools-enabled}}
{{#data-main-menu}}
{{>PinnableContainer/Pinned/Open}}
{{! Use `.vector-main-menu-pinned-container .vector-main-menu` to target styles at this element}}
{{! Use `#vector-main-menu-pinned-container .vector-main-menu` to target styles at this element}}
{{#is-pinned}}{{>MainMenu}}{{/is-pinned}}
{{>PinnableContainer/Close}}
{{/data-main-menu}}

1
includes/templates/PageToolbar.mustache
View file

@ -17,6 +17,7 @@
{{#data-page-tools-dropdown}}{{>Dropdown/Open}}{{/data-page-tools-dropdown}}
{{#data-page-tools}}
{{>PinnableContainer/Unpinned/Open}}
{{! Use `#vector-page-tools-unpinned-container .vector-page-tools` to target styles at this element}}
{{^is-pinned}}{{>PageTools}}{{/is-pinned}}
{{>PinnableContainer/Close}}
{{/data-page-tools}}

2
includes/templates/PinnableContainer/Pinned/Open.mustache
View file

@ -1 +1 @@
<div id="{{id}}-pinned-container" class="{{id}}-pinned-container">
<div id="{{id}}-pinned-container" class="vector-pinned-container">

2
includes/templates/PinnableContainer/Unpinned/Open.mustache
View file

@ -1 +1 @@
<div id="{{id}}-unpinned-container" class="{{id}}-unpinned-container">
<div id="{{id}}-unpinned-container" class="vector-unpinned-container">

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

@ -32,18 +32,30 @@
#p-navigation .vector-menu-heading {
display: none;
}
}
// Main menu when pinned in the sidebar
.vector-feature-page-tools-disabled &,
.vector-main-menu-pinned-container & {
// Temporary magic number, will be calculated after TOC specs are finalized
padding: 12px 19px 12px 9px;
background-color: @background-color-secondary--modern;
// Main menu when pinned in the sidebar
.vector-feature-page-tools-disabled .vector-main-menu,
#vector-main-menu-pinned-container .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;
@media ( min-width: @min-width-desktop ) {
// Magic number from the edge of the main menu to the start of the main menu text.
margin-left: -28px;
}
@media ( min-width: @min-width-desktop ) {
// Magic number from the edge of the main menu to the start of the main menu text.
margin-left: -28px;
}
}
// 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

2
tests/jest/__snapshots__/stickyHeader.test.js.snap
View file

@ -19,7 +19,7 @@ exports[`Sticky header renders 1`] = `
</label>
<div class=\\"vector-menu-content\\">
<div id=\\"vector-sticky-header-toc-unpinned-container\\" class=\\"vector-sticky-header-toc-unpinned-container\\">
<div id=\\"vector-sticky-header-toc-unpinned-container\\" class=\\"vector-unpinned-container\\">
</div>
</div>
</div> </div>