wikimedia/mediawiki-extensions-Echo
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo synced 2024-11-24 07:54:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use position:sticky for toolbar floating

Browse source 
Avoids any scroll-based DOM changes which slow down scroll events.
Removes floating in browsers without sticky support (mostly IE).

Change-Id: If75e2a90d76644296fe3db5ef8bd9b26de4e7b0c
This commit is contained in:
Ed Sanders 2017-10-17 15:22:26 +01:00
parent 892ba8e5fe
commit cfa130cc13
2 changed files with 9 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
modules/styles/mw.echo.ui.NotificationsInboxWidget.less
View file

@ -11,7 +11,14 @@
}
&-toolbarWrapper {
height: 4em;
height: 3.5em;
position: sticky;
padding-top: 0.5em;
margin-top: -0.5em;
top: 0;
z-index: 2;
background: #fff;
box-shadow: 0 2px 0 0 rgba( 0, 0, 0, 0.1 );
}
&-cell {
@ -42,16 +49,6 @@
width: 100%;
}
&-affixed {
position: fixed;
z-index: 2;
top: 0;
background: #fff;
padding-top: 0.5em;
padding-bottom: 0.5em;
box-shadow: 0 2px 0 0 rgba( 0, 0, 0, 0.1 );
}
&-settings {
padding-left: 1em;
}
@ -88,7 +85,7 @@
}
}
&-toolbarWrapper {
height: 8em;
height: 7em;
}
}
}

24
modules/ui/mw.echo.ui.NotificationsInboxWidget.js
View file

@ -92,7 +92,6 @@
this.topPaginationWidget.connect( this, { change: 'populateNotifications' } );
this.bottomPaginationWidget.connect( this, { change: 'populateNotifications' } );
this.settingsMenu.connect( this, { markAllRead: 'onSettingsMarkAllRead' } );
$( window ).on( 'scroll resize', this.onWindowScroll.bind( this ) );
this.topPaginationWidget.setDisabled( true );
this.bottomPaginationWidget.setDisabled( true );
@ -321,27 +320,4 @@
this.datedListWidget.toggle( !displayMessage );
};
/**
* Respond to window scroll
*/
mw.echo.ui.NotificationsInboxWidget.prototype.onWindowScroll = function () {
var scrollTop = $( window ).scrollTop(),
isScrolledDown = scrollTop >= this.$topToolbar.parent().offset().top;
// Fix the widget to the top when we scroll down below its original
// location
this.$topToolbar.toggleClass(
'mw-echo-ui-notificationsInboxWidget-main-toolbar-affixed',
isScrolledDown
);
if ( isScrolledDown ) {
// Copy width from parent, width: 100% doesn't do what we want when
// position: fixed; is set
this.$topToolbar.css( 'width', this.$topToolbar.parent().width() );
} else {
// Unset width when we no longer have position: fixed;
this.$topToolbar.css( 'width', '' );
}
};
}( jQuery, mediaWiki ) );