instead of just Parent/name).
* Added $wgAPIUselessQueryPages to allow extensions to flag their query pages
for non-inclusion in ApiQueryQueryPages.
+* (bug 50870) mediawiki.notification: Notification area should remain visible
+ when scrolled down.
=== API changes in 1.22 ===
* (bug 25553) The JSON output formatter now leaves forward slashes unescaped
* Stylesheet for mediawiki.notification module
*/
-#mw-notification-area {
+.mw-notification-area {
position: absolute;
- top: 1em;
- right: 1em;
+ top: 0;
+ right: 0;
+ padding: 1em 1em 0 0;
width: 20em;
line-height: 1.35;
z-index: 10000;
}
+.mw-notification-area-floating {
+ position: fixed;
+}
+
+* html .mw-notification-area-floating {
+ /* Make it at least 'absolute' in IE6 since 'fixed' is not supported */
+ position: absolute;
+}
+
.mw-notification {
padding: 0.25em 1em;
margin-bottom: 0.5em;
'use strict';
var notification,
- isPageReady = false,
- preReadyNotifQueue = [],
// The #mw-notification-area div that all notifications are contained inside.
- $area = null;
+ $area,
+ isPageReady = false,
+ preReadyNotifQueue = [];
/**
* Creates a Notification object for 1 message.
* @ignore
*/
function init() {
- $area = $( '<div id="mw-notification-area"></div>' )
+ var offset, $window = $( window );
+
+ $area = $( '<div id="mw-notification-area" class="mw-notification-area"></div>' )
// Pause auto-hide timers when the mouse is in the notification area.
.on( {
mouseenter: notification.pause,
// Prepend the notification area to the content area and save it's object.
mw.util.$content.prepend( $area );
+ offset = $area.offset();
+
+ function updateAreaMode() {
+ var isFloating = $window.scrollTop() > offset.top;
+ $area
+ .toggleClass( 'mw-notification-area-floating', isFloating )
+ .toggleClass( 'mw-notification-area-layout', !isFloating );
+ }
+
+ $window.on( 'scroll', updateAreaMode );
+
+ // Initial mode
+ updateAreaMode();
}
/**
}
/* mediawiki.notification */
-.skin-vector #mw-notification-area {
- top: 7em;
+.skin-vector .mw-notification-area {
font-size: 0.8em;
}
+.skin-vector .mw-notification-area-layout {
+ top: 7em;
+}
.skin-vector .mw-notification {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.93);