diff --git a/UniversalLanguageSelector.hooks.php b/UniversalLanguageSelector.hooks.php index a20c978b..506371b4 100644 --- a/UniversalLanguageSelector.hooks.php +++ b/UniversalLanguageSelector.hooks.php @@ -71,36 +71,48 @@ class UniversalLanguageSelectorHooks { $languages = Language::fetchLanguageNames( $wgContLang->getCode() ); $languageData = htmlspecialchars( FormatJSON::encode( $languages ) ); $data .= " -
- -
-
+
+
+ +
+
+

" . wfMsgHtml( 'uls-select-content-language' ) . "

-
-
-
- America -
- - -
-
-
- - -
-
+ -
+
"; return true; } diff --git a/UniversalLanguageSelector.php b/UniversalLanguageSelector.php index f6ca6d20..637cfb2e 100644 --- a/UniversalLanguageSelector.php +++ b/UniversalLanguageSelector.php @@ -72,7 +72,10 @@ $wgResourceModules['ext.uls.core'] = array( 'resources/ext.uls.languagefilter.js', 'resources/ext.uls.data.utils.js', ), - 'styles' => 'resources/css/ext.uls.css', + 'styles' => array( + 'resources/css/ext.uls.css', + 'resources/css/ext.uls.grid.css', + ), 'localBasePath' => $dir, 'remoteExtPath' => 'UniversalLanguageSelector', 'dependencies' => array( diff --git a/examples/index.html b/examples/index.html index a867fce3..d5a2ada8 100644 --- a/examples/index.html +++ b/examples/index.html @@ -24,6 +24,7 @@ + @@ -38,45 +39,63 @@

-
- -
-
-

Select language

+
+
+ +
+
+
+

Select language

-
-
-
- America +
+
+ -
-
-
- - -
-
-
    + + +
    +
    +
    diff --git a/examples/resources/demo.css b/examples/resources/demo.css index a3c21668..c20ab58e 100644 --- a/examples/resources/demo.css +++ b/examples/resources/demo.css @@ -1,7 +1,7 @@ body { - width: 80%; padding-left: 10%; padding-right: 10%; + font-family: Arial, Helvetica, sans-serif; } a { text-decoration: none; diff --git a/resources/css/ext.uls.css b/resources/css/ext.uls.css index 4e902ac2..02188e1f 100644 --- a/resources/css/ext.uls.css +++ b/resources/css/ext.uls.css @@ -3,16 +3,13 @@ background: url('../images/icon-language.png') no-repeat scroll left center transparent; padding-left: 36px; } - .uls-menu { position: fixed; z-index: 1000; display: none; - min-width: 600px; - min-height: 500px; + min-width: 715px; margin-top: 1px; - width: 50%; - + width:45%; /* Styling */ background-color: #ffffff; border: 1px solid #ccc; @@ -29,90 +26,126 @@ -moz-background-clip: padding; background-clip: padding-box; } - .uls-menu a { - font-weight: normal; color: #0088CC; } - .uls-menu-header { margin: 2%; margin-top: 20px; } - -.uls-lang-selector { - margin: 2%; -} - -.uls-menu-header-left { - float: left; -} - -.uls-menu-header-left h1 { +.uls-menu h1 { font-weight: normal; padding-top: 12px; - border:none; + border: none; padding-bottom: 3px; + font-size: 21pt; + padding-left: 15px; + color: #777; } - -.uls-menu-header-right { - float: right; +.uls-menu h3 { + padding-left: 0px; + margin-top: 0px; + margin-bottom: 15px; } - .uls-worldmap { /* @embed */ - background: url('../images/world_map.png') no-repeat scroll left center transparent; - width: 400px; - height: 197px; + background: url('../images/world_map.png') no-repeat scroll right top transparent; + background-size: 100%; } - .uls-region { /* The map doesn't flip */ /* @noflip */ float: left; cursor: pointer; - width: 133px; - padding: 0; - margin: 0; - height: 197px; - position: relative; + padding: 0px; + margin: 0px; + height: 125px; + border-bottom-color: #777; + border-bottom-style: solid; + border-bottom-width: 3px; } - .uls-region a { + bottom: 2px; position: absolute; - bottom: 0; + font-size: 13px; } - .uls-region:hover { - outline: 1px solid #0E90D2; + /*Cross-browser background transparency*/ + background: #3366bb; + background: rgba(51, 102, 187, 0.1); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#253366bb, endColorstr=#253366bb); + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#253366bb, endColorstr=#253366bb)"; + border-bottom-color: #3366bb; + border-bottom-style: solid; } - .regionselector.active { - background: black; - opacity: 0.4; + /*Cross-browser background transparency*/ + background: #3366bb; + background: rgba(51, 102, 187, 0.2); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#253366bb, endColorstr=#253366bb); + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#253366bb, endColorstr=#253366bb)"; + border-bottom-color: #3366bb; + border-bottom-style: solid; +} +#map-block { + top: 1px; + margin-right: 0; + padding-right: 0px; + float: right; + overflow: hidden; +} +#map-block a { + color: #444; +} +#map-block .active a { + font-weight: bold; } - .icon-close { /* @embed */ - background: url('../images/close.png') no-repeat scroll left center transparent; + background: url('../images/close.png') no-repeat scroll center center transparent; float: right; - padding: 10px; + padding: 15px; cursor: pointer; } - input#languagefilter { - height: 20px; - border: 1px solid #0E90D2; - width: 95%; - padding-right: 20px; + border: 1px solid #c9c9c9; + -moz-transition: all 0.15s linear 0s; + border-radius: 2px 2px 2px 2px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; + color: #777; + display: block; + font-size: 14px; + height: 32px; + padding: 6px; + width: 100%; + text-align: left; +} +input:focus#languagefilter { + border: 1px solid #08C; } -span.search-button { +#search { + background-color: #f8f8f8; + border-top-color: #777; + border-top-style: solid; + border-top-width: 1px; + padding: 0.8em 0; +} +.search-label { /* @embed */ - background: url('../images/search.png') no-repeat scroll left center transparent; + background: url('../images/search.png') no-repeat scroll right center transparent; + background-size: 30px; + height: 32px; + width: 32px; + display: inline-block; + float: right; +} +span.clear-button { + /* @embed */ + background: url('../images/clear.png') no-repeat scroll left center transparent; cursor: pointer; - height: 22px; + height: 32px; position: absolute; - width: 20px; - margin-left: -20px; -} \ No newline at end of file + width: 32px; + margin-left: -32px; +} diff --git a/resources/css/ext.uls.grid.css b/resources/css/ext.uls.grid.css new file mode 100644 index 00000000..d7783253 --- /dev/null +++ b/resources/css/ext.uls.grid.css @@ -0,0 +1,320 @@ +/* Generated using Foundation http://foundation.zurb.com/docs/grid.php */ +/* Global Reset & Standards ---------------------- */ +.uls-menu * { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/* Misc ---------------------- */ +.left { + float: left; +} + +.right { + float: right; +} + +.text-left { + text-align: left; +} + +.text-right { + text-align: right; +} + +.text-center { + text-align: center; +} + +.hide { + display: none; +} + +.highlight { + background: #ffff99; +} + +/* The Grid ---------------------- */ +.row { + width: 100%; + max-width: none; + min-width: 600px; + margin: 0 auto; +} +.row .row { + width: auto; + max-width: none; + min-width: 0; + margin: 0 -5px; +} +.row.collapse .column, .row.collapse .columns { + padding: 0; +} +.row .row { + width: auto; + max-width: none; + min-width: 0; + margin: 0 -5px; +} +.row .row.collapse { + margin: 0; +} + +.column, .columns { + float: left; + min-height: 1px; + padding: 0 5px; + position: relative; +} +.column.centered, .columns.centered { + float: none; + margin: 0 auto; +} + +.row .one { + width: 8.333%; +} + +.row .two { + width: 16.667%; +} + +.row .three { + width: 25%; +} + +.row .four { + width: 33.333%; +} + +.row .five { + width: 41.667%; +} + +.row .six { + width: 50%; +} + +.row .seven { + width: 58.333%; +} + +.row .eight { + width: 66.667%; +} + +.row .nine { + width: 75%; +} + +.row .ten { + width: 83.333%; +} + +.row .eleven { + width: 91.667%; +} + +.row .twelve { + width: 100%; +} + +.row .offset-by-one { + margin-left: 8.333%; +} + +.row .offset-by-two { + margin-left: 16.667%; +} + +.row .offset-by-three { + margin-left: 25%; +} + +.row .offset-by-four { + margin-left: 33.333%; +} + +.row .offset-by-five { + margin-left: 41.667%; +} + +.row .offset-by-six { + margin-left: 50%; +} + +.row .offset-by-seven { + margin-left: 58.333%; +} + +.row .offset-by-eight { + margin-left: 66.667%; +} + +.row .offset-by-nine { + margin-left: 75%; +} + +.row .offset-by-ten { + margin-left: 83.333%; +} + +.push-two { + left: 16.667%; +} + +.pull-two { + right: 16.667%; +} + +.push-three { + left: 25%; +} + +.pull-three { + right: 25%; +} + +.push-four { + left: 33.333%; +} + +.pull-four { + right: 33.333%; +} + +.push-five { + left: 41.667%; +} + +.pull-five { + right: 41.667%; +} + +.push-six { + left: 50%; +} + +.pull-six { + right: 50%; +} + +.push-seven { + left: 58.333%; +} + +.pull-seven { + right: 58.333%; +} + +.push-eight { + left: 66.667%; +} + +.pull-eight { + right: 66.667%; +} + +.push-nine { + left: 75%; +} + +.pull-nine { + right: 75%; +} + +.push-ten { + left: 83.333%; +} + +.pull-ten { + right: 83.333%; +} + +img, object, embed { + max-width: 100%; + height: auto; +} + +img { + -ms-interpolation-mode: bicubic; +} + +#map_canvas img, .map_canvas img { + max-width: none !important; +} + +/* Nicolas Gallagher's micro clearfix */ +.row { + *zoom: 1; +} +.row:before, .row:after { + content: ""; + display: table; +} +.row:after { + clear: both; +} + +/* Block Grids ---------------------- */ +/* These are 2-up, 3-up, 4-up and 5-up ULs, suited + for repeating blocks of content. Add 'mobile' to + them to switch them just like the layout grid + (one item per line) on phones + + For IE7/8 compatibility block-grid items need to be + the same height. You can optionally uncomment the + lines below to support arbitrary height, but know + that IE7/8 do not support :nth-child. + -------------------------------------------------- */ +.block-grid { + display: block; + overflow: hidden; + padding: 0; +} +.block-grid > li { + display: block; + height: auto; + float: left; +} + +.block-grid.two-up { + margin: 0 -15px; +} + +.block-grid.two-up > li { + width: 50%; + padding: 0 15px 15px; +} + +/* .block-grid.two-up>li:nth-child(2n+1) {clear: left;} */ +.block-grid.three-up { + margin: 0 -12px; +} + +.block-grid.three-up > li { + width: 33.33%; + padding: 0 12px 12px; +} + +/* .block-grid.three-up>li:nth-child(3n+1) {clear: left;} */ +.block-grid.four-up { + margin: 0 -10px; +} + +.block-grid.four-up > li { + width: 25%; + padding: 0 10px 10px; +} + +/* .block-grid.four-up>li:nth-child(4n+1) {clear: left;} */ +.block-grid.five-up { + margin: 0 -8px; +} + +.block-grid.five-up > li { + width: 20%; + padding: 0 8px 8px; +} + diff --git a/resources/css/ext.uls.lcd.css b/resources/css/ext.uls.lcd.css index 7de7edb8..d27cb612 100644 --- a/resources/css/ext.uls.lcd.css +++ b/resources/css/ext.uls.lcd.css @@ -1,29 +1,23 @@ .uls-lcd-region-section h3 { color: #999999; } -.uls-lcd-region-section ul { - list-style: none; - float: left; - width: 140px; - margin-left: 5px; - padding: 0; - display: block; -} .uls-lcd-region-section ul li:hover { - background-color: #BFBFBF; -} -.uls-lcd-region-section { - clear: both; + background-color: #eaeff7; } /* Language list */ .uls-language-list { - height: 300px; + height: 21.5em; overflow: auto; - margin-top: 2%; + margin: 10px; + width: auto; +} + +.uls-language-block ul { + margin: 0px; + margin-bottom: 1.6em; } .uls-language-list ul li { font-weight: normal; - /* TODO: maybe not the best way */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; @@ -34,14 +28,21 @@ .uls-language-list a { font-weight: normal; color: #0088CC; + font-size: 14px; + line-height: 1.6em; } -div.uls-lcd-row:after { - clear: both; + +.uls-language-block .three.columns { + width: 22%; + } -div.uls-lcd-row:before, div.uls-lcd-row:after { - content: ""; - display: table; + +.uls-language-list-footer .three.columns { + width: 22%; + +} + + +.uls-language-block{ + width:100%; } -div.uls-lcd-row { - padding-bottom: 10px; -} \ No newline at end of file diff --git a/resources/ext.uls.data.utils.js b/resources/ext.uls.data.utils.js index 1b182cbf..d384309f 100644 --- a/resources/ext.uls.data.utils.js +++ b/resources/ext.uls.data.utils.js @@ -277,5 +277,4 @@ $.uls.data.scriptGroupOfLanguage = function( language ) { return $.uls.data.groupOfScript( $.uls.data.script( language ) ); }; - } )( jQuery ); diff --git a/resources/ext.uls.languagefilter.js b/resources/ext.uls.languagefilter.js index 704b5e82..aed98fca 100644 --- a/resources/ext.uls.languagefilter.js +++ b/resources/ext.uls.languagefilter.js @@ -51,7 +51,6 @@ var that = this; var languages = this.options.languages; var query = this.$element.val(); - var allLanguages = $.uls.data.allLanguagesByScriptGroup(); for ( var scriptGroup in allLanguages ) { for ( var langNum = 0; langNum < allLanguages[scriptGroup].length; langNum++ ) { @@ -88,8 +87,8 @@ filter: function( langCode, searchTerm ) { // FIXME script is ISO 15924 code. We might need actual name of script. var matcher = new RegExp( this.escapeRegex( searchTerm ), 'i' ); - - return matcher.test( this.options.languages[langCode] ) || + var languageName = this.options.languages[langCode]; + return matcher.test( languageName ) || matcher.test( $.uls.data.autonym( langCode ) ) || matcher.test( langCode ) || matcher.test( $.uls.data.script( langCode ) ); diff --git a/resources/ext.uls.lcd.js b/resources/ext.uls.lcd.js index 73d1041d..28be1ad3 100644 --- a/resources/ext.uls.lcd.js +++ b/resources/ext.uls.lcd.js @@ -47,7 +47,7 @@ var that = this, language = $.uls.data.languages[langCode]; - var langName = that.options.languages[langCode]; + var langName = that.options.languages[langCode] || langCode; var regions = []; if ( region ) { @@ -79,37 +79,35 @@ getColumn: function( regionCode ) { var $divRegionCode = $( 'div#' + regionCode ); - var $rowDiv = $divRegionCode.find( 'div.uls-lcd-row:last' ); - + var $rowDiv = $divRegionCode.find( 'div.row:last' ); var $ul = $divRegionCode.find( 'ul:last' ); // Each column can have maximum 10 languages. if ( $ul.length === 0 || $ul.find( 'li' ).length >= 10 ) { // Each row can have 4 columns with 10 languages. + $ul = $( '
      ' ).addClass( 'three columns end' ); if ( $rowDiv.length === 0 || $rowDiv.find( 'ul' ).length >= 4 ) { - $rowDiv = $( '
      ' ).addClass( 'uls-lcd-row' ); + $rowDiv = $( '
      ' ).addClass( 'row uls-language-block' ); $divRegionCode.append( $rowDiv ); + $ul.addClass('offset-by-one'); } - $ul = $( '
        ' ); $rowDiv.append( $ul ); } - $divRegionCode.show(); - return $ul; }, show: function() { var that = this; $.each( $.uls.data.regiongroups, function( regionCode, regionIndex ) { - var $section = $( '
        ' ).addClass( 'uls-lcd-region-section' ).prop( 'id', regionCode ); - $section.append( $( '

        ' ).html( regionCode ) ); - // FIXME this is regioncode(NA, EU etc). Should be Proper localized region name. + var $section = $( '
        ' ).addClass( 'twelve columns uls-lcd-region-section' ).prop( 'id', regionCode ); + $section.append( $( '

        ' ).addClass( 'eleven columns uls-lcd-region-section offset-by-one' ).html( regionCode ) ); + // FIXME this is regioncode(NA, EU etc). Should be proper localized region name. that.$element.append( $section ); } ); }, empty: function() { - this.$element.find( 'div.uls-lcd-row' ).remove(); + this.$element.find( 'div.row' ).remove(); this.$element.find( 'div' ).hide(); }, diff --git a/resources/images/clear.png b/resources/images/clear.png new file mode 100644 index 00000000..b371608e Binary files /dev/null and b/resources/images/clear.png differ diff --git a/resources/images/close.png b/resources/images/close.png index 02e125a5..ad16b1ef 100644 Binary files a/resources/images/close.png and b/resources/images/close.png differ diff --git a/resources/images/search.png b/resources/images/search.png index 1db2eb24..3677a2a9 100644 Binary files a/resources/images/search.png and b/resources/images/search.png differ diff --git a/resources/images/world_map.png b/resources/images/world_map.png index 96c7240f..30751d4d 100644 Binary files a/resources/images/world_map.png and b/resources/images/world_map.png differ