bryce/mediawiki-extensions-UniversalLanguageSelector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use grid based css design (made css resets local)

Browse Source 
Introduced foundation based grid css
Related changes in example, template html

Change-Id: I8b1c1bae1c733ea0ed997d8317b9954592cf6eca
This commit is contained in:
Santhosh Thottingal
2012-07-18 10:24:34 +05:30
parent 27f9adcc15
commit b1b7c2feb3
14 changed files with 530 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
UniversalLanguageSelector.hooks.php
View File

@@ -71,36 +71,48 @@ class UniversalLanguageSelectorHooks {
$languages = Language::fetchLanguageNames( $wgContLang->getCode() );
$languageData = htmlspecialchars( FormatJSON::encode( $languages ) );
$data .= "
<div class=\"uls-menu\" data-languages=\"" . $languageData . "\">
<span class=\"icon-close\"></span>
<div class=\"uls-menu-header\">
<div class=\"uls-menu-header-left\">
<div class='uls-menu' data-languages=\"" . $languageData . "\">
<div class='row'>
<span class='icon-close'></span>
</div>
<div class='row'>
<div class='four columns'>
<h1>" . wfMsgHtml( 'uls-select-content-language' ) . "</h1>
</div>
<div class=\"uls-menu-header-right\">
<div class='uls-worldmap'>
<div class='uls-region' id='uls-region-1' data-regiongroup='1'>
<a>America</a>
</div>
<div class='uls-region' id='uls-region-2' data-regiongroup='2'>
<a>Europe<br>Middle East<br>Africa</a>
</div>
<div class='uls-region' id='uls-region-3' data-regiongroup='3'>
<a>Asia<br>Australia<br>Pacific</a>
<div class='three columns' id='settings-block'></div>
<div class='five columns' id='map-block'>
<div class='row'>
<div class='three columns uls-region' id='uls-region-4' data-regiongroup='4'>
<a>Worldwide</a>
</div>
<div class='nine columns'>
<div class='row uls-worldmap'>
<div class='four columns uls-region' id='uls-region-1' data-regiongroup='1'>
<a>America</a>
</div>
<div class='four columns uls-region' id='uls-region-2' data-regiongroup='2'>
<a>Europe<br>Middle East<br>Africa</a>
</div>
<div class='four columns uls-region' id='uls-region-3' data-regiongroup='3'>
<a>Asia<br>Australia<br>Pacific</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div style=\"clear: both\"></div>
<div class=\"uls-lang-selector\">
<form action=\"#\" class=\"filterform\">
<input type=\"text\" placeholder=\"Language search\" id=\"languagefilter\"
class=\"filterinput\">
<span class=\"search-button\"></span>
</form>
<div class=\"uls-language-list\" >
<div id='search' class='row'>
<div class='one column'>
<span class='search-label'></span>
</div>
<div class='ten columns'>
<input type='text' class='filterinput' id='languagefilter' placeholder='Language search' bound='true'/>
</div>
<div class='one column'>
<span class='clear-button'></span>
</div>
</div>
</div>
<div class='row uls-language-list'></div>
</div>";
return true;
}

5
UniversalLanguageSelector.php
View File

@@ -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(

79
examples/index.html
View File

File diff suppressed because one or more lines are too long

2
examples/resources/demo.css
View File

@@ -1,7 +1,7 @@
body {
width: 80%;
padding-left: 10%;
padding-right: 10%;
font-family: Arial, Helvetica, sans-serif;
}
a {
text-decoration: none;

139
resources/css/ext.uls.css
View File

@@ -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;
}
width: 32px;
margin-left: -32px;
}

320
resources/css/ext.uls.grid.css Normal file
View File

@@ -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;
}

47
resources/css/ext.uls.lcd.css
View File

@@ -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;
}

1
resources/ext.uls.data.utils.js
View File

@@ -277,5 +277,4 @@
$.uls.data.scriptGroupOfLanguage = function( language ) {
return $.uls.data.groupOfScript( $.uls.data.script( language ) );
};
} )( jQuery );

5
resources/ext.uls.languagefilter.js
View File

@@ -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 ) );

20
resources/ext.uls.lcd.js
View File

@@ -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 = $( '<ul>' ).addClass( 'three columns end' );
if ( $rowDiv.length === 0 || $rowDiv.find( 'ul' ).length >= 4 ) {
$rowDiv = $( '<div>' ).addClass( 'uls-lcd-row' );
$rowDiv = $( '<div>' ).addClass( 'row uls-language-block' );
$divRegionCode.append( $rowDiv );
$ul.addClass('offset-by-one');
}
$ul = $( '<ul>' );
$rowDiv.append( $ul );
}
$divRegionCode.show();
return $ul;
},
show: function() {
var that = this;
$.each( $.uls.data.regiongroups, function( regionCode, regionIndex ) {
var $section = $( '<div>' ).addClass( 'uls-lcd-region-section' ).prop( 'id', regionCode );
$section.append( $( '<h3>' ).html( regionCode ) );
// FIXME this is regioncode(NA, EU etc). Should be Proper localized region name.
var $section = $( '<div>' ).addClass( 'twelve columns uls-lcd-region-section' ).prop( 'id', regionCode );
$section.append( $( '<h3>' ).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();
},

BIN
resources/images/clear.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 338 B

BIN
resources/images/close.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 637 B

After

Width:  |  Height:  |  Size: 347 B

BIN
resources/images/search.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 214 B

After

Width:  |  Height:  |  Size: 881 B

BIN
resources/images/world_map.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB