A whole bunch of changes to get the layout to work on mobile, i18n, etc.

* Change the layout so that the entire form area gets the scroll bar for languages that use a lot of text or if the user has a lot of email addresses. * Change the way the privacy policy and buttons are rendered so JS is not needed to set the width of the privacy policy. * Put the TOS on its own line. * Put "Always sign in using this email" on its own line * Change the order of the "Forgot your password?" button and "password" label so that Germanic languages render the entire thing on one line. * Remove the "Sign in using" header text. issue #1300 issue #1286 issue #1275 issue #1274 issue #1272 issue #1262 issue #1261
mozilla · Mar 13, 2012 · 124b7f1 · 124b7f1
1 parent e52aca6
commit 124b7f1
Show file tree

Hide file tree

Showing 11 changed files with 105 additions and 107 deletions.
diff --git a/resources/static/css/common.css b/resources/static/css/common.css
@@ -80,10 +80,6 @@ a {
   text-decoration: none;
 }
 
-a:hover, button:hover {
-  text-decoration: underline;
-}
-
 p:last-child {
   margin-bottom: 0 !important;
 }
@@ -161,6 +157,7 @@ button,
     background-color: #37A6FF;
     background-image: -moz-linear-gradient(center top , #76C2FF 0pt, #37A6FF 100%);
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #76C2FF), color-stop(100%, #37A6FF));
+    white-space: nowrap;
 }
 
 button:hover,
@@ -214,9 +211,11 @@ button[disabled], .submit_disabled button, .submit_disabled .button,
 }
 
 
-.submit > a {
+.submit > #cancel,
+#signIn .submit > #cancel {
   float: right;
   margin-right: 15px;
+  line-height: 28px;
 }
 
 a.secondary[disabled], .submit_disabled a.secondary, .submit_disabled a.secondary:focus, .submit_disabled a.secondary:active {
@@ -232,7 +231,7 @@ hr {
 
 
 .right {
-  text-align: right;
+  float: right;
 }
 
 h1 {

diff --git a/resources/static/css/style.css b/resources/static/css/style.css
@@ -647,13 +647,6 @@ h1 {
   text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
 }
 
-#signUpForm label.half,
-.half {
-  width: 50%;
-  display: inline-block;
-  float: left;
-}
-
 #signUpForm .red {
   color: red;
 }

diff --git a/resources/static/dialog/controllers/authenticate.js b/resources/static/dialog/controllers/authenticate.js
@@ -61,7 +61,6 @@ BrowserID.Modules.Authenticate = (function() {
       } else {
         createSecondaryUserState.call(self);
       }
-      $('p.tospp').css('width', (240 - $('#signIn button:visible').outerWidth()) + 'px');
     }
   }
 
@@ -163,7 +162,6 @@ BrowserID.Modules.Authenticate = (function() {
 
       Module.sc.start.call(self, options);
       initialState.call(self, options);
-      $('p.tospp').css('width', (240 - $('#signIn button:visible').outerWidth()) + 'px');
     }
 
     // BEGIN TESTING API

diff --git a/resources/static/dialog/controllers/pick_email.js b/resources/static/dialog/controllers/pick_email.js
@@ -102,7 +102,6 @@ BrowserID.Modules.PickEmail = (function() {
         tos_url: options.tosURL
       });
       dom.getElements("body").css("opacity", "1");
-      $('p.tospp').css('width', (240 - $('#signIn button:visible').outerWidth()) + 'px');
       if (dom.getElements("#selectEmail input[type=radio]:visible").length === 0) {
         // If there is only one email address, the radio button is never shown,
         // instead focus the sign in button so that the user can click enter.

diff --git a/resources/static/dialog/controllers/required_email.js b/resources/static/dialog/controllers/required_email.js
@@ -194,8 +194,6 @@ BrowserID.Modules.RequiredEmail = (function() {
         self.click("#verify_address", verifyAddress);
         self.click("#forgotPassword", forgotPassword);
         self.click("#cancel", cancel);
-
-        $('p.tospp').css('width', (240 - $('#signIn button:visible').outerWidth()) + 'px');
       }
 
       RequiredEmail.sc.start.call(self, options);

diff --git a/resources/static/dialog/css/m.css b/resources/static/dialog/css/m.css
@@ -31,6 +31,7 @@
   section {
     position: static;
     overflow: visible;
+    display: none;
   }
 
   .inputs > li > label {
@@ -47,15 +48,19 @@
       display: block;
       width: 100%;
       position: relative;
-      padding: 10px;
+  }
+
+  #favicon {
+    padding: 10px;
   }
 
   #signIn {
-      padding: 10px;
+      padding: 0;
   }
 
   #signIn .container {
       width: 100%;
+      padding: 20px;
   }
 
   #signIn form {
@@ -113,22 +118,24 @@
 
   #signIn .submit {
     position: static;
-    line-height: 40px;
-    margin-top: 40px;
+    line-height: 1.6;
+    margin-top: 25px;
   }
 
   #signIn .submit > p {
     font-size: 14px;
+    display: block;
+  }
+
+  #signIn .submit > p:first-child {
+    padding: 0;
+    margin-bottom: 20px;
   }
 
   label[for=remember] {
     display: block;
     font-size: 15px;
-    margin: 13px;
-  }
-
-  .form_section {
-    margin-top: 20px;
+    margin-bottom: 25px;
   }
 
   #content, .form_section, .inputs, .vertical {
@@ -137,8 +144,9 @@
     overflow: visible;
   }
 
-  .authenticated .vertical a, #cancel {
-    font-size: 1.2em;
+  .submit > #cancel, #signIn .submit > #cancel {
+    font-size: 18px;
+    line-height: 40px;
   }
 
   #useNewEmail {
@@ -163,3 +171,7 @@
     padding: 10px;
   }
 
+  a.emphasize {
+    font-size: 13px;
+  }
+
diff --git a/resources/static/dialog/css/popup.css b/resources/static/dialog/css/popup.css
@@ -19,7 +19,9 @@ h2 {
 
 
 .vertical {
-    height: 250px;
+    height: 230px;
+    overflow-x: hidden;
+    overflow-y: auto;
 }
 
 .table {
@@ -56,6 +58,10 @@ section > .contents {
     height: 250px;
 }
 
+.contents > strong {
+    display: none;
+}
+
 #wait, #error, #delay {
     text-align: center;
     z-index: -1;
@@ -158,6 +164,7 @@ section > .contents {
      * otherwise the buttons slide right with the arrow
      */
     width: 325px;
+    padding: 20px 52px 20px 20px;
 }
 
 .arrow {
@@ -205,7 +212,6 @@ div#required_email {
 }
 
 #signIn .vertical {
-    padding: 20px 52px 20px 20px;
     position: relative;
 }
 
@@ -223,21 +229,25 @@ div#required_email {
 
 #signIn .submit {
     line-height: 28px;
-    position: absolute;
-    bottom: 20px;
-    left: 0;
-    right: 52px;
+    margin-top: 10px;
+    color: #333;
+    font-size: 11px;
+    line-height: 1.2;
 }
 
-#signIn .submit {
-  margin-left: 20px;
+#signIn .submit > a {
+    color: #549FDC;
+    margin-right: 0;
+    float: none;
 }
 
+  /*
 #signIn .submit > p {
   line-height: 13px;
   clear: right;
   text-align: center;
 }
+*/
 
 #signIn label.half,
 .half {
@@ -299,18 +309,16 @@ label.selectable {
     text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
 }
 
-#signIn .submit > p.tospp {
-    /* width comes from controller/<page>.js p.tospp.css('width') update */
-    bottom: 0px;
-    color: #333;
-    font-size: 11px;
-    line-height: 1.2;
-    position: absolute; 
-    text-align: justify;
-    left; 0px;
+#signIn .submit > p {
+    display: block;
+}
+
+#signIn .submit > p + p:last-child {
+    margin-top: 15px;
+    padding-left: 10px;
 }
 
-.tospp a {
+#signIn .submit a {
     color: #549FDC;
 }
 
@@ -359,26 +367,19 @@ footer {
     padding: 20px;
 }
 
-.inputs {
-    margin: 1em 0 .5em;
-    line-height: 18px;
-    max-height: 130px;
-    overflow-y: auto;
+.form_section {
+  clear: right;
 }
 
-/* Some languages have long text for the "sign in" and "use a different email"
- * buttons.  If the user >= 6 emails in these languages, the buttons overlap.
- * This shrinks the email address box by one address to prevent this overlap.
- */
-#selectEmail .inputs {
-    max-height: 115px;
+.inputs {
+    line-height: 18px;
 }
 
-
+/*
 .add {
     font-size: 80%;
 }
-
+*/
 .inputs > li:only-child input[type=radio] {
     display: none;
 }

diff --git a/resources/static/dialog/views/authenticate.ejs b/resources/static/dialog/views/authenticate.ejs
@@ -37,10 +37,9 @@
 
           <li class="returning">
 
-              <label for="password" class="half serif"><%= gettext('Password') %></label>
-              <div class="half right">
-                  <a id="forgotPassword" href="#" tabindex="4"><%= gettext('forgot your password?') %></a>
-              </div>
+              <a id="forgotPassword" class="right" href="#" tabindex="4"><%= gettext('forgot your password?') %></a>
+              <label for="password" class="serif"><%= gettext('Password') %></label>
+
               <input id="password" class="sans" type="password" maxlength="80" tabindex="2" />
 
               <div id="password_required" class="tooltip" for="password">
@@ -56,18 +55,21 @@
 
       <div class="submit cf">
         <% if (privacy_url && tos_url) { %>
-          <p class="tospp">
+           <p>
             <%= format(
                   gettext('By clicking %s, you confirm that you accept this site\'s <a %s>Terms of Use</a> and <a %s>Privacy Policy</a>.'),
-                       [ gettext('next'), 
-                         format(' href="%s" target="_new"', [tos_url]), 
+                       [ gettext('next'),
+                         format(' href="%s" target="_new"', [tos_url]),
                          format(' href="%s" target="_new"', [privacy_url])
                        ]) %>
           </p>
+          <p>
       <% } %>
-          <button class="start" tabindex="3"><%= gettext('next') %></button>
-          <button class="newuser" tabindex="3"><%= gettext('verify email') %></button>
-
-          <button class="returning" tabindex="3"><%= gettext('sign in') %></button>
+            <button class="start" tabindex="3"><%= gettext('next') %></button>
+            <button class="newuser" tabindex="3"><%= gettext('verify email') %></button>
+            <button class="returning" tabindex="3"><%= gettext('sign in') %></button>
+        <% if (privacy_url && tos_url) { %>
+          </p>
+        <% } %>
       </div>
   </div>
diff --git a/resources/static/dialog/views/pick_email.ejs b/resources/static/dialog/views/pick_email.ejs
@@ -2,7 +2,7 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
-  
+
   <strong><%= gettext('Sign in using') %></strong>
 
   <div id="selectEmail" class="form_section">
@@ -23,31 +23,28 @@
 
 
       <div class="submit add cf">
-      <% if (allow_persistent || (privacy_url && tos_url)) { %>
-        <p class="tospp">
+      <% if (allow_persistent) { %>
+          <label for="remember" class="selectable">
+            <input type="checkbox" id="remember" name="remember" <% if (remember) { %> checked="checked" <% } %> />
+            <%= gettext('Always sign in using this email') %>
+          </label>
       <% } %>
 
-<% if (allow_persistent) { %>
-            <label for="remember" class="selectable">
-              <input type="checkbox" id="remember" name="remember" <% if (remember) { %> checked="checked" <% } %> />
-              <%= gettext('Always sign in using this email') %>
-            </label>
-          <% } %>
       <% if (privacy_url && tos_url) { %>
+        <p>
 <%= format(
           gettext('By clicking %s, you confirm that you accept this site\'s <a %s>Terms of Use</a> and <a %s>Privacy Policy</a>.'),
-                   [ gettext('sign in'), 
-                     format(' href="%s" target="_new"', [tos_url]), 
+                   [ gettext('sign in'),
+                     format(' href="%s" target="_new"', [tos_url]),
                      format(' href="%s" target="_new"', [privacy_url])
                    ]) %>
-      <% } %>
-
-      <% if (allow_persistent || (privacy_url && tos_url)) { %>
         </p>
-      <% } %>          
-
+        <p>
+      <% } %>
           <button id="signInButton"><%= gettext('sign in') %></button>
-        <br style="clear: both" />
+      <% if (privacy_url && tos_url) { %>
+        </p>
+      <% } %>
       </div>
   </div>