From: Sumit Asthana <asthana.sumit23@gmail.com>
Date: Sun, 1 Feb 2015 08:51:39 +0000 (+0530)
Subject: CategoryView modified to use css columns
X-Git-Tag: 1.31.0-rc.0~12295^2
X-Git-Url: https://git.cyclocoop.org/admin/?a=commitdiff_plain;h=8d25d1b1ea18934c88a2fb1a3433348715a42b6b;p=lhc%2Fweb%2Fwiklou.git

CategoryView modified to use css columns

The categories on Category page were listed using table layout. This layout has
been changed to the responsive css column structure, which is 3 column wide
beyond 768px, otherwise shrinks to a single column.

break-inside is used which needs some consideration, see here:
http://css-tricks.com/almanac/properties/b/break-inside/

Bug: T55130
Change-Id: I437e6079b20e110047f93fb5c09aae40189f1ec0
---

diff --git a/includes/CategoryViewer.php b/includes/CategoryViewer.php
index 1e0bf16c9f..48436c5d67 100644
--- a/includes/CategoryViewer.php
+++ b/includes/CategoryViewer.php
@@ -89,6 +89,9 @@ class CategoryViewer extends ContextSource {
 	) {
 		$this->title = $title;
 		$this->setContext( $context );
+		$this->getOutput()->addModuleStyles( array(
+			'mediawiki.action.view.categoryPage.styles'
+		) );
 		$this->from = $from;
 		$this->until = $until;
 		$this->limit = $context->getConfig()->get( 'CategoryPagingLimit' );
@@ -528,8 +531,7 @@ class CategoryViewer extends ContextSource {
 	 * TODO: Take the headers into account when creating columns, so they're
 	 * more visually equal.
 	 *
-	 * More distant TODO: Scrap this and use CSS columns, whenever IE finally
-	 * supports those.
+	 * TODO: shortList and columnList are similar, need merging
 	 *
 	 * @param array $articles
 	 * @param string[] $articles_start_char
@@ -538,50 +540,34 @@ class CategoryViewer extends ContextSource {
 	 */
 	static function columnList( $articles, $articles_start_char ) {
 		$columns = array_combine( $articles, $articles_start_char );
-		# Split into three columns
-		$columns = array_chunk( $columns, ceil( count( $columns ) / 3 ), true /* preserve keys */ );
 
-		$ret = '<table style="width: 100%;"><tr style="vertical-align: top;">';
-		$prevchar = null;
+		$ret = Html::openElement( 'div', array( 'class' => 'mw-category' ) );
 
-		foreach ( $columns as $column ) {
-			$ret .= '<td style="width: 33.3%;">';
-			$colContents = array();
+		$colContents = array();
 
-			# Kind of like array_flip() here, but we keep duplicates in an
-			# array instead of dropping them.
-			foreach ( $column as $article => $char ) {
-				if ( !isset( $colContents[$char] ) ) {
-					$colContents[$char] = array();
-				}
-				$colContents[$char][] = $article;
+		# Kind of like array_flip() here, but we keep duplicates in an
+		# array instead of dropping them.
+		foreach ( $columns as $article => $char ) {
+			if ( !isset( $colContents[$char] ) ) {
+				$colContents[$char] = array();
 			}
+			$colContents[$char][] = $article;
+		}
 
-			$first = true;
-			foreach ( $colContents as $char => $articles ) {
-				# Change space to non-breaking space to keep headers aligned
-				$h3char = $char === ' ' ? '&#160;' : htmlspecialchars( $char );
+		foreach ( $colContents as $char => $articles ) {
+			# Change space to non-breaking space to keep headers aligned
+			$h3char = $char === ' ' ? '&#160;' : htmlspecialchars( $char );
 
-				$ret .= '<h3>' . $h3char;
-				if ( $first && $char === $prevchar ) {
-					# We're continuing a previous chunk at the top of a new
-					# column, so add " cont." after the letter.
-					$ret .= ' ' . wfMessage( 'listingcontinuesabbrev' )->escaped();
-				}
-				$ret .= "</h3>\n";
+			$ret .= '<div class="mw-category-group"><h3>' . $h3char;
+			$ret .= "</h3>\n";
 
-				$ret .= '<ul><li>';
-				$ret .= implode( "</li>\n<li>", $articles );
-				$ret .= '</li></ul>';
-
-				$first = false;
-				$prevchar = $char;
-			}
+			$ret .= '<ul><li>';
+			$ret .= implode( "</li>\n<li>", $articles );
+			$ret .= '</li></ul></div>';
 
-			$ret .= "</td>\n";
 		}
 
-		$ret .= '</tr></table>';
+		$ret .= Html::closeElement( 'div' );
 		return $ret;
 	}
 
diff --git a/resources/Resources.php b/resources/Resources.php
index 37505936da..965c78330a 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1110,6 +1110,10 @@ return array(
 			'metadata-collapse',
 		),
 	),
+	'mediawiki.action.view.categoryPage.styles' => array(
+		'styles' => 'resources/src/mediawiki.action/mediawiki.action.view.categoryPage.less',
+		'targets' => array( 'desktop', 'mobile' )
+	),
 	'mediawiki.action.view.postEdit' => array(
 		'templates' => array(
 			'postEdit.html' => 'resources/src/mediawiki.action/templates/postEdit.html',
diff --git a/resources/src/mediawiki.action/mediawiki.action.view.categoryPage.less b/resources/src/mediawiki.action/mediawiki.action.view.categoryPage.less
new file mode 100644
index 0000000000..1f0c626e57
--- /dev/null
+++ b/resources/src/mediawiki.action/mediawiki.action.view.categoryPage.less
@@ -0,0 +1,14 @@
+@import "mediawiki.mixins";
+
+.mw-category {
+	.column-count(1);
+
+	.mw-category-group {
+		.column-break-inside(avoid);
+	}
+}
+@media screen and ( min-width: 768px ) {
+	.mw-category {
+		.column-count(3);
+	}
+}
diff --git a/resources/src/mediawiki.less/mediawiki.mixins.less b/resources/src/mediawiki.less/mediawiki.mixins.less
index 7d4c61c296..349a721a3e 100644
--- a/resources/src/mediawiki.less/mediawiki.mixins.less
+++ b/resources/src/mediawiki.less/mediawiki.mixins.less
@@ -72,3 +72,16 @@
 	-webkit-box-shadow: @value; // Safari 3.1-5.0, iOS 3.2-4.3, Android 2.1-3.0
 	box-shadow: @value; // Chrome 10+, Firefox 4+, IE 9+, Safari 5.1+, Opera 11+, iOS 5+, Android 4+
 }
+
+.column-count(@value) {
+	-webkit-column-count: @value;
+	-moz-column-count: @value;
+	-o-column-count: @value;
+	column-count: @value;
+}
+
+.column-break-inside(@value) {
+	-webkit-column-break-inside: @value; // Chrome Any, Safari 3+, Opera 11.1+
+	page-break-inside: @value; // Firefox 1.5+
+	break-inside: @value; // IE 10+
+}