From dc40debaea2effd46a43c88d0fc925b3550c829b Mon Sep 17 00:00:00 2001
From: glaisher <glaisher.wiki@gmail.com>
Date: Tue, 21 Apr 2015 17:33:00 +0500
Subject: [PATCH] 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
---
 includes/specials/SpecialSpecialpages.php     | 27 +++----------------
 .../mediawiki.special/mediawiki.special.css   | 11 +++-----
 2 files changed, 8 insertions(+), 30 deletions(-)

diff --git a/includes/specials/SpecialSpecialpages.php b/includes/specials/SpecialSpecialpages.php
index ed3ad5bf7e..c3234e1be6 100644
--- 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 d245726222..a13ec3cc40 100644
--- 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 */
-- 
2.20.1