Style changes to lcd

This change is larger than it should because I came across lots of
unused CSS which I removed or simplified.

https://phabricator.wikimedia.org/T138235

css/jquery.uls.css

@@ -1,4 +1,3 @@
-
 .uls-trigger {
 	/* @embed */
 	background: transparent url('../images/icon-language.png') no-repeat scroll left center;
@@ -51,64 +50,9 @@
 	min-width: 150px;
 }
 
-.uls-title-region a {
-	padding-left: 15px;
-}
-.uls-menu .uls-title {
-	font-weight: normal;
-	border: none;
-	padding-left: 15px;
-	font-size: 18pt;
-	line-height: 1.25em;
-	color: #555;
-}
-.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;
-	color: #555;
-}
-.uls-menu .uls-lcd-region-section .uls-lcd-region-title {
-	color: #777;
-	font-size: 14pt;
-	font-weight: lighter;
-	line-height: 1.5em;
-	padding-left: 0;
-	margin-top: 0;
-	margin-bottom: 10px;
-	border-bottom: none;
-}
-div.uls-region {
-	cursor: pointer;
-	padding: 0;
-	margin: 0;
-	height: 120px;
-	border-bottom-color: transparent;
-	border-bottom-style: solid;
-	border-bottom-width: 2px;
-}
-
-.uls-region a {
-	bottom: 2px;
-	left: 2px;
-	padding: 0;
-	position: absolute;
-	font-size: 13px;
-	line-height: 1.2em;
-	text-decoration: none;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	width: 99%;
-}
-
 .uls-search {
 	background-color: white;
-	padding: 5px;
+	padding: 5px 16px;
 	border-bottom-width: 1px;
 	border-bottom-style: solid;
 	border-bottom-color: #DDD;
@@ -121,7 +65,7 @@ div.uls-region {
 /* Make space for magnifying class on the front */
 .uls-search-wrapper {
 	position: relative;
-	padding-left: 40px;
+	padding-left: 44px;
 	margin-right: 5px;
 	height: 32px;
 }
@@ -131,10 +75,10 @@ div.uls-region {
 	background-image: -webkit-linear-gradient(transparent, transparent), url('../images/search.svg');
 	/* @embed */
 	background-image: linear-gradient(transparent, transparent), url('../images/search.svg');
-	background-size: 28px;
+	background-size: 20px;
 	background-position: center center;
 	height: 32px;
-	width: 40px;
+	width: 44px;
 	display: block;
 	position: absolute;
 	left: 0;
@@ -147,7 +91,7 @@ div.uls-region {
 
 /* There are two input boxes. This class applies to both of them */
 .uls-filterinput {
-	font-size: 18px;
+	font-size: 16px;
 	height: 32px;
 	width: 100%;
 	/* For the custom clear (X) icon */

css/jquery.uls.lcd.css

@@ -1,13 +1,12 @@
-.uls-lcd-region-section ul li:hover {
+/*
-	background-color: #eaeff7;
+ * Language Category Display (LCD) consists of multiple sections:
-}
+ * - one to display when there are no search results (which might display suggested languages)
+ * - one for each region of the world, plus regions for world languages and suggested languages
+ * The regions consist of one or more rows (blocks) which consist of one-to-four columns. Each
+ * column is an ul element, and contains up to 8 li elements, each containing a link.
+ */
 
-.uls-lcd-region-section {
+.uls-lcd {
-	margin-top: 10px;
-}
-
-/* Language list */
-.uls-language-list {
 	height: 20em;
 	/* Work around Chrome bug where it places scrollbar on the left in
 	 * in RTL mode but actually reserves the place on the right side */
@@ -15,13 +14,47 @@
 	overflow-y: auto;
 	width: auto;
 	background: #FCFCFC;
+	padding: 0 16px;
 }
 
-.uls-language-block ul {
+.uls-lcd-region-section {
-	margin: 0 0 1.5em;
+	margin-top: 10px;
 }
 
-.uls-language-list ul {
+.uls-lcd-region-title {
+	color: #777;
+	font-size: 14px;
+	padding-left: 28px;
+}
+
+/*
+ * We need to have this as a grid row to push rest of the content below it, but resetting
+ * padding and margin so that calculating them for children is easier.
+ */
+.grid .uls-language-block.row {
+	padding: 0;
+	margin: 0;
+}
+
+/*
+ * Each block should have 16px padding on both sides. But because we already gave
+ * 16px for the whole menu, we need to remove it for first and last items the blocks.
+ */
+.grid .uls-language-block > ul {
+	margin: 0 0 20px 0;
+	padding: 0 16px;
+}
+
+.grid .uls-language-block > ul:first-child {
+	padding-left: 0;
+}
+
+.grid .uls-language-block > ul:last-child {
+	padding-right: 0;
+}
+
+
+.uls-language-block > ul {
 	/*
 	 * We don't want any visible bullets in this list. Not by default anyway.
 	 * Using very unspecific selector here to allow other classes to override.
@@ -32,8 +65,10 @@
 	list-style-type: none;
 }
 
-.uls-language-list li {
+.uls-language-block > ul > li {
 	cursor: pointer;
+	margin-left: 20px;
+	padding: 8px;
 	/*
 	 * The directionality (ltr/rtl) for each list item is set dynamically
 	 * as HTML attributes in JavaScript. Setting directionality also applies
@@ -46,17 +81,15 @@
 	text-align: left;
 }
 
-/* TODO: looks unused */
+.uls-language-block > ul > li:hover {
-.uls-language-list strong {
+	background-color: #eaeff7;
-	text-decoration: underline;
 }
 
-.uls-language-list a {
+.uls-language-block a {
-	font-weight: normal;
+	cursor: pointer;
 	text-decoration: none;
 	color: #3366bb;
 	font-size: 14px;
-	line-height: 1.6em;
 	display: inline-block;
 	width: 100%;
 	overflow: hidden;
@@ -71,16 +104,22 @@
 	vertical-align: middle;
 }
 
-.uls-language-block {
+/* TODO: ugly hack that forces last matching search results to shift down.
-	width: 100%;
+ * They should be hidden properly.
-}
+ */
-
 .uls-no-results-view {
-	color: #555;
 	height: 100%;
 }
 
+.uls-no-results-found-title {
+	font-size: 16px;
+	padding: 0 16px 0 28px;
+	border-bottom: none;
+	color: #555;
+}
+
 .uls-no-found-more {
+	padding: 0 16px 0 44px;
 	font-size: 0.9em;
 	background: #F8F8F8;
 	width: 100%;
@@ -90,7 +129,3 @@
 	bottom: 0;
 	left: 0;
 }
-
-.uls-no-found-more a {
-	cursor: pointer;
-}

css/jquery.uls.mobile.css

@@ -22,11 +22,6 @@
 		line-height: 1.7em;
 	}
 
-	.uls-mobile div.uls-region {
-		width: 33% !important;
-		float: left !important;
-	}
-
 	.uls-mobile .row {
 		width: auto;
 		min-width: 0;

examples/decorator.html

@@ -26,6 +26,7 @@
 					}
 					$language.prop( 'href', '//' + languageCode + '.wikipedia.org' );
 				},
+				quickList: ['en', 'hi', 'he', 'ml', 'ta', 'fr'] //FIXME
 			} );
 		} );
 	</script>

src/jquery.uls.core.js

@@ -91,7 +91,7 @@
 		this.initialized = false;
 
 		this.$languageFilter = this.$menu.find( '#uls-languagefilter' );
-		this.$resultsView = this.$menu.find( 'div.uls-language-list' );
+		this.$resultsView = this.$menu.find( '.uls-language-list' );
 
 		this.render();
 		this.listen();

src/jquery.uls.lcd.js

@@ -24,18 +24,18 @@
 
 	var noResultsTemplate, LanguageCategoryDisplay;
 
-	noResultsTemplate = $( '<div>' ).addClass( 'twelve columns uls-no-results-view hide' );
+	noResultsTemplate = $( '<div>' ).addClass( 'uls-no-results-view hide' );
 	noResultsTemplate.append(
 		$( '<h2>' )
 			.attr( 'data-i18n', 'uls-no-results-found' )
-			.addClass( 'eleven columns offset-by-one uls-no-results-found-title' )
+			.addClass( 'uls-no-results-found-title' )
 			.text( 'No results found' ),
 		$( '<div>' )
 			.attr( 'id', 'uls-no-found-more' )
 			.addClass( 'uls-no-found-more' )
 			.append(
 				$( '<div>' )
-					.addClass( 'ten columns offset-by-one' )
+					.addClass( '' )
 					.append(
 						$( '<p>' ).append(
 							$( '<span>' ).text( 'You can search by language name, script name, ISO code of language or you can browse by region.' )
@@ -47,7 +47,7 @@
 	LanguageCategoryDisplay = function ( element, options ) {
 		this.$element = $( element );
 		this.options = $.extend( {}, $.fn.lcd.defaults, options );
-		this.$element.addClass( 'lcd' );
+		this.$element.addClass( 'uls-lcd' );
 		this.regionLanguages = {};
 		this.renderTimeout = null;
 		this.cachedQuicklist = null;
@@ -135,14 +135,14 @@
 				}
 
 				$section = $( '<div>' )
-					.addClass( 'eleven columns offset-by-one uls-lcd-region-section hide' )
+					.addClass( 'uls-lcd-region-section hide' )
 					.attr( 'id', regionCode );
 
 				// Show a region heading, unless we are using a narrow ULS
 				if ( lcd.options.columns !== 1 ) {
 					$section.append( $( '<h3>' )
 						.attr( 'data-i18n', 'uls-region-' + regionCode )
-						.addClass( 'eleven columns uls-lcd-region-title' )
+						.addClass( 'uls-lcd-region-title' )
 						.text( regionNames[ regionCode ] )
 					);
 				}
@@ -317,12 +317,12 @@
 			quickList.sort( $.uls.data.sortByAutonym );
 
 			$quickListSection = $( '<div>' )
-				.addClass( 'eleven columns offset-by-one uls-lcd-region-section' )
+				.addClass( 'uls-lcd-region-section' )
 				.attr( 'id', 'uls-lcd-quicklist' );
 
 			$quickListSectionTitle = $( '<h3>' )
 				.attr( 'data-i18n', 'uls-common-languages' )
-				.addClass( 'eleven columns uls-lcd-region-title' )
+				.addClass( 'uls-lcd-region-title' )
 				.text( 'Common languages' ); // This is placeholder text if jquery.i18n not present
 			$quickListSection.append( $quickListSectionTitle );