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 1e0bf16..48436c5 100644 (file)
--- 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 3750593..965c783 100644 (file)
--- 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 (file)
index 0000000..1f0c626
--- /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 7d4c61c..349a721 100644 (file)
--- 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+
+}