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 c898ec9..d527aa8 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' );
@@ -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 6e8cd99..4ee516b 100644 (file)
--- 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 (file)
index 0000000..9a6fd31
--- /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 c84c884..e6e8a5a 100644 (file)
--- 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