From 9da8a8cb6ce1812ddab240679ab0d9b80e0aa945 Mon Sep 17 00:00:00 2001
From: jdlrobson <jdlrobson@gmail.com>
Date: Wed, 11 Sep 2019 14:31:56 -0700
Subject: [PATCH] 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
---
 includes/specials/SpecialListFiles.php        |  7 +++
 languages/i18n/en.json                        |  1 +
 languages/i18n/qqq.json                       |  1 +
 resources/Resources.php                       |  1 +
 .../src/mediawiki.special/listFiles.less      | 43 +++++++++++++++++++
 5 files changed, 53 insertions(+)
 create mode 100644 resources/src/mediawiki.special/listFiles.less

diff --git a/includes/specials/SpecialListFiles.php b/includes/specials/SpecialListFiles.php
index 02a468b098..bc4f7e276f 100644
--- 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 69d4fe2a00..24003ebdf3 100644
--- 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 436c11ba9c..9336983620 100644
--- 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 c414c7ba9e..b8f23d547b 100644
--- 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
index 0000000000..c54eb0902e
--- /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
+	}
+}
-- 
2.20.1