From 03547c68e312e6730eac1a3a71f574e0cba9ae31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niklas=20Laxstr=C3=B6m?= Date: Wed, 17 Mar 2021 10:19:37 +0100 Subject: [PATCH] Improve positioning for content language selector on narrow screens Reported in https://github.com/wikimedia/jquery.uls/pull/383#pullrequestreview-613761459 Instead of checking the left edge of the trigger, check the midpoint. This is more reliable and does not cause the dialog to incorrectly swap sides in narrow screens in LTR direction, This patch does not touch the compact language links variant. Bug: T276248 Change-Id: Ic734abb7b350852f8c5c10ced8456bf146df62d8 --- resources/js/ext.uls.launch.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/resources/js/ext.uls.launch.js b/resources/js/ext.uls.launch.js index b4835d66..98610eef 100644 --- a/resources/js/ext.uls.launch.js +++ b/resources/js/ext.uls.launch.js @@ -76,8 +76,8 @@ function launchULS( $trigger, languagesObject, forCLS ) { width = $trigger.outerWidth(); height = $trigger.outerHeight(); - if ( offset.left > $( window ).width() / 2 ) { - // Trigger is on the right side of the viewport. + if ( offset.left + ( width / 2 ) > $( window ).width() / 2 ) { + // Midpoint of the trigger is on the right side of the viewport. this.$menu.css( { left: 'auto', // Right edge of the dialog aligns with the right edge of the trigger. @@ -85,7 +85,7 @@ function launchULS( $trigger, languagesObject, forCLS ) { top: offset.top + height } ); } else { - // Trigger is on the left side of the viewport. + // Midpoint of the trigger is on the left side of the viewport. this.$menu.css( { // Left edge of the dialog aligns with the left edge of the trigger. left: offset.left,