diff --git a/lib/jquery.uls/css/jquery.uls.lcd.css b/lib/jquery.uls/css/jquery.uls.lcd.css index 2a465269..d35fc194 100644 --- a/lib/jquery.uls/css/jquery.uls.lcd.css +++ b/lib/jquery.uls/css/jquery.uls.lcd.css @@ -9,7 +9,10 @@ /* Language list */ .uls-language-list { height: 20em; - overflow: auto; + /* Work around Chrome bug where it places scrollbar on the left in + * in RTL mode but actually reserves the place on the right side */ + overflow-x: hidden; + overflow-y: auto; width: auto; background: #FCFCFC; } @@ -18,20 +21,19 @@ margin: 0 0 1.5em; } -.uls-language-list ul li { - cursor: pointer; - font-weight: normal; - overflow: hidden; - white-space: nowrap; - +.uls-language-list ul { /* - * Some languages have long names for various reasons and we still want - * them to appear on one line. - * To make it work correctly, the directionality must be set correctly - * on the item level. + * We don't want any visible bullets in this list. Not by default anyway. + * Using very unspecific selector here to allow other classes to override. + * Bug because overflow: hidden is incompatible with bullets, also render + * the bullets inside the list in case there should be any. */ - text-overflow: ellipsis; + list-style-image: none; + list-style-type: none; +} +.uls-language-list li { + cursor: pointer; /* * The directionality (ltr/rtl) for each list item is set dynamically * as HTML attributes in JavaScript. Setting directionality also applies @@ -42,14 +44,9 @@ * is readable. */ text-align: left; - - /* - * We don't want any visible bullets in this list. - */ - list-style-image: none; - list-style-type: none; } +/* TODO: looks unused */ .uls-language-list strong { text-decoration: underline; } @@ -60,6 +57,18 @@ color: #3366bb; font-size: 14px; line-height: 1.6em; + display: inline-block; + width: 100%; + overflow: hidden; + /* + * Some languages have long names for various reasons and we still want + * them to appear on one line. + * To make it work correctly, the directionality must be set correctly + * on the item level. + */ + text-overflow: ellipsis; + white-space: nowrap; + vertical-align: middle; } .uls-language-block { diff --git a/lib/jquery.uls/src/jquery.uls.lcd.js b/lib/jquery.uls/src/jquery.uls.lcd.js index 60754d4e..8065c919 100644 --- a/lib/jquery.uls/src/jquery.uls.lcd.js +++ b/lib/jquery.uls/src/jquery.uls.lcd.js @@ -273,13 +273,14 @@ // Not using jQuery as this is performance hotspot li = document.createElement( 'li' ); li.title = name; - li.lang = code; - li.dir = $.uls.data.getDir( code ); li.setAttribute( 'data-code', code ); a = document.createElement( 'a' ); a.appendChild( document.createTextNode( autonym ) ); a.className = 'autonym'; + a.lang = code; + a.dir = $.uls.data.getDir( code ); + li.appendChild( a ); if ( this.options.languageDecorator ) { diff --git a/resources/js/ext.uls.compactlinks.js b/resources/js/ext.uls.compactlinks.js index 16885314..a050cf53 100644 --- a/resources/js/ext.uls.compactlinks.js +++ b/resources/js/ext.uls.compactlinks.js @@ -156,13 +156,17 @@ $trigger.addClass( 'selector-open' ); }, languageDecorator: function ( $languageLink, language ) { + var data = self.interlanguageList[ language ]; // set href and text exactly same as what was in // interlanguage link. The ULS autonym might be different in some // cases like sr. In ULS it is "српски", while in interlanguage links // it is "српски / srpski" $languageLink - .prop( 'href', self.interlanguageList[ language ].href ) - .text( self.interlanguageList[ language ].autonym ); + .prop( 'href', data.href ) + .text( data.autonym ); + + // This code is to support badges used in Wikimedia + $languageLink.parent().addClass( data.element.parentNode.className ); }, onCancel: function () { $trigger.removeClass( 'selector-open' );