diff --git a/browserid/static/css/m.css b/browserid/static/css/m.css
index a4b9b6b9328246a5e85631d7e574c668338be1a2..c2c90b4b2abdf760a4e62a09192b18e04e9346e7 100644
--- a/browserid/static/css/m.css
+++ b/browserid/static/css/m.css
@@ -24,9 +24,10 @@ body #header ul.nav {
body #header ul.nav li {
margin: 0 1px 0 0;
text-align: center;
+ width: 64px;
}
-body #header ul.nav li:nth-child(1) {
+body #header ul.nav li:first-child {
width: 102px;
}
@@ -34,10 +35,6 @@ body #header ul.nav li:nth-child(2) {
width: 91px;
}
-body #header ul.nav li:nth-child(3) {
- width: 65px;
- margin: 0;
-}
body #header ul.nav li a {
padding: 3px 0;
@@ -51,7 +48,24 @@ body #header ul.nav li a {
border-radius: 3px;
}
-body #header ul.nav li:nth-child(1) a {
+body.authenticated #header ul.nav li.signOut,
+body #header ul.nav li {
+ display: block;
+}
+
+body #header ul.nav li.signOut,
+body.authenticated #header ul.nav li.signIn {
+ display: none;
+}
+
+body #header ul.nav li a {
+ -webkit-border-radius: 0 3px 3px 0;
+ -moz-border-radius: 0 3px 3px 0;
+ -o-border-radius: 0 3px 3px 0;
+ border-radius: 0 3px 3px 0;
+}
+
+body #header ul.nav li:first-child a {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
@@ -66,13 +80,6 @@ body #header ul.nav li:nth-child(2) a {
border-radius: 0px;
}
-body #header ul.nav li:nth-child(3) a {
- -webkit-border-radius: 0 3px 3px 0;
- -moz-border-radius: 0 3px 3px 0;
- -o-border-radius: 0 3px 3px 0;
- border-radius: 0 3px 3px 0;
-}
-
body #header ul.nav li a.signIn {
background-color: rgba(0,0,0,0.1);
color: #222;
diff --git a/browserid/static/dialog/controllers/pickemail_controller.js b/browserid/static/dialog/controllers/pickemail_controller.js
index b0fd83c578048368ad8b76a6ba7e0f3bc7296c7f..caf7f1e732a44eaf735272bf772a60e6b01bc628 100644
--- a/browserid/static/dialog/controllers/pickemail_controller.js
+++ b/browserid/static/dialog/controllers/pickemail_controller.js
@@ -82,10 +82,12 @@
function signIn(element, event) {
var self=this,
- animationComplete = false,
+ body = $("body"),
+ animationComplete = body.innerWidth() < 640,
assertion,
email = $("input[type=radio]:checked").val();
+
cancelEvent(event);
function onComplete() {
@@ -96,20 +98,23 @@
}
}
- // Kick of the assertion fetching/keypair generating while we are shoing
+ // Kick of the assertion fetching/keypair generating while we are showing
// the animation, hopefully this minimizes the delay the user notices.
identities.getAssertion(email, function(assert) {
assertion = assert;
onComplete();
});
- $("#signIn").animate({"width" : "685px"}, "slow", function () {
- // post animation
- $("body").delay(500).animate({ "opacity" : "0.5"}, "fast", function () {
- animationComplete = true;
- onComplete();
- });
- });
+
+ if(body.innerWidth() > 640) {
+ $("#signIn").animate({"width" : "685px"}, "slow", function () {
+ // post animation
+ body.delay(500).animate({ "opacity" : "0.5"}, "fast", function () {
+ animationComplete = true;
+ onComplete();
+ });
+ });
+ }
}
function addEmail(element, event) {
diff --git a/browserid/static/dialog/css/m.css b/browserid/static/dialog/css/m.css
index 44f2a9c626e60c811a3063643a86a398dce655fe..bbbebe5b210f72e9fe998b810759a979b7e58284 100644
--- a/browserid/static/dialog/css/m.css
+++ b/browserid/static/dialog/css/m.css
@@ -1,17 +1,36 @@
+
body #wrapper {
min-width: 320px;
width: 100%;
margin: 0 auto;
}
-body #header {
- padding: 10px;
+body header, body footer {
+ padding: 5px 20px;
}
-body #header ul li:nth-child(2) {
+body header ul li:nth-child(2) {
display: none;
}
+body button {
+ height: 40px;
+ font-size: 18px;
+}
+
+body input[type=email],
+body input[type=password] {
+ font-size: 17px;
+}
+
+body .inputs > li > label {
+ font-size: 18px;
+}
+
+body .vertical > strong {
+ font-size: 20px;
+}
+
body #signIn,
body #favicon {
display: block;
@@ -27,6 +46,7 @@ body #signIn {
body #signIn .table {
width: 100%;
+ margin: 0;
}
body #signIn form {
@@ -69,6 +89,15 @@ body #footer {
padding: 10px;
}
+body #signIn .vertical {
+ padding-bottom: 0;
+}
+
body #signIn .vertical ul li {
margin-top: 20px;
}
+
+body #signIn .submit > p {
+ font-size: 14px;
+}
+
diff --git a/browserid/static/dialog/css/popup.css b/browserid/static/dialog/css/popup.css
index 256f0d3532a4c0e015fe76ff8f5ff82a59192a26..b95a704b08bfdf92e4594f8fed4c1250a963883d 100644
--- a/browserid/static/dialog/css/popup.css
+++ b/browserid/static/dialog/css/popup.css
@@ -203,6 +203,8 @@ h2 {
#signIn .submit > p {
line-height: 13px;
+ clear: right;
+ text-align: center;
}
#signIn .remember {
@@ -461,9 +463,6 @@ footer a {
footer .help {
float: right;
-}
-
-footer .help > a {
color: #62615F;
cursor: help;
}
@@ -502,13 +501,16 @@ html[xmlns] .cf {
}
.inputs {
- height: 110px;
- overflow-y: auto;
margin: 1em 0 .5em;
padding: 0 1em;
line-height: 18px;
}
+.pickemail .inputs {
+ height: 110px;
+ overflow-y: auto;
+}
+
.add {
font-size: 80%;
}
@@ -526,7 +528,7 @@ html[xmlns] .cf {
}
.submit > button {
- margin: 0 5px;
+ margin: 0 5px 15px 0;
}
#newEmail {
diff --git a/browserid/static/dialog/views/authenticate.ejs b/browserid/static/dialog/views/authenticate.ejs
index d274a8cb689c1025681f59e2b7b8c51d1f815995..6675f15a5bb3caf696b1e3d09fd6a092b01da7aa 100644
--- a/browserid/static/dialog/views/authenticate.ejs
+++ b/browserid/static/dialog/views/authenticate.ejs
@@ -33,24 +33,23 @@
</div>
</li>
- <li>
+ <li id="hint_section" class="start">
+ <p>Enter your email address to sign in to <strong><%= sitename %></strong></p>
+ </li>
- <div id="password_section" class="returning">
- <label for="password" class="half serif">Password</label>
- <div class="half right">
- <a id="forgotPassword" href="#">forgot your password?</a>
- </div>
- <input id="password" class="sans" type="password" maxlength="80">
- </div>
+ <li id="create_text_section" class="newuser">
+ <p><strong>Welcome to BrowserID!</strong></p>
+ <p>This email looks new, so let's get you set up.</p>
+ </li>
- <div id="hint_section" class="start">
- <p>Enter your email address to sign in to <strong><%= sitename %></strong></p>
- </div>
+ <li id="password_section" class="returning">
- <div id="create_text_section" class="newuser">
- <p><strong>Welcome to BrowserID!</strong></p>
- <p>This email looks new, so let's get you set up.</p>
+ <label for="password" class="half serif">Password</label>
+ <div class="half right">
+ <a id="forgotPassword" href="#">forgot your password?</a>
</div>
+ <input id="password" class="sans" type="password" maxlength="80">
+
<div id="password_required" class="tooltip" for="password">
The password field is required.
diff --git a/browserid/static/dialog/views/body.ejs b/browserid/static/dialog/views/body.ejs
index 5ab30bb0a50133162df689e1ec93ddedd72af724..52e240068c805042271183cb1a2efd1f01ad4dea 100644
--- a/browserid/static/dialog/views/body.ejs
+++ b/browserid/static/dialog/views/body.ejs
@@ -1,10 +1,8 @@
<div id="wrapper">
- <header class="cf">
- <div id="header" class="cf">
- <ul>
- <li><a class="home" target="_blank" href="/"></a></li>
- </ul>
- </div>
+ <header id="header" class="cf">
+ <ul>
+ <li><a class="home" target="_blank" href="/"></a></li>
+ </ul>
</header>
<div id="formWrap" class="cf">
@@ -33,9 +31,7 @@
BrowserID is the fast and secure way to sign in — <a target="_blank" href="/about">learn more</a>
</div>
- <div class="help">
- <a href="http://support.mozilla.com/en-US/home" target="_blank">need help?</a>
- </div>
+ <a class="help" href="http://support.mozilla.com/en-US/home" target="_blank">need help?</a>
</footer>
</div>
diff --git a/browserid/static/dialog/views/pickemail.ejs b/browserid/static/dialog/views/pickemail.ejs
index 598cf20ce341c9121aa17b98ba58e5bf1f51c067..d8d28eeddb43c99b5fb93ffbc35bb3075b6aedac 100644
--- a/browserid/static/dialog/views/pickemail.ejs
+++ b/browserid/static/dialog/views/pickemail.ejs
@@ -26,11 +26,11 @@
</ul>
<div class="submit add cf">
+ <button id="signInButton">sign in</button>
<p>
<a id="thisIsNotMe" href="#">This is not me</a>
<a id="useNewEmail" href="#">Use a different email</a>
</p>
- <button id="signInButton">sign in</button>
</div>
</div>
diff --git a/browserid/views/layout.ejs b/browserid/views/layout.ejs
index 0968e88ff1333f3f84ca83d00a6b4982d726fc27..af056d0ecfc42a7e0226f1f9666ab24d7ea7e66e 100644
--- a/browserid/views/layout.ejs
+++ b/browserid/views/layout.ejs
@@ -43,8 +43,8 @@
<li><a href="/about">How it works</a></li>
<li><a href="https://github.com/mozilla/browserid/wiki/How-to-Use-BrowserID-on-Your-Site" target="_blank">Developers</a></li>
- <li><a class="signIn" href="/signin">Sign In</a></li>
- <li><a class="signOut" href="/">Sign Out</a></li>
+ <li class="signIn"><a class="signIn" href="/signin">Sign In</a></li>
+ <li class="signOut"><a class="signOut" href="/">Sign Out</a></li>
</ul>
</header>