From f1c2216c4c7c1c0519def14b58c602c1f91e9860 Mon Sep 17 00:00:00 2001 From: pginer Date: Mon, 19 Nov 2012 12:49:50 +0100 Subject: [PATCH 1/2] Fixes CSSLint issues for jquery.uls.lcd.css CSS adjustments and JS modifications (adding classes to HTML elements) to solve issues reported by CSS Lint when validating jquery.uls.lcd.css --- css/jquery.uls.css | 3 ++- css/jquery.uls.lcd.css | 25 +++++++++++-------------- src/jquery.uls.lcd.js | 8 ++++---- 3 files changed, 17 insertions(+), 19 deletions(-) diff --git a/css/jquery.uls.css b/css/jquery.uls.css index 773ff0f..2b7d01d 100644 --- a/css/jquery.uls.css +++ b/css/jquery.uls.css @@ -54,7 +54,8 @@ color: #555; } -.uls-menu h3 { +.uls-menu .uls-lcd-region-title { + color: #777; font-size: 14pt; line-height: 1.5em; padding-left: 0; diff --git a/css/jquery.uls.lcd.css b/css/jquery.uls.lcd.css index ba029c8..6135af6 100644 --- a/css/jquery.uls.lcd.css +++ b/css/jquery.uls.lcd.css @@ -1,21 +1,20 @@ -.uls-lcd-region-section h3 { - color: #777; -} - .uls-lcd-region-section ul li:hover { background-color: #eaeff7; } +.uls-lcd-region-section{ + margin-top:10px; +} + /* Language list */ .uls-language-list { height: 22em; overflow: auto; - padding: 10px; width: auto; } .uls-language-block ul { - margin: 0 0 1.6em; + margin: 0 0 1.5em; } .uls-language-list ul li { @@ -62,10 +61,9 @@ line-height: 1.6em; } -.uls-language-block .three.columns { +.uls-language-block .columns { width: 22%; } - .uls-language-block { width: 100%; } @@ -75,11 +73,11 @@ height: 100%; } -.uls-no-results-view h2{ +.uls-no-results-found-title{ font-weight: bold; } -#uls-no-found-more { +.uls-no-found-more { font-size: 0.9em; background: #F8F8F8; width: 100%; @@ -88,8 +86,7 @@ position:absolute; bottom:0; left:0; -} - -.uls-lcd-region-section ul li.uls-column-break:hover { - background: none; + -webkit-border-radius: 0 0 5px 5px; + -moz-border-radius: 0 0 5px 5px; + border-radius: 0 0 5px 5px; } \ No newline at end of file diff --git a/src/jquery.uls.lcd.js b/src/jquery.uls.lcd.js index bd86dcc..332882c 100644 --- a/src/jquery.uls.lcd.js +++ b/src/jquery.uls.lcd.js @@ -24,10 +24,10 @@ var noResultsTemplate = '\
\ -

\ +

\ No results found\

\ -
\ +
\
\

\ You can search by language name, \ @@ -167,7 +167,7 @@ $.each( $.uls.data.regiongroups, function( regionCode, regionIndex ) { $section = $( '

' ).addClass( 'twelve columns uls-lcd-region-section' ).prop( 'id', regionCode ); $sectionTitle = $( '

' ) - .addClass( 'eleven columns uls-lcd-region-section offset-by-one' ) + .addClass( 'eleven columns uls-lcd-region-section uls-lcd-region-title offset-by-one' ) .text( regions[regionCode] ); $section.append( $sectionTitle ); that.$element.append( $section ); @@ -197,7 +197,7 @@ quickList.sort( $.uls.data.sortByAutonym ); var $quickListSection = $( '
' ).addClass( 'twelve columns uls-lcd-region-section' ).prop( 'id', 'uls-lcd-quicklist' ); var $quickListSectionTitle = $( '

' ) - .addClass( 'eleven columns uls-lcd-region-section offset-by-one' ) + .addClass( 'eleven columns uls-lcd-region-section uls-lcd-region-title offset-by-one' ) .text( 'Common languages' ); // This is placeholder text if jquery.i18n not present $quickListSection.append( $quickListSectionTitle ); this.$element.prepend( $quickListSection ); From 30fbfbac714b11bcc7967bd9abf805dfa83ebac3 Mon Sep 17 00:00:00 2001 From: pginer Date: Mon, 19 Nov 2012 16:53:56 +0100 Subject: [PATCH 2/2] Fixes CSSLint issues for jquery.uls.css CSS adjustments and JS modifications (adding classes to HTML elemnts) to solve issues reported by CSS Lint when validating jquery.uls.css --- css/jquery.uls.css | 69 +++++++++++++++++++++++------------------- css/jquery.uls.lcd.css | 4 --- src/jquery.uls.core.js | 20 ++++++------ 3 files changed, 48 insertions(+), 45 deletions(-) diff --git a/css/jquery.uls.css b/css/jquery.uls.css index 2b7d01d..a3b49d2 100644 --- a/css/jquery.uls.css +++ b/css/jquery.uls.css @@ -9,15 +9,11 @@ position: absolute; z-index: 1000; display: none; - min-width: 715px; margin-top: 1px; - width: 45%; /* Styling */ background-color: #ffffff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); - *border-right-width: 2px; - *border-bottom-width: 2px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; @@ -28,12 +24,16 @@ -moz-background-clip: padding; background-clip: padding-box; } +.uls-wide { + min-width: 715px; + width: 45%; +} -.uls-title a { +.uls-title-region a { padding-left: 15px; } -.uls-menu h1 { +.uls-menu .uls-title { font-weight: normal; border: none; padding-top: 1.25em; @@ -44,10 +44,12 @@ color: #555; } -.uls-menu h2 { +.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; @@ -87,15 +89,16 @@ div.uls-region { } .uls-region a { - bottom: 0; - padding: 2px; + bottom: 2px; + left: 2px; + padding: 0; position: absolute; font-size: 13px; line-height: 1.2em; text-decoration: none; overflow: hidden; text-overflow: ellipsis; - width: 100%; + width: 99%; } .uls-region:hover { @@ -108,12 +111,12 @@ div.uls-region { "progid:DXImageTransform.Microsoft.gradient(startColorstr=#253366bb, endColorstr=#253366bb)"; } -.regionselector.active { +.map-block .active { border-bottom-color: #3366bb; border-bottom-style: solid; } -#map-block { +.map-block { top: 1px; margin-right: 0; padding-right: 0; @@ -126,7 +129,8 @@ div.uls-region { transition: opacity 0.2s linear; } -#map-block a { +.map-block a { + color: #333; opacity:0; -moz-transition: opacity 0.15s linear; -o-transition: opacity 0.15s linear; @@ -134,20 +138,20 @@ div.uls-region { transition: opacity 0.15s linear; } -#map-block:hover, #map-block:hover a { +.map-block:hover, .map-block:hover a { opacity: 1; color: #333; } -#map-block #uls-region-1 { +.map-block .uls-region-1 { border-color: transparent; } -#map-block:hover #uls-region-1.active { +.map-block:hover .active { border-color: #3366bb; } -#map-block .active a { +.map-block .active a { font-weight: bold; } @@ -160,30 +164,34 @@ div.uls-region { cursor: pointer; } -input#languagefilter { +.uls-menu .languagefilter { + background-color: transparent; border: 1px solid #c9c9c9; border-radius: 2px 2px 2px 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; color: #333; display: block; - background-color: transparent !important; + padding: 6px; -moz-transition: all 0.15s linear 0s; -o-transition: all 0.15s linear 0s; -webkit-transition: all 0.15s linear 0s; transition: all 0.15s linear 0s; - } -input:focus#languagefilter { +.uls-menu .languagefilter:focus { border: 1px solid #3366bb; } -#search{ +.uls-menu .search{ position: relative; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F0F0F0', endColorstr='#FBFBFB'); background: #f8f8f8; - background: linear-gradient(#F0F0F0, #FBFBFB); background: -webkit-gradient(linear, left top, left bottom, from(#F0F0F0), to(#FBFBFB)); - background: -moz-linear-gradient(top, #F0F0F0, #FBFBFB); + background: -webkit-linear-gradient(top, #F0F0F0, #FBFBFB); + background: -moz-linear-gradient(top, #F0F0F0, #FBFBFB); + background: -ms-linear-gradient(top, #F0F0F0, #FBFBFB); + background: -o-linear-gradient(top, #F0F0F0, #FBFBFB); + background: linear-gradient(#F0F0F0, #FBFBFB); border-top-color: #AAA; border-top-style: solid; border-top-width: 1px; @@ -193,18 +201,17 @@ input:focus#languagefilter { border-bottom-color: #EEE; } -.search-label { +.uls-menu .search-label { /* @embed */ background: url('../images/search.png') no-repeat scroll right center transparent; background-size: 30px; height: 32px; width: 32px; - display: inline-block; float: right; } -#languagefilter-clear { +.uls-menu .languagefilter-clear { /* @embed */ background: url('../images/clear.png') no-repeat scroll left center transparent; @@ -215,18 +222,18 @@ input:focus#languagefilter { margin-left: -32px; } -.filterinput { +.uls-menu .filterinput { position: absolute; top: 0; left: 0; font-size: 14px; height: 32px; - padding: 6px; width: 100%; text-align: left; } -#filtersuggestion { +.uls-menu .filtersuggestion { + padding: 6px; background-color: white; color: #888; border: 1px transparent; @@ -235,6 +242,6 @@ input:focus#languagefilter { left: 1px; } -#search-input-block { +.uls-menu .search-input-block { position: relative; } diff --git a/css/jquery.uls.lcd.css b/css/jquery.uls.lcd.css index 6135af6..1ab13ef 100644 --- a/css/jquery.uls.lcd.css +++ b/css/jquery.uls.lcd.css @@ -73,10 +73,6 @@ height: 100%; } -.uls-no-results-found-title{ - font-weight: bold; -} - .uls-no-found-more { font-size: 0.9em; background: #F8F8F8; diff --git a/src/jquery.uls.core.js b/src/jquery.uls.core.js index 5f9ef31..3d84c63 100644 --- a/src/jquery.uls.core.js +++ b/src/jquery.uls.core.js @@ -23,18 +23,18 @@ // Region numbers in id attributes also appear in the langdb. var template = '\ -
\ +
\
\ \
\
\ -
\ -

Select Language

\ +
\ +

Select Language

\
\
\ -
\ +
\
\ -
\ + \
\ @@ -56,20 +56,20 @@
\
\
\ -