From: Sumit Asthana <asthana.sumit23@gmail.com>
Date: Wed, 28 Jan 2015 19:35:20 +0000 (+0530)
Subject: CategoryView modified to use css columns
X-Git-Tag: 1.31.0-rc.0~12535^2~1
X-Git-Url: http://git.cyclocoop.org/%24image?a=commitdiff_plain;h=cb5a0f20a436b90a5cfabfba84554e712b32794a;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.

Bug: T85496
Change-Id: I2d3583efd470500c374965a433538845fcfade26
---

diff --git a/includes/CategoryViewer.php b/includes/CategoryViewer.php
index c898ec975e..d527aa802e 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' );
@@ -533,9 +536,6 @@ 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.
-	 *
 	 * @param array $articles
 	 * @param string[] $articles_start_char
 	 * @return string
@@ -546,11 +546,10 @@ class CategoryViewer extends ContextSource {
 		# 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;">';
+		$ret = Html::openElement( 'div', array( 'class' => 'mw-category' ) );
 		$prevchar = null;
 
 		foreach ( $columns as $column ) {
-			$ret .= '<td style="width: 33.3%;">';
 			$colContents = array();
 
 			# Kind of like array_flip() here, but we keep duplicates in an
@@ -567,26 +566,26 @@ class CategoryViewer extends ContextSource {
 				# Change space to non-breaking space to keep headers aligned
 				$h3char = $char === ' ' ? '&#160;' : htmlspecialchars( $char );
 
-				$ret .= '<h3>' . $h3char;
+				$ret .= Html::openElement( '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 .= Html::closeElement( 'h3' )."\n";
 
-				$ret .= '<ul><li>';
-				$ret .= implode( "</li>\n<li>", $articles );
-				$ret .= '</li></ul>';
+				$ret .= Html::openElement('ul').Html::openElement('li');
+				$ret .= implode( Html::element( 'li' ), $articles );
+				$ret .= Html::closeElement('ul').Html::closeElement('li');
 
 				$first = false;
 				$prevchar = $char;
 			}
 
-			$ret .= "</td>\n";
+			$ret .= "\n";
 		}
 
-		$ret .= '</tr></table>';
+		$ret .= Html::closeElement( 'div' );
 		return $ret;
 	}
 
diff --git a/resources/Resources.php b/resources/Resources.php
index 6e8cd99df0..4ee516ba87 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1094,6 +1094,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..9a6fd31f99
--- /dev/null
+++ b/resources/src/mediawiki.action/mediawiki.action.view.categoryPage.less
@@ -0,0 +1,10 @@
+@import "mediawiki.mixins";
+
+.mw-category {
+	.column-count(1);
+}
+@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 c84c884dd3..e6e8a5a5d5 100644
--- a/resources/src/mediawiki.less/mediawiki.mixins.less
+++ b/resources/src/mediawiki.less/mediawiki.mixins.less
@@ -64,3 +64,10 @@
 	-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;
+}
\ No newline at end of file