wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-12-01 02:37:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

Align mw.notify() alerts to avoid overlapping sticky header

Browse source 
Aligns the notifications produced by `mw.notify` so that they don't
obstruct the sticky header or usage of elements inside the sticky header.

Bug: T260338
Change-Id: If00f27ec19e71f6803231678fbb733ffaa6c6aaf
This commit is contained in:
Jan Drewniak 2021-12-07 14:41:46 -05:00
parent bb0b3373c7
commit aa44696222
3 changed files with 29 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
resources/common/variables.less
View file

@ -121,6 +121,13 @@
// language button // language button
@height-lang-button: unit( 32 / @font-size-browser, em ); @height-lang-button: unit( 32 / @font-size-browser, em );
// T296321 For sticky header, set an explicit height. This is needed for scroll padding
// and for other sticky elements on the page. Setting the height in relative units enables
// the header's height to adapt to the browser's font size setting. Because
// this variable is used to determine top offsets for sticky elements where the
// font-size might not be 16px, using rem avoids the cascading effects of em units.
@height-sticky-header: unit( 50px / @font-size-browser, rem );
// Z-indices // Z-indices
// See skinStyles/jquery.ui/jquery.ui.datepicker.css. // See skinStyles/jquery.ui/jquery.ui.datepicker.css.
// @z-index-ui-datepicker-cover: -1; // @z-index-ui-datepicker-cover: -1;
@ -150,6 +157,8 @@
// Transitions // Transitions
@transition-duration-base: 100ms; @transition-duration-base: 100ms;
// Sticky header hide/show transition
@transition-sticky-header: transform 250ms linear;
// //
// Layout // Layout

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

@ -1,13 +1,6 @@
@import '../../common/variables.less'; @import '../../common/variables.less';
@import 'mediawiki.mixins.less'; @import 'mediawiki.mixins.less';
// T296321 Set an explicit height. This is needed for scroll padding and for other
// sticky elements on the page. Setting the height in relative units enables
// the header's height to adapt to the browser's font size setting. Because
// this variable is used to determine top offsets for sticky elements where the
// font-size might not be 16px, using rem avoids the cascading effects of em units.
@height-sticky-header: unit( 50px / @font-size-browser, rem );
.vector-sticky-header { .vector-sticky-header {
width: 100%; width: 100%;
height: @height-sticky-header; height: @height-sticky-header;
@ -17,7 +10,7 @@
right: 0; right: 0;
z-index: @z-index-header; z-index: @z-index-header;
transform: translateY( -100% ); transform: translateY( -100% );
transition: transform 250ms linear; transition: @transition-sticky-header;
display: flex; display: flex;
align-items: center; align-items: center;
max-width: @max-width-page-container + @padding-horizontal-page-container + @padding-horizontal-page-container; max-width: @max-width-page-container + @padding-horizontal-page-container + @padding-horizontal-page-container;

19
skinStyles/mediawiki.notification.less
View file

@ -16,3 +16,22 @@
border-radius: @border-radius-base; border-radius: @border-radius-base;
box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 ); box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
} }
/**
* With the sticky header enabled in modern Vector,
* We lower the z-index to make the user menu and language picker
* useable when a notification is present.
*/
.vector-sticky-header-enabled .mw-notification-area {
transition: @transition-sticky-header;
z-index: @z-index-menu;
}
/**
* When the sticky header is open in modern Vector,
* and the notification bar is also open, the notification
* should be moved so that it doesn't obstruct the sticky header
*/
.vector-sticky-header-visible ~ .mw-notification-area-overlay > .mw-notification-area-floating {
transform: translateY( @height-sticky-header );
}