Bug 746554 - Dropbox and YouSendIt management panes need margins next to used/unused storage counts. r=richard.marti, ui-r=bwinton, a=bienvenu.
authorMike Conley <mconley@mozilla.com>
Fri, 20 Apr 2012 15:11:30 -0400
changeset 11240 b166152a7dd4f1d52ccbbaa94e51a8c1fdc23f3b
parent 11239 c43089235c4ea18f29a3751941f2ba6f0fd2e1fe
child 11241 8654fc0698286fd7ab481ed845f88b48cf9f2dc4
push id463
push userbugzilla@standard8.plus.com
push dateTue, 24 Apr 2012 17:34:51 +0000
treeherdercomm-beta@e53588e8f7b0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersrichard.marti, bwinton, bienvenu
bugs746554
Bug 746554 - Dropbox and YouSendIt management panes need margins next to used/unused storage counts. r=richard.marti, ui-r=bwinton, a=bienvenu.
mail/components/cloudfile/content/Dropbox/management.xhtml
mail/components/cloudfile/content/YouSendIt/management.xhtml
mail/themes/gnomestripe/mail/preferences/preferences.css
mail/themes/pinstripe/mail/preferences/preferences.css
mail/themes/qute/mail/preferences/preferences.css
--- a/mail/components/cloudfile/content/Dropbox/management.xhtml
+++ b/mail/components/cloudfile/content/Dropbox/management.xhtml
@@ -26,16 +26,24 @@
       </div>
       <div id="provider-name">
       <h1>Dropbox</h1>
       </div>
     </div>
     <div id="provider-spacebox">
       <div id="provider-space-visuals"></div>
       <div id="provider-space">
-        <div>&cloudfileMgmt.usedSpace;<span id="file-space-used"/><span id="file-space-used-swatch" class="space-swatch"/></div>
-        <div>&cloudfileMgmt.unusedSpace;<span id="remaining-file-space"/><span id="remaining-file-space-swatch" class="space-swatch"/></div>
+        <div>
+          <label>&cloudfileMgmt.usedSpace;</label>
+          <span id="file-space-used"/>
+          <span id="file-space-used-swatch" class="space-swatch"/>
+        </div>
+        <div>
+          <label>&cloudfileMgmt.unusedSpace;</label>
+          <span id="remaining-file-space"/>
+          <span id="remaining-file-space-swatch" class="space-swatch"/>
+        </div>
         <div id="upgrade"><a href="https://www.dropbox.com/plans">&cloudfileMgmt.upgradeOffer;</a></div>
       </div>
    </div>
    <div id="provider-account-settings"><a href="https://www.dropbox.com/account#settings">&dropboxMgmt.viewSettings;</a></div> 
   </body>
 </html>
--- a/mail/components/cloudfile/content/YouSendIt/management.xhtml
+++ b/mail/components/cloudfile/content/YouSendIt/management.xhtml
@@ -21,18 +21,26 @@
       <div id="provider-name">
       <h1>YouSendIt</h1>
       </div>
     </div>
 
     <div id="provider-spacebox">
       <div id="provider-space-visuals"></div>
       <div id="provider-space">
-        <div>&cloudfileMgmt.usedSpace;<span id="file-space-used"/><span id="file-space-used-swatch" class="space-swatch"/></div>
-        <div>&cloudfileMgmt.unusedSpace;<span id="remaining-file-space"/><span id="remaining-file-space-swatch" class="space-swatch"/></div>
+        <div>
+          <label>&cloudfileMgmt.usedSpace;</label>
+          <span id="file-space-used"/>
+          <span id="file-space-used-swatch" class="space-swatch"/>
+        </div>
+        <div>
+          <label>&cloudfileMgmt.unusedSpace;</label>
+          <span id="remaining-file-space"/>
+          <span id="remaining-file-space-swatch" class="space-swatch"/>
+        </div>
         <div id="upgrade"><a href="https://www.yousendit.com/compareaccounts">&cloudfileMgmt.upgradeOffer;</a></div>
       </div>
       </div>
     <div id="provider-account-settings"><a href="https://www.yousendit.com/myaccount">&youSendItMgmt.viewSettings;</a></div>
   </body>
 
 
   <script type="text/javascript;version=1.8">
--- a/mail/themes/gnomestripe/mail/preferences/preferences.css
+++ b/mail/themes/gnomestripe/mail/preferences/preferences.css
@@ -185,18 +185,16 @@ a {
 }
 
 .space-swatch {
   display: inline-block;
   width: 1em;
   height: 1em;
   border: 1px solid rgba(0,0,0,0.5);
   border-radius: 2px;
-
-  vertical-align: middle;
   -moz-margin-start: 0.5ch;
   -moz-box-sizing: border-box;
 }
 
 /* Main pane padding */
 
 #provider-management {
   margin: 0 10px;
@@ -215,16 +213,25 @@ a {
 /* Flexing */
 #provider-management {
   height: 310px; /* As far as I can see, the height and width values needs to be hardcoded :( */
   width: 420px;
   display: -moz-box;
   -moz-box-orient: vertical;
 }
 
+#provider-space label {
+  -moz-margin-end: 0.5ch;
+  vertical-align: middle;
+}
+
+#provider-space span {
+  vertical-align: middle;
+}
+
 #provider-header {
   -moz-box-flex: 0;
 }
 
 #provider-spacebox {
   -moz-box-flex: 1;
 }
 
--- a/mail/themes/pinstripe/mail/preferences/preferences.css
+++ b/mail/themes/pinstripe/mail/preferences/preferences.css
@@ -255,17 +255,16 @@ a {
 }
 
 .space-swatch {
   display: inline-block;
   width: 1em;
   height: 1em;
   border: 1px solid rgba(0,0,0,0.5);
   border-radius: 2px;
-  vertical-align: middle;
   -moz-margin-start: 0.5ch;
   -moz-box-sizing: border-box;
 }
 
 /* Main pane padding */
 
 #provider-management {
   margin: 0 10px;
@@ -288,16 +287,25 @@ a {
 /* Flexing */
 #provider-management {
   height: 390px; /* As far as I can see, the height and width values needs to be hardcoded :( */
   width: 340px;
   display: -moz-box;
   -moz-box-orient: vertical;
 }
 
+#provider-space label {
+  -moz-margin-end: 0.5ch;
+  vertical-align: middle;
+}
+
+#provider-space span {
+  vertical-align: middle;
+}
+
 #provider-header {
   -moz-box-flex: 0;
 }
 
 #provider-spacebox {
   -moz-box-flex: 1;
 }
 
--- a/mail/themes/qute/mail/preferences/preferences.css
+++ b/mail/themes/qute/mail/preferences/preferences.css
@@ -208,18 +208,16 @@ a {
 }
 
 .space-swatch {
   display: inline-block;
   width: 1em;
   height: 1em;
   border: 1px solid rgba(0,0,0,0.5);
   border-radius: 2px;
-
-  vertical-align: middle;
   -moz-margin-start: 0.5ch;
   -moz-box-sizing: border-box;
 }
 
 /* Main pane padding */
 
 #provider-management {
   margin: 0 10px;
@@ -238,16 +236,25 @@ a {
 /* Flexing */
 #provider-management {
   height: 230px; /* As far as I can see, the height and width values needs to be hardcoded :( */
   width: 355px;
   display: -moz-box;
   -moz-box-orient: vertical;
 }
 
+#provider-space label {
+  -moz-margin-end: 0.5ch;
+  vertical-align: middle;
+}
+
+#provider-space span {
+  vertical-align: middle;
+}
+
 #provider-header {
   -moz-box-flex: 0;
 }
 
 #provider-spacebox {
   -moz-box-flex: 1;
 }