From 24558b5a27d76ea49e06dce705e16e6710add3b7 Mon Sep 17 00:00:00 2001
From: S Page <spage@wikimedia.org>
Date: Tue, 28 May 2013 16:47:06 -0700
Subject: [PATCH] benefits icon part of background, not float

The separate icon floating left made the benefit text not request a
width, so the benefits column width was determined by the h2 "made by
people like you" heading and a short h2 could clip big numbers.

Now the icon is part of the background for the text div, and the column
width is the larger of h2 heading and benefits.

Bug: 48909
Change-Id: Iaf5fb1ccb4f50d34cad8a29b2bdd8f5b267ef008
---
 includes/templates/UsercreateVForm.php        |  9 ++----
 .../mediawiki.special.createAccount.vform.css | 28 ++++++++-----------
 2 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/includes/templates/UsercreateVForm.php b/includes/templates/UsercreateVForm.php
index 2e72f70da1..2f90d3ceaf 100644
--- a/includes/templates/UsercreateVForm.php
+++ b/includes/templates/UsercreateVForm.php
@@ -270,12 +270,9 @@ class UsercreateTemplateVForm extends BaseTemplate {
 		// Pass each benefit's head text (by default a number) as a parameter to the body's message for PLURAL handling.
 		$headUnescaped = $this->getMsg( "createacct-benefit-head$benefitIdx" )->text();
 	?>
-		<div>
-			<div class="mw-benefits-icon <?php $this->msg( "createacct-benefit-icon$benefitIdx" ); ?>"></div>
-			<div class="mw-number-text">
-				<h3><?php $this->msg( "createacct-benefit-head$benefitIdx" ); ?></h3>
-				<p><?php echo $this->getMsg( "createacct-benefit-body$benefitIdx" )->params( $headUnescaped )->escaped(); ?></p>
-			</div>
+		<div class="mw-number-text <?php $this->msg( "createacct-benefit-icon$benefitIdx" ); ?>">
+			<h3><?php $this->msg( "createacct-benefit-head$benefitIdx" ); ?></h3>
+			<p><?php echo $this->getMsg( "createacct-benefit-body$benefitIdx" )->params( $headUnescaped )->escaped(); ?></p>
 		</div>
 	<?php
 	}
diff --git a/resources/mediawiki.special/mediawiki.special.createAccount.vform.css b/resources/mediawiki.special/mediawiki.special.createAccount.vform.css
index ef16a1d3a4..11d00e75d0 100644
--- a/resources/mediawiki.special/mediawiki.special.createAccount.vform.css
+++ b/resources/mediawiki.special/mediawiki.special.createAccount.vform.css
@@ -41,36 +41,27 @@
 }
 
 div.mw-createacct-benefits-container {
-	float: left
+	/* Keeps this column compact and close to the form, but tends to squish contents. */
+	float: left;
 }
 
 div.mw-createacct-benefits-container h2 {
 	margin-bottom: 30px;
 }
 
-div.mw-benefits-icon {
-	display: inline-block;
-	padding: 0;
-	float: left;
-	width: 80px;
-	height: 75px;
-	margin-right: 15px;
-	border: 0;
-}
-
-.mw-benefits-icon.icon-edits {
+.mw-number-text.icon-edits {
 	/* @embed */
-	background: url(images/icon-edits.png) no-repeat right;
+	background: url(images/icon-edits.png) no-repeat left center;
 }
 
-.mw-benefits-icon.icon-pages {
+.mw-number-text.icon-pages {
 	/* @embed */
-	background: url(images/icon-pages.png) no-repeat right;
+	background: url(images/icon-pages.png) no-repeat left center;
 }
 
-.mw-benefits-icon.icon-contributors {
+.mw-number-text.icon-contributors {
 	/* @embed */
-	background: url(images/icon-contributors.png) no-repeat right;
+	background: url(images/icon-contributors.png) no-repeat left center;
 }
 
 /* Special font for numbers in benefits*/
@@ -86,10 +77,13 @@ div.mw-number-text h3 {
 	text-align: center;
 }
 
+/* Contains a number and explanatory text, with space for an icon */
 div.mw-number-text {
 	display: block;
 	font-size: 1.2em;
 	color: #444;
 	margin-top: 1em;
+	padding: 0 0 0 95px; /* 80px wide icon plus "margin" */
+	min-height: 75px; /* matches max icon height, ensures icon emblem is visible */
 	text-align: center;
 }
-- 
2.20.1