Use responsive CSS columns on Special:PrefixIndex and Special:AllPages

Stop using table on Special:PrefixIndex and use CSS columns instead and
removed 'column' parameter from this page.
This will also change the weird ordering (side to side) to the standard
top to bottom instead.

The pagination links hide at the corner on small screens. This can be fixed
later.

Bug: T32965
Change-Id: I720d34e21950c18de3c6e0b1d6d8a4461db495cb

diff --git a/includes/specials/SpecialAllPages.php b/includes/specials/SpecialAllPages.php
index c4a67c0..4348b14 100644 (file)
--- a/includes/specials/SpecialAllPages.php
+++ b/includes/specials/SpecialAllPages.php
@@ -216,7 +216,9 @@ class SpecialAllPages extends IncludableSpecialPage {
                        );
 
                        if ( $res->numRows() > 0 ) {
-                               $out = Xml::openElement( 'ul', array( 'class' => 'mw-allpages-chunk' ) );
+                               $out = Html::openElement( 'div', array( 'class' => 'mw-allpages-body' ) );
+                               $out .= Html::openElement( 'ul', array( 'class' => 'mw-allpages-chunk' ) );
+
                                while ( ( $n < $this->maxPerPage ) && ( $s = $res->fetchObject() ) ) {
                                        $t = Title::newFromRow( $s );
                                        if ( $t ) {
@@ -230,7 +232,8 @@ class SpecialAllPages extends IncludableSpecialPage {
                                        }
                                        $n++;
                                }
-                               $out .= Xml::closeElement( 'ul' );
+                               $out .= Html::closeElement( 'ul' );
+                               $out .= Html::closeElement( 'div' );
                        } else {
                                $out = '';
                        }

diff --git a/includes/specials/SpecialPrefixindex.php b/includes/specials/SpecialPrefixindex.php
index d92010a..bc5dfd0 100644 (file)
--- a/includes/specials/SpecialPrefixindex.php
+++ b/includes/specials/SpecialPrefixindex.php
@@ -36,9 +36,6 @@ class SpecialPrefixindex extends SpecialAllPages {
 
        protected $hideRedirects = false;
 
-       // number of columns in output table
-       protected $columns = 3;
-
        // Inherit $maxPerPage
 
        function __construct() {
@@ -66,7 +63,6 @@ class SpecialPrefixindex extends SpecialAllPages {
                $namespace = (int)$ns; // if no namespace given, use 0 (NS_MAIN).
                $this->hideRedirects = $request->getBool( 'hideredirects', $this->hideRedirects );
                $this->stripPrefix = $request->getBool( 'stripprefix', $this->stripPrefix );
-               $this->columns = $request->getInt( 'columns', $this->columns );
 
                $namespaces = $wgContLang->getNamespaces();
                $out->setPageTitle(
@@ -209,7 +205,8 @@ class SpecialPrefixindex extends SpecialAllPages {
 
                        $n = 0;
                        if ( $res->numRows() > 0 ) {
-                               $out = Xml::openElement( 'table', array( 'class' => 'mw-prefixindex-list-table' ) );
+                               $out = Html::openElement( 'div', array( 'class' => 'mw-prefixindex-body' ) );
+                               $out .= Html::openElement( 'ul', array( 'class' => 'mw-prefixindex-list' ) );
 
                                $prefixLength = strlen( $prefix );
                                while ( ( $n < $this->maxPerPage ) && ( $s = $res->fetchObject() ) ) {
@@ -230,21 +227,13 @@ class SpecialPrefixindex extends SpecialAllPages {
                                        } else {
                                                $link = '[[' . htmlspecialchars( $s->page_title ) . ']]';
                                        }
-                                       if ( $n % $this->columns == 0 ) {
-                                               $out .= '<tr>';
-                                       }
-                                       $out .= "<td>$link</td>";
+
+                                       $out .= "<li> $link </li>\n";
                                        $n++;
-                                       if ( $n % $this->columns == 0 ) {
-                                               $out .= '</tr>';
-                                       }
-                               }
 
-                               if ( $n % $this->columns != 0 ) {
-                                       $out .= '</tr>';
                                }
-
-                               $out .= Xml::closeElement( 'table' );
+                               $out .= Html::closeElement( 'ul' );
+                               $out .= Html::closeElement( 'div' );
                        } else {
                                $out = '';
                        }
@@ -269,7 +258,6 @@ class SpecialPrefixindex extends SpecialAllPages {
                                        'prefix' => $prefix,
                                        'hideredirects' => $this->hideRedirects,
                                        'stripprefix' => $this->stripPrefix,
-                                       'columns' => $this->columns,
                                );
 
                                if ( $namespace || $prefix == '' ) {

diff --git a/resources/src/mediawiki.special/mediawiki.special.css b/resources/src/mediawiki.special/mediawiki.special.css
index 7a15a76..2b028ae 100644 (file)
--- a/resources/src/mediawiki.special/mediawiki.special.css
+++ b/resources/src/mediawiki.special/mediawiki.special.css
@@ -15,32 +15,41 @@
        background-color: #b1ffb1;
 }
 
+/* Common for Special:Allpages and Special:PrefixIndex */
+.mw-allpages-body, .mw-prefixindex-body {
+       columns: 22em 3;
+       -moz-columns: 22em 3;
+       -webkit-columns: 22em 3;
+       break-inside: avoid-column;
+       page-break-inside: avoid;
+       -webkit-column-break-inside: avoid;
+}
+.allpagesredirect {
+       font-style: italic;
+}
+
 /* Special:Allpages */
+.mw-allpages-nav {
+       text-align: right;
+       margin-bottom: 1em;
+}
 table.mw-allpages-table-form {
        width: 100%;
 }
 table.mw-allpages-table-form tr {
        vertical-align: top;
 }
-.mw-allpages-nav {
+
+/* Special:Prefixindex */
+.mw-prefixindex-nav {
        text-align: right;
-       margin-bottom: 1em;
 }
-
-ul.mw-allpages-chunk {
-       margin: 0;
-       padding: 0;
+table#mw-prefixindex-nav-table {
+       width: 100%;
 }
-ul.mw-allpages-chunk li {
-       border-top: 1px solid #ccc;
-       display: inline-block;
-       margin: 0 1% 0 0;
-       padding: .2em 0;
+td#mw-prefixindex-nav-form {
+       margin-bottom: 1em;
        vertical-align: top;
-       width: 31%;
-}
-.allpagesredirect {
-       font-style: italic;
 }
 
 /* Special:Block */
@@ -60,6 +69,9 @@ span.mw-blocklist-actions {
 .mw-uctop {
        font-weight: bold;
 }
+.mw-contributions-form select {
+       vertical-align: middle;
+}
 
 /* Special:EditWatchlist */
 .watchlistredir {
@@ -85,19 +97,6 @@ table.mw-listgrouprights-table tr {
        text-decoration: line-through;
 }
 
-/* Special:Prefixindex */
-table.mw-prefixindex-list-table,
-table#mw-prefixindex-nav-table {
-       width: 100%;
-}
-td#mw-prefixindex-nav-form {
-       margin-bottom: 1em;
-       vertical-align: top;
-}
-.mw-prefixindex-nav {
-       text-align: right;
-}
-
 /* Special:RevisionDelete */
 p.mw-revdel-editreasons {
        font-size: 90%;
@@ -146,8 +145,3 @@ p.mw-upload-editlicenses {
        font-size: 90%;
        text-align: right;
 }
-
-/* Special:Contributions */
-.mw-contributions-form select {
-       vertical-align: middle;
-}

diff --git a/tests/parser/parserTests.txt b/tests/parser/parserTests.txt
index 7719a28..b5d7a11 100644 (file)
--- a/tests/parser/parserTests.txt
+++ b/tests/parser/parserTests.txt
@@ -17067,7 +17067,8 @@ Special page transclusion
 !! wikitext
 {{Special:Prefixindex/Xyzzyx}}
 !! html
-<table class="mw-prefixindex-list-table"><tr><td><a href="/wiki/Xyzzyx" title="Xyzzyx">Xyzzyx</a></td></tr></table>
+<div class="mw-prefixindex-body"><ul class="mw-prefixindex-list"><li> <a href="/wiki/Xyzzyx" title="Xyzzyx">Xyzzyx</a> </li>
+</ul></div>
 
 !! end
 
@@ -17078,8 +17079,10 @@ Special page transclusion twice (bug 5021)
 {{Special:Prefixindex/Xyzzyx}}
 {{Special:Prefixindex/Xyzzyx}}
 !! html
-<table class="mw-prefixindex-list-table"><tr><td><a href="/wiki/Xyzzyx" title="Xyzzyx">Xyzzyx</a></td></tr></table>
-<table class="mw-prefixindex-list-table"><tr><td><a href="/wiki/Xyzzyx" title="Xyzzyx">Xyzzyx</a></td></tr></table>
+<div class="mw-prefixindex-body"><ul class="mw-prefixindex-list"><li> <a href="/wiki/Xyzzyx" title="Xyzzyx">Xyzzyx</a> </li>
+</ul></div>
+<div class="mw-prefixindex-body"><ul class="mw-prefixindex-list"><li> <a href="/wiki/Xyzzyx" title="Xyzzyx">Xyzzyx</a> </li>
+</ul></div>
 
 !! end