diff --git a/lib/jquery.uls/css/jquery.uls.css b/lib/jquery.uls/css/jquery.uls.css index 6c895eb0..3f83f83a 100644 --- a/lib/jquery.uls/css/jquery.uls.css +++ b/lib/jquery.uls/css/jquery.uls.css @@ -1,4 +1,3 @@ - .uls-trigger { /* @embed */ background: transparent url('../images/icon-language.png') no-repeat scroll left center; @@ -51,64 +50,9 @@ min-width: 150px; } -.uls-title-region a { - padding-left: 15px; -} -.uls-menu .uls-title { - font-weight: normal; - border: none; - padding-left: 15px; - font-size: 18pt; - line-height: 1.25em; - color: #555; -} -.uls-menu .uls-no-results-found-title { - font-size: 16pt; - font-weight: bold; - line-height: 1.5em; - padding-left: 6px; - padding-top: 10px; - margin-top: 0; - margin-bottom: 15px; - border-bottom: none; - color: #555; -} -.uls-menu .uls-lcd-region-section .uls-lcd-region-title { - color: #777; - font-size: 14pt; - font-weight: lighter; - line-height: 1.5em; - padding-left: 0; - margin-top: 0; - margin-bottom: 10px; - border-bottom: none; -} -div.uls-region { - cursor: pointer; - padding: 0; - margin: 0; - height: 120px; - border-bottom-color: transparent; - border-bottom-style: solid; - border-bottom-width: 2px; -} - -.uls-region a { - bottom: 2px; - left: 2px; - padding: 0; - position: absolute; - font-size: 13px; - line-height: 1.2em; - text-decoration: none; - overflow: hidden; - text-overflow: ellipsis; - width: 99%; -} - .uls-search { background-color: white; - padding: 5px; + padding: 5px 16px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #DDD; @@ -121,7 +65,7 @@ div.uls-region { /* Make space for magnifying class on the front */ .uls-search-wrapper { position: relative; - padding-left: 40px; + padding-left: 44px; margin-right: 5px; height: 32px; } @@ -131,10 +75,10 @@ div.uls-region { background-image: -webkit-linear-gradient(transparent, transparent), url('../images/search.svg'); /* @embed */ background-image: linear-gradient(transparent, transparent), url('../images/search.svg'); - background-size: 28px; + background-size: 20px; background-position: center center; height: 32px; - width: 40px; + width: 44px; display: block; position: absolute; left: 0; @@ -147,7 +91,7 @@ div.uls-region { /* There are two input boxes. This class applies to both of them */ .uls-filterinput { - font-size: 18px; + font-size: 16px; height: 32px; width: 100%; /* For the custom clear (X) icon */ diff --git a/lib/jquery.uls/css/jquery.uls.lcd.css b/lib/jquery.uls/css/jquery.uls.lcd.css index d35fc194..529b8bc8 100644 --- a/lib/jquery.uls/css/jquery.uls.lcd.css +++ b/lib/jquery.uls/css/jquery.uls.lcd.css @@ -1,13 +1,12 @@ -.uls-lcd-region-section ul li:hover { - background-color: #eaeff7; -} +/* + * Language Category Display (LCD) consists of multiple sections: + * - one to display when there are no search results (which might display suggested languages) + * - one for each region of the world, plus regions for world languages and suggested languages + * The regions consist of one or more rows (blocks) which consist of one-to-four columns. Each + * column is an ul element, and contains up to 8 li elements, each containing a link. + */ -.uls-lcd-region-section { - margin-top: 10px; -} - -/* Language list */ -.uls-language-list { +.uls-lcd { height: 20em; /* Work around Chrome bug where it places scrollbar on the left in * in RTL mode but actually reserves the place on the right side */ @@ -15,13 +14,47 @@ overflow-y: auto; width: auto; background: #FCFCFC; + padding: 0 16px; } -.uls-language-block ul { - margin: 0 0 1.5em; +.uls-lcd-region-section { + margin-top: 10px; } -.uls-language-list ul { +.uls-lcd-region-title { + color: #777; + font-size: 14px; + padding-left: 28px; +} + +/* + * We need to have this as a grid row to push rest of the content below it, but resetting + * padding and margin so that calculating them for children is easier. + */ +.grid .uls-language-block.row { + padding: 0; + margin: 0; +} + +/* + * Each block should have 16px padding on both sides. But because we already gave + * 16px for the whole menu, we need to remove it for first and last items the blocks. + */ +.grid .uls-language-block > ul { + margin: 0 0 20px 0; + padding: 0 16px; +} + +.grid .uls-language-block > ul:first-child { + padding-left: 0; +} + +.grid .uls-language-block > ul:last-child { + padding-right: 0; +} + + +.uls-language-block > ul { /* * 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. @@ -32,8 +65,10 @@ list-style-type: none; } -.uls-language-list li { +.uls-language-block > ul > li { cursor: pointer; + margin-left: 20px; + padding: 8px; /* * The directionality (ltr/rtl) for each list item is set dynamically * as HTML attributes in JavaScript. Setting directionality also applies @@ -46,17 +81,15 @@ text-align: left; } -/* TODO: looks unused */ -.uls-language-list strong { - text-decoration: underline; +.uls-language-block > ul > li:hover { + background-color: #eaeff7; } -.uls-language-list a { - font-weight: normal; +.uls-language-block a { + cursor: pointer; text-decoration: none; color: #3366bb; font-size: 14px; - line-height: 1.6em; display: inline-block; width: 100%; overflow: hidden; @@ -71,16 +104,22 @@ vertical-align: middle; } -.uls-language-block { - width: 100%; -} - +/* TODO: ugly hack that forces last matching search results to shift down. + * They should be hidden properly. + */ .uls-no-results-view { - color: #555; height: 100%; } +.uls-no-results-found-title { + font-size: 16px; + padding: 0 16px 0 28px; + border-bottom: none; + color: #555; +} + .uls-no-found-more { + padding: 0 16px 0 44px; font-size: 0.9em; background: #F8F8F8; width: 100%; @@ -90,7 +129,3 @@ bottom: 0; left: 0; } - -.uls-no-found-more a { - cursor: pointer; -} diff --git a/lib/jquery.uls/css/jquery.uls.mobile.css b/lib/jquery.uls/css/jquery.uls.mobile.css index 18d6fe05..30f5b4f8 100644 --- a/lib/jquery.uls/css/jquery.uls.mobile.css +++ b/lib/jquery.uls/css/jquery.uls.mobile.css @@ -22,11 +22,6 @@ line-height: 1.7em; } - .uls-mobile div.uls-region { - width: 33% !important; - float: left !important; - } - .uls-mobile .row { width: auto; min-width: 0; diff --git a/lib/jquery.uls/i18n/ar.json b/lib/jquery.uls/i18n/ar.json index 6cebac4e..aee79d2a 100644 --- a/lib/jquery.uls/i18n/ar.json +++ b/lib/jquery.uls/i18n/ar.json @@ -15,8 +15,8 @@ "uls-region-ME": "الشرق الأوسط", "uls-region-PA": "المحيط الهادئ", "uls-no-results-found": "لم يتم العثور على نتائج", - "uls-common-languages": "لغات مشتركة", + "uls-common-languages": "اللغات المقترحة", "uls-no-results-suggestion-title": "قد تكون مهتم في:", - "uls-search-help": "يمكنك البحث بواسطة اسم اللغة, اسم السكريبت, رمز اللغة القياسي أو يمكنك تصفح حسب المنطقة:", + "uls-search-help": "يمكنك البحث بواسطة اسم اللغة, اسم السكريبت, رمز اللغة القياسي أو يمكنك التصفح حسب المنطقة.", "uls-search-placeholder": "بحث عن لغة" } diff --git a/lib/jquery.uls/i18n/dty.json b/lib/jquery.uls/i18n/dty.json index 3c3f73d6..a577cffc 100644 --- a/lib/jquery.uls/i18n/dty.json +++ b/lib/jquery.uls/i18n/dty.json @@ -1,7 +1,8 @@ { "@metadata": { "authors": [ - "रमेश सिंह बोहरा" + "रमेश सिंह बोहरा", + "Nirajan pant" ] }, "uls-region-WW": "विश्वभर", @@ -13,7 +14,8 @@ "uls-region-ME": "मध्य पूर्व", "uls-region-PA": "प्रशान्त", "uls-no-results-found": "कोइ पन नतिजाहरू नाइभेटिया", - "uls-common-languages": "साझो भाषा", + "uls-common-languages": "सुझावित भाषाअन", "uls-no-results-suggestion-title": "तमलाई यैमी मन लाग्गसकन्छ:", + "uls-search-help": "तम भषा: नाउँले, लिपिया नाउँले, भषा: ISO कोड खोजिसकन्छ: या क्षेत्रा आधारमी ब्राउज अरिसकन्छ:।", "uls-search-placeholder": "भाषा खोज अर" } diff --git a/lib/jquery.uls/i18n/en.json b/lib/jquery.uls/i18n/en.json index bce93a20..b28c770d 100644 --- a/lib/jquery.uls/i18n/en.json +++ b/lib/jquery.uls/i18n/en.json @@ -13,6 +13,7 @@ "uls-region-AS": "Asia", "uls-region-ME": "Middle East", "uls-region-PA": "Pacific", + "uls-region-all": "All languages", "uls-no-results-found": "No results found", "uls-common-languages": "Suggested languages", "uls-no-results-suggestion-title": "You may be interested in:", diff --git a/lib/jquery.uls/i18n/glk.json b/lib/jquery.uls/i18n/glk.json index 5bccd15e..7522cfae 100644 --- a/lib/jquery.uls/i18n/glk.json +++ b/lib/jquery.uls/i18n/glk.json @@ -12,7 +12,7 @@ "uls-region-AS": "آسيا", "uls-region-ME": "مئني خۊرتؤ", "uls-region-PA": "اۊقيانۊسˇ آرؤم", - "uls-no-results-found": "نتيجه-اي وامۊته نۊبؤ", + "uls-no-results-found": "نتيجه-اي وامته نۊبؤ", "uls-common-languages": "راىجˇ زوانؤن", "uls-no-results-suggestion-title": "مۊمکنه خۊش بدأرين:", "uls-search-help": "شۊمۊ تؤنين زوانˇ نؤمˇ أمرأ، رسم الخط، زوانˇ ايزؤ کؤد ىا شيمي سامؤنˇ أمرأ وامجين.", diff --git a/lib/jquery.uls/i18n/oc.json b/lib/jquery.uls/i18n/oc.json index f0b28bed..58c5339b 100644 --- a/lib/jquery.uls/i18n/oc.json +++ b/lib/jquery.uls/i18n/oc.json @@ -13,7 +13,7 @@ "uls-region-ME": "Orient Mejan", "uls-region-PA": "Pacific", "uls-no-results-found": "Cap de resultat pas trobat", - "uls-common-languages": "Lengas comunas", + "uls-common-languages": "Lengas suggeridas", "uls-no-results-suggestion-title": "Podètz èsser interessat per :", "uls-search-help": "Podètz recercar per nom de lenga, per nom de l'escript, per còdi ISO de la lenga, o podètz navigar per region.", "uls-search-placeholder": "Recèrca de lenga" diff --git a/lib/jquery.uls/i18n/qqq.json b/lib/jquery.uls/i18n/qqq.json index 05f1a0d3..f66f9f44 100644 --- a/lib/jquery.uls/i18n/qqq.json +++ b/lib/jquery.uls/i18n/qqq.json @@ -14,6 +14,7 @@ "uls-region-AS": "Label for Asia", "uls-region-ME": "Label for Middle East", "uls-region-PA": "Label for Pacific", + "uls-region-all": "Label for all languages in narrow mode, where languages are not split by region.", "uls-no-results-found": "Title text for 'No results found' section", "uls-common-languages": "The ULS tries to guess the langugages that the user is most likely to pick. They are taken from geolocation (languages of the current country according to the IP address), previously selected languages, and the browser's accept-language. The list of these languages appears at the top of the ULS languages list, above the geographical regions. This is the title of that list.\n\nSee also {{msg-mw|Mobile-frontend-languages-structured-overlay-suggested-languages-header}}", "uls-no-results-suggestion-title": "Title for language suggestion in 'no results found' screen", diff --git a/lib/jquery.uls/i18n/sa.json b/lib/jquery.uls/i18n/sa.json index a90ca57c..a2aff7cf 100644 --- a/lib/jquery.uls/i18n/sa.json +++ b/lib/jquery.uls/i18n/sa.json @@ -13,7 +13,7 @@ "uls-region-ME": "मध्यभूभागे", "uls-region-PA": "पॅसिफिक्", "uls-no-results-found": "परिणामाः न लब्धाः", - "uls-common-languages": "समान्याः भाषाः", + "uls-common-languages": "परामर्षिताः भाषाः", "uls-no-results-suggestion-title": "एतत् भवते/भवत्यै रोचेत :", "uls-search-help": "भाषाधारेण, लिप्याधारेण, भाषायाः ISO कूटाधारेण, क्षेत्रानुसारं वा भवान्/भवती अन्वेष्टुं शक्नोति ।", "uls-search-placeholder": "भाषा अन्विष्यताम्" diff --git a/lib/jquery.uls/i18n/sc.json b/lib/jquery.uls/i18n/sc.json index 34fde6eb..beff21fc 100644 --- a/lib/jquery.uls/i18n/sc.json +++ b/lib/jquery.uls/i18n/sc.json @@ -13,8 +13,8 @@ "uls-region-ME": "Oriènte de mesu.", "uls-region-PA": "Patzìficu", "uls-no-results-found": "Mancu unu resurtu agatau", - "uls-common-languages": "Limbas prus isseberas.", + "uls-common-languages": "Limbas impositadas.", "uls-no-results-suggestion-title": "Podes essere interessadu in:", - "uls-search-help": "Podes chircare tràmite nùmene de sa limba, nùmene de su script, còdighe ISO de sa limba o navigare tràmite regione:", + "uls-search-help": "Podes chircare pro mèdiu de su nùmene de sa limba, su nùmene de su script, su còdighe ISO de sa limba o navigare pro mèdiu de sa regione:", "uls-search-placeholder": "Chirca de sa limba:" } diff --git a/lib/jquery.uls/i18n/th.json b/lib/jquery.uls/i18n/th.json index d94ded6c..3254daeb 100644 --- a/lib/jquery.uls/i18n/th.json +++ b/lib/jquery.uls/i18n/th.json @@ -1,7 +1,8 @@ { "@metadata": { "authors": [ - "Octahedron80" + "Octahedron80", + "Pon44695" ] }, "uls-region-WW": "ทั่วโลก", @@ -13,8 +14,8 @@ "uls-region-ME": "ตะวันออกกลาง", "uls-region-PA": "แปซิฟิก", "uls-no-results-found": "ไม่พบผลลัพธ์", - "uls-common-languages": "ภาษาสามัญ", + "uls-common-languages": "ภาษาที่แนะนำ", "uls-no-results-suggestion-title": "คุณอาจสนใจใน:", - "uls-search-help": "คุณสามารถค้นหาด้วยชื่อภาษา ชื่ออักษร รหัส ISO ของภาษา หรือสามารถเรียกดูตามภูมิภาค:", + "uls-search-help": "คุณสามารถค้นหาด้วยชื่อภาษา ชื่ออักษร รหัส ISO ของภาษา หรือสามารถเรียกดูตามภูมิภาค", "uls-search-placeholder": "ค้นหาภาษา" } diff --git a/lib/jquery.uls/i18n/vi.json b/lib/jquery.uls/i18n/vi.json index 2beca187..e768665c 100644 --- a/lib/jquery.uls/i18n/vi.json +++ b/lib/jquery.uls/i18n/vi.json @@ -14,7 +14,7 @@ "uls-region-ME": "Trung Đông", "uls-region-PA": "Châu Đại Dương", "uls-no-results-found": "Không tìm thấy kết quả", - "uls-common-languages": "Ngôn ngữ thông dụng", + "uls-common-languages": "Ngôn ngữ gợi ý", "uls-no-results-suggestion-title": "Bạn có thể quan tâm:", "uls-search-help": "Bạn có thể tìm kiếm theo tên ngôn ngữ, tên hệ thống chữ viết, hay mã ISO của ngôn ngữ hoặc duyệt theo khu vực.", "uls-search-placeholder": "Tìm kiếm ngôn ngữ" diff --git a/lib/jquery.uls/src/jquery.uls.core.js b/lib/jquery.uls/src/jquery.uls.core.js index d9ac7a0f..d92008ad 100644 --- a/lib/jquery.uls/src/jquery.uls.core.js +++ b/lib/jquery.uls/src/jquery.uls.core.js @@ -91,7 +91,7 @@ this.initialized = false; this.$languageFilter = this.$menu.find( '#uls-languagefilter' ); - this.$resultsView = this.$menu.find( 'div.uls-language-list' ); + this.$resultsView = this.$menu.find( '.uls-language-list' ); this.render(); this.listen(); @@ -134,15 +134,25 @@ * @returns {Object} */ position: function () { - var pos; + var pos, + top = this.top, + left = this.left; + + if ( top === undefined ) { + pos = $.extend( {}, this.$element.offset(), { + height: this.$element[ 0 ].offsetHeight + } ); + top = pos.top + pos.height; + } + + if ( left === undefined ) { + left = $( window ).width() / 2 - this.$menu.outerWidth() / 2; + } - pos = $.extend( {}, this.$element.offset(), { - height: this.$element[ 0 ].offsetHeight - } ); return { - top: this.top !== undefined ? this.top : pos.top + pos.height, - left: this.left !== undefined ? this.left : '25%' + top: top, + left: left }; }, @@ -157,7 +167,6 @@ }; this.$menu.addClass( widthClasses[this.getMenuWidth()] ); - this.$menu.css( this.position() ); if ( !this.initialized ) { $( 'body' ).prepend( this.$menu ); @@ -165,6 +174,7 @@ this.initialized = true; } + this.$menu.css( this.position() ); this.$menu.show(); this.$menu.scrollIntoView(); this.shown = true; @@ -348,7 +358,7 @@ languagesCount = objectLength( this.options.languages ); - if ( languagesCount < 12 ) { + if ( languagesCount < 25 ) { return 'narrow'; } diff --git a/lib/jquery.uls/src/jquery.uls.lcd.js b/lib/jquery.uls/src/jquery.uls.lcd.js index fd000be8..f0bfb886 100644 --- a/lib/jquery.uls/src/jquery.uls.lcd.js +++ b/lib/jquery.uls/src/jquery.uls.lcd.js @@ -24,18 +24,18 @@ var noResultsTemplate, LanguageCategoryDisplay; - noResultsTemplate = $( '
' ).addClass( 'twelve columns uls-no-results-view hide' ); + noResultsTemplate = $( '
' ).addClass( 'uls-no-results-view hide' ); noResultsTemplate.append( $( '

' ) .attr( 'data-i18n', 'uls-no-results-found' ) - .addClass( 'eleven columns offset-by-one uls-no-results-found-title' ) + .addClass( 'uls-no-results-found-title' ) .text( 'No results found' ), $( '
' ) .attr( 'id', 'uls-no-found-more' ) .addClass( 'uls-no-found-more' ) .append( $( '
' ) - .addClass( 'ten columns offset-by-one' ) + .addClass( '' ) .append( $( '

' ).append( $( '' ).text( 'You can search by language name, script name, ISO code of language or you can browse by region.' ) @@ -47,7 +47,7 @@ LanguageCategoryDisplay = function ( element, options ) { this.$element = $( element ); this.options = $.extend( {}, $.fn.lcd.defaults, options ); - this.$element.addClass( 'lcd' ); + this.$element.addClass( 'uls-lcd' ); this.regionLanguages = {}; this.renderTimeout = null; this.cachedQuicklist = null; @@ -109,8 +109,9 @@ }, render: function () { - var $section, + var $section, $quicklist, lcd = this, + narrowMode = this.options.columns === 1, regions = [], regionNames = { // These are fallback text when i18n library not present @@ -124,7 +125,16 @@ PA: 'Pacific' }; - regions.push( this.buildQuicklist() ); + $quicklist = this.buildQuicklist(); + regions.push( $quicklist ); + + if ( narrowMode && $quicklist.length ) { + regions.push( $( '

' ) + .attr( 'data-i18n', 'uls-region-all' ) + .addClass( 'uls-lcd-region-title' ) + .text( 'All languages' ) + ); + } $.each( $.uls.data.regiongroups, function ( regionCode ) { lcd.regionLanguages[ regionCode ] = []; @@ -135,14 +145,14 @@ } $section = $( '
' ) - .addClass( 'eleven columns offset-by-one uls-lcd-region-section hide' ) + .addClass( 'uls-lcd-region-section hide' ) .attr( 'id', regionCode ); // Show a region heading, unless we are using a narrow ULS - if ( lcd.options.columns !== 1 ) { + if ( !narrowMode ) { $section.append( $( '

' ) .attr( 'data-i18n', 'uls-region-' + regionCode ) - .addClass( 'eleven columns uls-lcd-region-title' ) + .addClass( 'uls-lcd-region-title' ) .text( regionNames[ regionCode ] ) ); } @@ -306,7 +316,7 @@ this.options.quickList = this.options.quickList(); } - if ( !this.options.quickList ) { + if ( !this.options.quickList.length ) { this.cachedQuicklist = $( [] ); return this.cachedQuicklist; } @@ -317,13 +327,13 @@ quickList.sort( $.uls.data.sortByAutonym ); $quickListSection = $( '
' ) - .addClass( 'eleven columns offset-by-one uls-lcd-region-section' ) + .addClass( 'uls-lcd-region-section' ) .attr( 'id', 'uls-lcd-quicklist' ); $quickListSectionTitle = $( '

' ) .attr( 'data-i18n', 'uls-common-languages' ) - .addClass( 'eleven columns uls-lcd-region-title' ) - .text( 'Common languages' ); // This is placeholder text if jquery.i18n not present + .addClass( 'uls-lcd-region-title' ) + .text( 'Suggested languages' ); // This is placeholder text if jquery.i18n not present $quickListSection.append( $quickListSectionTitle ); this.renderRegion( @@ -401,7 +411,8 @@ // Other supported values are 1 and 2. // Other values will have rendering issues. columns: 4, - languageDecorator: null + languageDecorator: null, + quicklist: [] }; $.fn.lcd.Constructor = LanguageCategoryDisplay; diff --git a/resources/css/ext.uls.css b/resources/css/ext.uls.css index 7e3c988a..8d98c793 100644 --- a/resources/css/ext.uls.css +++ b/resources/css/ext.uls.css @@ -16,6 +16,11 @@ border-bottom-left-radius: 4px; } +/* Override skin styling, because we are doing it ourselves */ +.uls-language-list li { + margin: 0; +} + .uls-menu.callout .caret-before, .uls-menu.callout .caret-after { border-top: 10px solid transparent; diff --git a/resources/css/ext.uls.languagesettings.css b/resources/css/ext.uls.languagesettings.css index 17b9ffd2..545e6cbd 100644 --- a/resources/css/ext.uls.languagesettings.css +++ b/resources/css/ext.uls.languagesettings.css @@ -13,15 +13,6 @@ border-radius: 0 0 5px 5px; } -.uls-menu h3 { - border-bottom: medium none; - font-size: 14pt; - line-height: 1.5em; - margin-bottom: 10px; - margin-top: 0; - padding-left: 0; -} - #languagesettings-panels .languagesettings-menu { padding-left: 0; padding-right: 0;