mediawiki-skins-Insurgency/resources/mobile-uls.js
Bartosz Dziewoński 6c53b601f8 Use media queries rather than manual checks for mobile hacks
If the page was long enough to have a vertical scrollbar, the check
for `$( window ).width()` would be incorrect because of the width of
the scrollbar itself. The correct value is `$( window ).outerWidth()`.

But rather than deal with that, we can instead use the API
specifically for matching media queries [1], then copy-paste the
media query from CSS and not have to think about it at all!

[1] https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

Bug: T227916
Change-Id: I79478040620391f5391b10aee52134fde0b88adf
2019-07-12 21:59:26 +02:00

23 lines
572 B
JavaScript

/* eslint-disable no-jquery/no-global-selector */
$( function () {
var mobileMediaQuery = window.matchMedia( 'screen and (max-width: 550px)' ),
ULSTrigger = $( '#pt-uls' ),
ULSMoved = false;
function moveULS() {
if ( ULSTrigger.length ) {
if ( !ULSMoved && mobileMediaQuery.matches ) {
ULSTrigger.insertBefore( $( '#pt-preferences' ) );
ULSMoved = true;
} else if ( ULSMoved && !mobileMediaQuery.matches ) {
ULSTrigger.prepend( $( '#p-preferences' ) );
ULSMoved = false;
}
}
}
$( window ).on( 'resize', moveULS );
moveULS();
} );