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

Merge "[Optimization] Remove bottom dock styles from critical path"

Browse source
This commit is contained in:
jenkins-bot 2024-06-17 16:13:27 +00:00 committed by Gerrit Code Review
parent e7d1a99a68 426ff06241
commit bbc7078df5
3 changed files with 46 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
resources/skins.vector.js/bottomDock.less Normal file
View file

@ -0,0 +1,45 @@
.client-js .vector-settings {
display: block;
position: fixed;
bottom: 8px;
right: 8px;
z-index: @z-index-stacking-1;
ul {
padding: 0;
list-style: none;
display: flex;
flex-direction: column-reverse;
align-items: center;
gap: 8px 8px;
}
}
/**
* Limited width toggle - a button which lets users change the layout from
* a fixed-width content column to a layout where the content takes up the
* full window width.
* FIXME: Can be removed when wgVectorAppearance has been removed.
*/
// By default, toggle should be hidden unless the breakpoint below is reached.
.vector-limited-width-toggle.cdx-button,
.vector-limited-width-popup {
display: none;
}
// On pages that have $wgVectorMaxWidthOptions['exclude'] true,
// the toggle should be hidden. This rule overrides the media query below.
html.vector-feature-limited-width-clientpref--excluded .vector-limited-width-toggle.cdx-button {
display: none;
}
// Note on certain pages the control will have no effect e.g. Special:RecentChanges
// Defining this at 1400px is a product decision so do not change it
// (more context at https://phabricator.wikimedia.org/T326887#8540889)
@media ( min-width: 1400px ) {
.vector-limited-width-toggle.cdx-button,
.vector-limited-width-popup {
display: block;
}
}

1
resources/skins.vector.js/index.less
View file

@ -1,3 +1,4 @@
@import 'tableOfContents.less';
@import 'popupNotification.less';
@import 'stickyHeader.less';
@import 'bottomDock.less';

44
resources/skins.vector.styles/components/BottomDock.less
View file

@ -1,47 +1,3 @@
.client-nojs .vector-settings {
display: none;
}
.vector-settings {
position: fixed;
bottom: 8px;
right: 8px;
z-index: @z-index-stacking-1;
ul {
padding: 0;
list-style: none;
display: flex;
flex-direction: column-reverse;
align-items: center;
gap: 8px 8px;
}
}
/**
* Limited width toggle - a button which lets users change the layout from
* a fixed-width content column to a layout where the content takes up the
* full window width.
*/
// By default, toggle should be hidden unless the breakpoint below is reached.
.vector-limited-width-toggle.cdx-button,
.vector-limited-width-popup {
display: none;
}
// On pages that have $wgVectorMaxWidthOptions['exclude'] true,
// the toggle should be hidden. This rule overrides the media query below.
html.vector-feature-limited-width-clientpref--excluded .vector-limited-width-toggle.cdx-button {
display: none;
}
// Note on certain pages the control will have no effect e.g. Special:RecentChanges
// Defining this at 1400px is a product decision so do not change it
// (more context at https://phabricator.wikimedia.org/T326887#8540889)
@media ( min-width: 1400px ) {
.vector-limited-width-toggle.cdx-button,
.vector-limited-width-popup {
display: block;
}
}