Split up TablePager css class, introduce .mw-datatable

* All tables generated with the TablePager PHP class use this css class for their styling. This visual look has since inspired several templates and other tables on the wikis and in extensions to present data with row-highlighting functionality. To make it easier to do that, separating the generic styling into a new css class "mw-datatable" and use it in the TablePager PHP class.
* Kept pager-specific "min-width" rule under .TablePager
* Other CSS classes for TablePager are also untouched
* Changed table-heading color slightly to not be exactly the same as the hover-style (design/usability)

diff --git a/includes/Pager.php b/includes/Pager.php
index 81d9559..a5236e3 100644 (file)
--- a/includes/Pager.php
+++ b/includes/Pager.php
@@ -821,7 +821,7 @@ abstract class TablePager extends IndexPager {
                $tableClass = htmlspecialchars( $this->getTableClass() );
                $sortClass = htmlspecialchars( $this->getSortHeaderClass() );
 
-               $s = "<table style='border:1;' class=\"$tableClass\"><thead><tr>\n";
+               $s = "<table style='border:1;' class=\"mw-datatable $tableClass\"><thead><tr>\n";
                $fields = $this->getFieldNames();
 
                # Make table header

diff --git a/includes/specials/SpecialAllmessages.php b/includes/specials/SpecialAllmessages.php
index 8f41c82..4a8db66 100644 (file)
--- a/includes/specials/SpecialAllmessages.php
+++ b/includes/specials/SpecialAllmessages.php
@@ -319,7 +319,7 @@ class AllmessagesTablePager extends TablePager {
        }
 
        function getStartBody() {
-               return Xml::openElement( 'table', array( 'class' => 'TablePager', 'id' => 'mw-allmessagestable' ) ) . "\n" .
+               return Xml::openElement( 'table', array( 'class' => 'mw-datatable TablePager', 'id' => 'mw-allmessagestable' ) ) . "\n" .
                        "<thead><tr>
                                <th rowspan=\"2\">" .
                                        wfMsg( 'allmessagesname' ) . "

diff --git a/skins/common/shared.css b/skins/common/shared.css
index 8ba4cea..66c02a6 100644 (file)
--- a/skins/common/shared.css
+++ b/skins/common/shared.css
@@ -573,16 +573,37 @@ table.collapsed tr.collapsable {
 }
 
 /**
- * Table pager (e.g. Special:ListFiles)
- * - remove underlines from the navigation link
- * - collapse borders
- * - set the borders to outsets (similar to Special:AllMessages)
- * - remove line wrapping for all td and th, set background color
- * - restore line wrapping for the last two table cells (description and size)
+ * Data table style
+ *
+ * Transparent table with suddle borders
+ * and blue row-highlighting.
+ */
+.mw-datatable {
+       border-collapse: collapse;
+}
+.mw-datatable,
+.mw-datatable td,
+.mw-datatable th {
+       border: 1px solid #aaaaaa;
+       padding: 0 0.15em 0 0.15em;
+}
+.mw-datatable th {
+       background-color: #ddddff;
+}
+.mw-datatable td {
+       background-color: #ffffff;
+}
+.mw-datatable tr:hover td {
+       background-color: #eeeeff;
+}
+
+
+/**
+ * TablePager tables generated by the TablePager PHP class
+ * in MediaWiki (e.g. Special:ListFiles).
  */
 .TablePager {
        min-width: 80%;
-       border-collapse: collapse;
 }
 .TablePager_nav {
        margin: 0 auto;
@@ -594,21 +615,6 @@ table.collapsed tr.collapsable {
 .TablePager_nav a {
        text-decoration: none;
 }
-.TablePager,
-.TablePager td,
-.TablePager th {
-       border: 1px solid #aaaaaa;
-       padding: 0 0.15em 0 0.15em;
-}
-.TablePager th {
-       background-color: #eeeeff;
-}
-.TablePager td {
-       background-color: #ffffff;
-}
-.TablePager tr:hover td {
-       background-color: #eeeeff;
-}
 
 .imagelist td,
 .imagelist th {