diff --git a/browserid/static/dialog/controllers/checkregistration_controller.js b/browserid/static/dialog/controllers/checkregistration_controller.js
index 9988c00a4e70b9620cb00187c26a775eac899874..6bb45aba3d31443edd8e1f61aa55222a2593c9e1 100644
--- a/browserid/static/dialog/controllers/checkregistration_controller.js
+++ b/browserid/static/dialog/controllers/checkregistration_controller.js
@@ -43,8 +43,8 @@
init: function(el, options) {
var me=this;
me._super({
- bodyTemplate: "confirmemail.ejs",
- bodyVars: {
+ waitTemplate: "confirmemail.ejs",
+ waitVars: {
email: options.email
}
});
diff --git a/browserid/static/dialog/controllers/page_controller.js b/browserid/static/dialog/controllers/page_controller.js
index 40a2ec79b4a6c3acbc73011336b57440d0429887..971af18bd972507046eec8e1a8dd12d044e192f2 100644
--- a/browserid/static/dialog/controllers/page_controller.js
+++ b/browserid/static/dialog/controllers/page_controller.js
@@ -45,10 +45,18 @@
init: function(options) {
var me=this,
bodyTemplate = options.bodyTemplate,
- bodyVars = options.bodyVars;
+ bodyVars = options.bodyVars,
+ waitTemplate = options.waitTemplate,
+ waitVars = options.waitVars;
- me.renderTemplates(bodyTemplate, bodyVars);
+ if(bodyTemplate) {
+ me.renderDialog(bodyTemplate, bodyVars);
+ }
+
+ if(waitTemplate) {
+ me.renderWait(waitTemplate, waitVars);
+ }
// XXX move all of these, bleck.
$("form").bind("submit", me.onSubmit.bind(me));
@@ -69,18 +77,26 @@
this._super();
},
- renderTemplates: function(body, body_vars) {
-
+ renderTemplates: function(target, body, body_vars) {
if (body) {
var bodyHtml = $.View("//dialog/views/" + body, body_vars);
- var form = $("#formWrap > form");
- form.html(bodyHtml).hide().fadeIn(ANIMATION_TIME, function() {
- $("body").removeClass("waiting");
- form.find("input").eq(0).focus();
- });
+ target = $(target);
+ target.html(bodyHtml);//.hide().fadeIn(ANIMATION_TIME, function() {
+ target.find("input").eq(0).focus();
+ //});
}
},
+ renderDialog: function(body, body_vars) {
+ this.renderTemplates("#formWrap > form", body, body_vars);
+ $("#wait").stop().fadeOut(250);
+ },
+
+ renderWait: function(body, body_vars) {
+ this.renderTemplates("#wait .contents", body, body_vars);
+ $("#wait").stop().css('opacity', 1).hide().fadeIn(250);
+ },
+
onSubmit: function(event) {
event.stopPropagation();
event.preventDefault();
@@ -100,7 +116,7 @@
},
doWait: function(info) {
- this.renderTemplates("wait.ejs", {title: info.message, message: info.description});
+ this.renderWait("wait.ejs", {title: info.message, message: info.description});
$("body").addClass("waiting");
},
diff --git a/browserid/static/dialog/css/m.css b/browserid/static/dialog/css/m.css
index 486ef920599d9bad0f05d6375f13c111e46d13c2..92c90159299bca4ff447ba614d1aa7ef97be655f 100644
--- a/browserid/static/dialog/css/m.css
+++ b/browserid/static/dialog/css/m.css
@@ -24,6 +24,11 @@
font-size: 17px;
}
+ section {
+ position: static;
+ overflow: auto;
+ }
+
.inputs > li > label {
font-size: 18px;
}
diff --git a/browserid/static/dialog/css/popup.css b/browserid/static/dialog/css/popup.css
index 872a2fade3ed7565bfc2ace0a058ef4420a09376..3e6e9cbe66a72979c040b0ce49285eb4cf58ab47 100644
--- a/browserid/static/dialog/css/popup.css
+++ b/browserid/static/dialog/css/popup.css
@@ -65,9 +65,13 @@ h1 {
}
h2 {
- font-size: 1em;
+ margin-bottom: 20px;
+ font-size: 150%;
+ color: #222;
+ font-weight: bold;
}
+
.right {
text-align: right;
}
@@ -77,11 +81,6 @@ h2 {
position: relative;
}
-#error_dialog {
- text-align: center;
- margin: 100px auto;
- display: none;
-}
.table {
display: table;
@@ -95,31 +94,50 @@ h2 {
width: 100%;
}
-.authenticate #formWrap, .pickemail #formWrap {
- background-color: #fff;
- background-image: none;
-}
-
-#formWrap, .waiting #formWrap, .checkregistration #formWrap {
- background-color: rgba(0, 0, 0, 0.035);
- background-image: url('/i/bg.png');
- position: relative;
- width: 100%;
+section {
+ display: table;
+ position: absolute;
+ top: 62px;
+ left: 0;
height: 250px;
+ width: 100%;
overflow: hidden;
+ z-index: 0;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
-.waiting #formWrap, .checkregistration #formWrap {
- width: 325px;
- margin: 0 auto;
+section > .contents {
+ display: table-cell;
+ vertical-align: middle;
+}
+
+#wait, #error {
text-align: center;
+ background-image: url("/i/bg.png");
}
-.waiting #formWrap > form, .checkregistration #formWrap > form {
- height: 250px;
- width: 325px;
- display: table-cell;
- vertical-align: middle;
+#wait {
+ z-index: 1;
+}
+
+#error {
+ display: none;
+ z-index: 2;
+}
+
+#wait strong, #error strong {
+ color: #222;
+ font-weight: bold;
+}
+
+#error {
+ z-index: 2;
+}
+
+#formWrap {
+ background-color: #fff;
+ background-image: none;
+ display: block;
}
#signIn,
@@ -166,6 +184,7 @@ h2 {
#favicon {
position: absolute;
left: 450px;
+ top: 0;
z-index: 10;
}
@@ -355,16 +374,6 @@ footer .learn a {
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}
-.checkregistration p:first-child {
- margin-bottom: 20px;
- font-size: 150%;
-}
-
-.checkregistration strong {
- color: #222;
- font-weight: bold;
-}
-
#favicon {
text-align: center;
max-width: 940px;
@@ -439,8 +448,9 @@ footer {
footer {
padding: 20px;
- border-top: 1px solid rgba(0,0,0,0.05);
color: #aaa;
+ position: fixed;
+ bottom: 0;
}
footer ul {
diff --git a/browserid/static/dialog/views/confirmemail.ejs b/browserid/static/dialog/views/confirmemail.ejs
index 008e988e20443aba4aeb436c0990e442b88ffeaa..6b264b86267b4e5bba8a8b33bf5f9dd875b616e0 100644
--- a/browserid/static/dialog/views/confirmemail.ejs
+++ b/browserid/static/dialog/views/confirmemail.ejs
@@ -1,4 +1,4 @@
- <p><strong>Check your email!</strong></p>
+ <h2>Check your email!</h2>
<p>We sent a confirmation email to <strong><%= email %></strong></p>
<p>To finish signing in just click the verify link we sent to your email address.</p><br />
<p>If this is a mistake, <a href="#" id="back">cancel this email</a>.</p>
diff --git a/browserid/views/dialog.ejs b/browserid/views/dialog.ejs
index 9adac52ad887be1a5c3913f2c8369df5e82e6ba3..97514ab043be209ed1a389da0569c1a4f7d45e4b 100644
--- a/browserid/views/dialog.ejs
+++ b/browserid/views/dialog.ejs
@@ -23,21 +23,26 @@
</ul>
</header>
- <div id="formWrap" class="cf">
+ <section id="formWrap">
<form novalidate class="cf">
- <!-- All of this is going to be replaced on startup, but we need some temporary placeholder -->
- <h2>Communicating with server</h2>
- <p>Just a moment while we talk with the server.</p>
-
</form>
+ </section>
+
+
+ <section id="wait">
+ <div class="contents">
+ <h2>Communicating with server</h2>
+ <p>Just a moment while we talk with the server.</p>
+ </div>
+ </section>
+
- <div id="error_dialog">
- <h3 class="title"></h3>
- <p class="content"></p>
- </div>
+ <section id="error">
+ <h2 class="title"></h2>
+ <p class="content"></p>
+ </section>
- </div>
<footer>
<ul class="cf">