Misc UI fixes

* Fix the columns breaking when language name breaks to new line
* Fix the Map highlighting when no region id in viewport.
* Correction of color codes, margins according to design.

Change-Id: I0121de92bdf5340bf2365c3b7d6045ef963e6d2a

resources/css/ext.uls.css

@@ -30,6 +30,11 @@
 	background-clip: padding-box;
 }
 
+.uls-menu a {
+	font-weight: normal;
+	color: #0088CC;
+}
+
 .uls-menu-header {
 	margin: 2%;
 	margin-top: 20px;
@@ -44,7 +49,7 @@
 }
 
 .uls-menu-header-left h1 {
-	font-weight: bold;
+	font-weight: normal;
 	padding-top: 12px;
 	border:none;
 	padding-bottom: 3px;
@@ -93,25 +98,6 @@
 	cursor: pointer;
 }
 
-/* Language list */
-.uls-language-list {
-	height: 300px;
-	overflow: auto;
-	margin-top: 2%;
-}
-
-.uls-language-list ul li {
-	font-weight: bold;
-}
-
-.uls-language-list strong {
-	text-decoration: underline;
-}
-
-.uls-language-list a {
-	color: #0645AD;
-}
-
 input#languagefilter {
 	height: 20px;
 	border: 1px solid #0E90D2;

resources/css/ext.uls.lcd.css

@@ -1,16 +1,47 @@
 .uls-lcd-region-section h3 {
 	color: #999999;
 }
-
 .uls-lcd-region-section ul {
 	list-style: none;
-	margin-left: 0;
 	float: left;
-	width: 150px;
-	padding: 10px;
-	clear: right;
+	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;
 }
+/* Language list */
+.uls-language-list {
+	height: 300px;
+	overflow: auto;
+	margin-top: 2%;
+}
+.uls-language-list ul li {
+	font-weight: normal;
+	/* TODO: maybe not the best way */
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+.uls-language-list strong {
+	text-decoration: underline;
+}
+.uls-language-list a {
+	font-weight: normal;
+	color: #0088CC;
+}
+div.uls-lcd-row:after {
+	clear: both;
+}
+div.uls-lcd-row:before, div.uls-lcd-row:after {
+	content: "";
+	display: table;
+}
+div.uls-lcd-row {
+	padding-bottom: 10px;
+}

resources/ext.uls.lcd.js

@@ -69,11 +69,18 @@
 
 		getColumn: function( regionCode ) {
 			var $divRegionCode = $( 'div#' + regionCode );
+			var $rowDiv = $divRegionCode.find( 'div.uls-lcd-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.
+				if ( $rowDiv.length === 0 || $rowDiv.find( 'ul' ).length >= 4 ) {
+					$rowDiv = $( '<div>' ).addClass( 'uls-lcd-row' );
+					$divRegionCode.append( $rowDiv );
+				}
 				$ul = $( '<ul>' );
-				$divRegionCode.append( $ul );
+				$rowDiv.append( $ul );
 			}
 
 			$divRegionCode.show();
@@ -87,13 +94,12 @@
 				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.
-				$section.append( $( '<ul>' ) );
 				that.$element.append( $section );
 			} );
 		},
 
 		empty: function() {
-			this.$element.find( 'div ul' ).remove();
+			this.$element.find( 'div.uls-lcd-row' ).remove();
 			this.$element.find( 'div' ).hide();
 		},