Use grid based css design (made css resets local)

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

Change-Id: I8b1c1bae1c733ea0ed997d8317b9954592cf6eca

UniversalLanguageSelector.hooks.php

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

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(

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;

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-width: 715px;
-	min-height: 500px;
 	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-menu h1 {
-.uls-lang-selector {
-	margin: 2%;
-}
-
-.uls-menu-header-left {
-	float: left;
-}
-
-.uls-menu-header-left h1 {
 	font-weight: normal;
 	padding-top: 12px;
-	border:none;
+	border: none;
 	padding-bottom: 3px;
+	font-size: 21pt;
+	padding-left: 15px;
+	color: #777;
 }
-
+.uls-menu h3 {
-.uls-menu-header-right {
+	padding-left: 0px;
-	float: right;
+	margin-top: 0px;
+	margin-bottom: 15px;
 }
-
 .uls-worldmap {
 	/* @embed */
-	background: url('../images/world_map.png') no-repeat scroll left center transparent;
+	background: url('../images/world_map.png') no-repeat scroll right top transparent;
-	width: 400px;
+	background-size: 100%;
-	height: 197px;
 }
-
 .uls-region {
 	/* The map doesn't flip */
 	/* @noflip */
 	float: left;
 	cursor: pointer;
-	width: 133px;
+	padding: 0px;
-	padding: 0;
+	margin: 0px;
-	margin: 0;
+	height: 125px;
-	height: 197px;
+	border-bottom-color: #777;
-	position: relative;
+	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;
+	/*Cross-browser background transparency*/
-	opacity: 0.4;
+	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 #c9c9c9;
-	border: 1px solid #0E90D2;
+	-moz-transition: all 0.15s linear 0s;
-	width: 95%;
+	border-radius: 2px 2px 2px 2px;
-	padding-right: 20px;
+	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;
+	width: 32px;
-	margin-left: -20px;
+	margin-left: -32px;
-}
+}

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

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;
+	background-color: #eaeff7;
-}
-.uls-lcd-region-section {
-	clear: both;
 }
 /* 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: "";
+.uls-language-list-footer  .three.columns {
-	display: table;
+	width: 22%;
+	
+}
+
+
+.uls-language-block{
+	width:100%;
 }
-div.uls-lcd-row {
-	padding-bottom: 10px;
-}

resources/ext.uls.data.utils.js

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

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' );
-
+			var languageName = this.options.languages[langCode];
-			return matcher.test( this.options.languages[langCode] ) ||
+			return matcher.test( languageName ) ||
 				matcher.test( $.uls.data.autonym( langCode ) ) ||
 				matcher.test( langCode ) ||
 				matcher.test( $.uls.data.script( langCode ) );

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 = $( '<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 );
+				var $section = $( '<div>' ).addClass( 'twelve columns uls-lcd-region-section' ).prop( 'id', regionCode );
-				$section.append( $( '<h3>' ).html( 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.
+				// 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();
 		},