Spage has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/66170


Change subject: benefits icon part of background, not float
......................................................................

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
(cherry picked from commit 24558b5a27d76ea49e06dce705e16e6710add3b7)
---
M includes/templates/UsercreateVForm.php
M resources/mediawiki.special/mediawiki.special.createAccount.vform.css
2 files changed, 15 insertions(+), 24 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core 
refs/changes/70/66170/1

diff --git a/includes/templates/UsercreateVForm.php 
b/includes/templates/UsercreateVForm.php
index 2e72f70..2f90d3c 100644
--- a/includes/templates/UsercreateVForm.php
+++ b/includes/templates/UsercreateVForm.php
@@ -270,12 +270,9 @@
                // 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
--- 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-number-text.icon-edits {
+       /* @embed */
+       background: url(images/icon-edits.png) no-repeat left center;
 }
 
-.mw-benefits-icon.icon-edits {
+.mw-number-text.icon-pages {
        /* @embed */
-       background: url(images/icon-edits.png) no-repeat right;
+       background: url(images/icon-pages.png) no-repeat left center;
 }
 
-.mw-benefits-icon.icon-pages {
+.mw-number-text.icon-contributors {
        /* @embed */
-       background: url(images/icon-pages.png) no-repeat right;
-}
-
-.mw-benefits-icon.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 @@
        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;
 }

-- 
To view, visit https://gerrit.wikimedia.org/r/66170
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: Iaf5fb1ccb4f50d34cad8a29b2bdd8f5b267ef008
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/core
Gerrit-Branch: wmf/1.22wmf5
Gerrit-Owner: Spage <[email protected]>

_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to