From 75662dd774c9c9aa693c5aa131fe9d268760b225 Mon Sep 17 00:00:00 2001
From: Ed Sanders <esanders@wikimedia.org>
Date: Tue, 25 Sep 2018 20:26:59 +0100
Subject: [PATCH] Apply tablet restrictions to image floating in Parsoid

Behaviour now matches that of PHP-generated images.

Bug: T205474
Change-Id: If6a8970c95ec5486a79afcef6480dfbc78c17a10
---
 .../minerva.less                              | 55 +++++++++++--------
 1 file changed, 33 insertions(+), 22 deletions(-)

diff --git a/skinStyles/mediawiki.skinning.content.parsoid/minerva.less b/skinStyles/mediawiki.skinning.content.parsoid/minerva.less
index 0c6a854..e2ab897 100644
--- a/skinStyles/mediawiki.skinning.content.parsoid/minerva.less
+++ b/skinStyles/mediawiki.skinning.content.parsoid/minerva.less
@@ -2,6 +2,8 @@
  * Style Parsoid HTML+RDFa output consistent with wikitext from PHP parser.
  */
 
+@import '../../minerva.less/minerva.variables';
+
 /*
  * Auto-numbered external links
  * (copied from MediaWiki's content.parsoid.less)
@@ -23,30 +25,39 @@ figure[ typeof*='mw:Image' ],
 figure[ typeof*='mw:Video' ],
 figure[ typeof*='mw:Audio' ] {
 	max-width: 100%;
-	// Defaults to right alignment when not explicitly set. Should be flippable.
-	margin: 0.6em 0 0.6em 1.4em;
+	// Centered on non-tablet
+	margin: 0 auto;
+}
 
-	&.mw-halign-left {
-		/* @noflip */
-		margin: 0.6em 1.4em 0.6em 0;
-		/* @noflip */
-		clear: left;
-		/* @noflip */
-		float: left;
-	}
-
-	&.mw-halign-right {
-		/* @noflip */
+@media screen and ( min-width: @width-breakpoint-tablet ) {
+	figure[ typeof*='mw:Image' ],
+	figure[ typeof*='mw:Video' ],
+	figure[ typeof*='mw:Audio' ] {
+		// Defaults to right alignment when not explicitly set. Should be flippable.
 		margin: 0.6em 0 0.6em 1.4em;
-		/* @noflip */
-		clear: right;
-		/* @noflip */
-		float: right;
-	}
 
-	&.mw-halign-center {
-		margin: 0.6em auto 0.6em auto;
-		clear: none;
-		float: none;
+		&.mw-halign-left {
+			/* @noflip */
+			margin: 0.6em 1.4em 0.6em 0;
+			/* @noflip */
+			clear: left;
+			/* @noflip */
+			float: left;
+		}
+
+		&.mw-halign-right {
+			/* @noflip */
+			margin: 0.6em 0 0.6em 1.4em;
+			/* @noflip */
+			clear: right;
+			/* @noflip */
+			float: right;
+		}
+
+		&.mw-halign-center {
+			margin: 0.6em auto 0.6em auto;
+			clear: none;
+			float: none;
+		}
 	}
 }