diff --git a/css/jquery.uls.css b/css/jquery.uls.css index 6c895eb..3f83f83 100644 --- a/css/jquery.uls.css +++ b/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/css/jquery.uls.lcd.css b/css/jquery.uls.lcd.css index d35fc19..529b8bc 100644 --- a/css/jquery.uls.lcd.css +++ b/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/css/jquery.uls.mobile.css b/css/jquery.uls.mobile.css index 18d6fe0..30f5b4f 100644 --- a/css/jquery.uls.mobile.css +++ b/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/examples/decorator.html b/examples/decorator.html index eafa96a..1e75b48 100644 --- a/examples/decorator.html +++ b/examples/decorator.html @@ -26,6 +26,7 @@ } $language.prop( 'href', '//' + languageCode + '.wikipedia.org' ); }, + quickList: ['en', 'hi', 'he', 'ml', 'ta', 'fr'] //FIXME } ); } ); diff --git a/src/jquery.uls.core.js b/src/jquery.uls.core.js index d9ac7a0..30aa5e9 100644 --- a/src/jquery.uls.core.js +++ b/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(); diff --git a/src/jquery.uls.lcd.js b/src/jquery.uls.lcd.js index fd000be..83759dd 100644 --- a/src/jquery.uls.lcd.js +++ b/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; @@ -135,14 +135,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 ) { $section.append( $( '

' ) .attr( 'data-i18n', 'uls-region-' + regionCode ) - .addClass( 'eleven columns uls-lcd-region-title' ) + .addClass( 'uls-lcd-region-title' ) .text( regionNames[ regionCode ] ) ); } @@ -317,12 +317,12 @@ 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' ) + .addClass( 'uls-lcd-region-title' ) .text( 'Common languages' ); // This is placeholder text if jquery.i18n not present $quickListSection.append( $quickListSectionTitle );