Mobile friendly styling of Special:ListFiles

This makes core's Special:ListFiles match the styling of
Special:Uploads that is provided by MobileFrontend. The latter
can be removed once this change is incorporated.

The tablet/desktop mode of this page is not impacted except
that the title will be context aware when a username is selected
to show "Uploads by <username>" rather than the generic "list files".

Bug: T102139
Change-Id: I266313b8c71bdf410d336e020aca7dabbe115be5

diff --git a/includes/specials/SpecialListFiles.php b/includes/specials/SpecialListFiles.php
index 02a468b..bc4f7e2 100644 (file)
--- a/includes/specials/SpecialListFiles.php
+++ b/includes/specials/SpecialListFiles.php
@@ -40,6 +40,11 @@ class SpecialListFiles extends IncludableSpecialPage {
                        $search = $this->getRequest()->getText( 'ilsearch', '' );
                        $showAll = $this->getRequest()->getBool( 'ilshowall', false );
                }
+               if ( $userName ) {
+                       $pageTitle = $this->msg( 'listfiles_subpage', $userName );
+               } else {
+                       $pageTitle = $this->msg( 'listfiles' );
+               }
 
                $pager = new ImageListPager(
                        $this->getContext(),
@@ -51,6 +56,8 @@ class SpecialListFiles extends IncludableSpecialPage {
                );
 
                $out = $this->getOutput();
+               $out->setPageTitle( $pageTitle );
+               $out->addModuleStyles( 'mediawiki.special' );
                if ( $this->including() ) {
                        $out->addParserOutputContent( $pager->getBodyOutput() );
                } else {

diff --git a/languages/i18n/en.json b/languages/i18n/en.json
index 69d4fe2..24003eb 100644 (file)
--- a/languages/i18n/en.json
+++ b/languages/i18n/en.json
@@ -1893,6 +1893,7 @@
        "listfiles-userdoesnotexist": "User account \"$1\" is not registered.",
        "imgfile": "file",
        "listfiles": "File list",
+       "listfiles_subpage": "Uploads by $1",
        "listfiles_thumb": "Thumbnail",
        "listfiles_date": "Date",
        "listfiles_name": "Name",

diff --git a/languages/i18n/qqq.json b/languages/i18n/qqq.json
index 436c11b..9336983 100644 (file)
--- a/languages/i18n/qqq.json
+++ b/languages/i18n/qqq.json
@@ -2103,6 +2103,7 @@
        "listfiles-userdoesnotexist": "This message is displayed on [[Special:ListFiles]] when a invalid username is entered.",
        "imgfile": "{{Identical|File}}",
        "listfiles": "Page title and grouping label for the form displayed on [[Special:ListFiles]].\n{{Identical|List}}",
+       "listfiles_subpage": "Page title and grouping label for the form displayed on [[Special:ListFiles]].\n{{Identical|List}} when a username is selected. Parameters:\n * $1 - username",
        "listfiles_thumb": "{{Identical|Thumbnail}}",
        "listfiles_date": "Column header for the result table displayed on [[Special:ListFiles]].\n{{Identical|Date}}",
        "listfiles_name": "Column header for the result table displayed on [[Special:ListFiles]].\n{{Identical|Name}}",

diff --git a/resources/Resources.php b/resources/Resources.php
index c414c7b..b8f23d5 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1998,6 +1998,7 @@ return [
                        'resources/src/mediawiki.special/userrights.css',
                        'resources/src/mediawiki.special/watchlist.css',
                        'resources/src/mediawiki.special/block.less',
+                       'resources/src/mediawiki.special/listFiles.less',
                        'resources/src/mediawiki.special/blocklist.less',
                ],
                'targets' => [ 'desktop', 'mobile' ],

diff --git a/resources/src/mediawiki.special/listFiles.less b/resources/src/mediawiki.special/listFiles.less
new file mode 100644 (file)
index 0000000..c54eb09
--- /dev/null
+++ b/resources/src/mediawiki.special/listFiles.less
@@ -0,0 +1,43 @@
+@import 'mediawiki.ui/variables';
+
+// On mobile devices the table layout is collapsed.
+@media all and ( max-width: @width-breakpoint-tablet ) {
+       .mw-special-Listfiles {
+               // stylelint-disable selector-class-pattern
+               thead,
+               .TablePager_col_count,
+               .TablePager_col_img_size,
+               .TablePager_col_img_name,
+               .TablePager_col_img_timestamp {
+                       display: none;
+               }
+
+               tbody,
+               tr,
+               td,
+               .mw-datatable,
+               .TablePager_col_img_description,
+               .TablePager_col_thumb {
+                       display: block;
+               }
+
+               .mw-datatable,
+               .mw-datatable th,
+               .mw-datatable td {
+                       border: 0;
+               }
+
+               .TablePager_col_img_user_text,
+               .TablePager_col_img_description {
+                       color: @colorGray5;
+                       margin: 0.5em 0 0;
+                       padding-bottom: 40px;
+                       line-height: 1.5;
+               }
+
+               .TablePager_col_img_user_text {
+                       padding: 0;
+               }
+               // stylelint-enable selector-class-pattern
+       }
+}