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

diff --git a/includes/templates/UsercreateVForm.php b/includes/templates/UsercreateVForm.php
index 2e72f70..2f90d3c 100644 (file)
--- 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 ef16a1d..11d00e7 100644 (file)
--- 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;
 }