Use CSS columns instead of tables in Special:SpecialPages

On small screens, it will show only one column rather
than two columns.

Bug: T88910
Change-Id: Iabe572e964347902280c8634feee27385c01c877

diff --git a/includes/specials/SpecialSpecialpages.php b/includes/specials/SpecialSpecialpages.php
index ed3ad5b..c3234e1 100644 (file)
--- a/includes/specials/SpecialSpecialpages.php
+++ b/includes/specials/SpecialSpecialpages.php
@@ -96,22 +96,14 @@ class SpecialSpecialpages extends UnlistedSpecialPage {
                $includesCachedPages = false;
 
                foreach ( $groups as $group => $sortedPages ) {
-                       $total = count( $sortedPages );
-                       $middle = ceil( $total / 2 );
-                       $count = 0;
 
                        $out->wrapWikiMsg(
                                "<h2 class=\"mw-specialpagesgroup\" id=\"mw-specialpagesgroup-$group\">$1</h2>\n",
                                "specialpages-group-$group"
                        );
                        $out->addHTML(
-                               Html::openElement(
-                                       'table',
-                                       array( 'style' => 'width:100%;', 'class' => 'mw-specialpages-table' )
-                               ) . "\n" .
-                               Html::openElement( 'tr' ) . "\n" .
-                               Html::openElement( 'td', array( 'style' => 'width:30%;vertical-align:top' ) ) . "\n" .
-                               Html::openElement( 'ul' ) . "\n"
+                               Html::openElement( 'div', array( 'class' => 'mw-specialpages-list' ) )
+                               . '<ul>'
                        );
                        foreach ( $sortedPages as $desc => $specialpage ) {
                                list( $title, $restricted, $cached ) = $specialpage;
@@ -132,21 +124,10 @@ class SpecialSpecialpages extends UnlistedSpecialPage {
                                                array( 'class' => implode( ' ', $pageClasses ) ),
                                                $link
                                        ) . "\n" );
-
-                               # Split up the larger groups
-                               $count++;
-                               if ( $total > 3 && $count == $middle ) {
-                                       $out->addHTML(
-                                               Html::closeElement( 'ul' ) . Html::closeElement( 'td' ) .
-                                               Html::element( 'td', array( 'style' => 'width:10%' ), '' ) .
-                                               Html::openElement( 'td', array( 'style' => 'width:30%' ) ) . Html::openElement( 'ul' ) . "\n"
-                                       );
-                               }
                        }
                        $out->addHTML(
-                               Html::closeElement( 'ul' ) . Html::closeElement( 'td' ) .
-                               Html::element( 'td', array( 'style' => 'width:30%' ), '' ) .
-                               Html::closeElement( 'tr' ) . Html::closeElement( 'table' ) . "\n"
+                               Html::closeElement( 'ul' ) .
+                               Html::closeElement( 'div' )
                        );
                }
 

diff --git a/resources/src/mediawiki.special/mediawiki.special.css b/resources/src/mediawiki.special/mediawiki.special.css
index d245726..a13ec3c 100644 (file)
--- a/resources/src/mediawiki.special/mediawiki.special.css
+++ b/resources/src/mediawiki.special/mediawiki.special.css
@@ -84,13 +84,10 @@ td#mw-prefixindex-nav-form {
        font-weight: bold;
 }
 
-.mw-specialpages-table {
-       margin-top: -1em;
-       margin-bottom: 1em;
-}
-
-.mw-specialpages-table td {
-       vertical-align: top;
+.mw-specialpages-list {
+       -webkit-columns: 16em 2;
+       -moz-columns: 16em 2;
+       columns: 16em 2;
 }
 
 /* Special:Statistics */