diff --git a/resources/static/dialog/css/style.css b/resources/static/dialog/css/style.css
index d89ab0478730c3b819073d27ced59e2da033484d..01bbbc249458244a2f8b84c301f0a41c0db25cc0 100644
--- a/resources/static/dialog/css/style.css
+++ b/resources/static/dialog/css/style.css
@@ -143,8 +143,28 @@ section > .contents {
* Set the width of the container for when the arrow animation happens
* otherwise the buttons slide right with the arrow
*/
- width: 250px;
font-size: 13px;
+ position: absolute;
+ top: 15px;
+ bottom: 15px;
+ left: 15px;
+ width: 250px;
+ overflow-y: auto;
+}
+
+.form_section.vcenter {
+ position: static;
+ overflow-y: visible;
+ /* The below 1px padding is part of a fix for a bug in webkit where there
+ * is a ghost padding-right to accommodate the scroll bar that is shown
+ * if there are many email addresses. The ghost padding caused the submit
+ * button to shift when the user clicked on it, sometimes making the
+ * submit button require two clicks. The other half of the fix is in
+ * screen_size_hacks.js, where an adjustment to the width is made.
+ * These two in combination force Chrome to re-flow, which fixes its
+ * own bug.
+ */
+ padding-right: 1px;
}
.form_section p {
@@ -152,6 +172,7 @@ section > .contents {
}
+
.contents > strong {
display: none;
}
@@ -328,30 +349,6 @@ div#required_email {
font-weight: bold;
}
-#selectEmail {
- position: absolute;
- top: 20px;
- bottom: 20px;
- left: 20px;
- width: 250px;
- overflow-y: auto;
-}
-
-#selectEmail.vcenter {
- position: static;
- overflow-y: visible;
- /* The below 1px padding is part of a fix for a bug in webkit where there
- * is a ghost padding-right to accommodate the scroll bar that is shown
- * if there are many email addresses. The ghost padding caused the submit
- * button to shift when the user clicked on it, sometimes making the
- * submit button require two clicks. The other half of the fix is in
- * screen_size_hacks.js, where an adjustment to the width is made.
- * These two in combination force Chrome to re-flow, which fixes its
- * own bug.
- */
- padding-right: 1px;
-}
-
.inputs > li {
margin-top: 8px;
}
diff --git a/resources/static/dialog/js/misc/screen_size_hacks.js b/resources/static/dialog/js/misc/screen_size_hacks.js
index ce048dd5f2812bc802b4b095b2feffb957dba181..319e53c8312b4baad23fd5a3f548e3dddfb91b3b 100644
--- a/resources/static/dialog/js/misc/screen_size_hacks.js
+++ b/resources/static/dialog/js/misc/screen_size_hacks.js
@@ -9,19 +9,17 @@
* the #content element causes the contents to be vertically centered.
*/
function onResize() {
- var selectEmailEl = $("#selectEmail"),
+ var scrollableEl = $(".form_section"),
contentEl = $("#content"),
- signInEl = $("#signIn");
+ boundingRectEl = $("#signIn");
- selectEmailEl.css("position", "static");
+ scrollableEl.css("position", "static");
- // The mobile breakpoint is 640px in the CSS. If the max-width is changed
- // there, it must be changed here as well.
- if($(window).width() > 640) {
+ function desktopHacks() {
// First, remove the mobile hacks
- selectEmailEl.css("width", "");
+ scrollableEl.css("width", "");
contentEl.css("min-height", "");
- signInEl.css("top", "");
+ boundingRectEl.css("top", "");
// This is a hack for desktop mode which centers the form vertically in
// the middle of its container. We have to do this hack because we use
@@ -30,13 +28,8 @@
// number of emails, we have to print a scrollbar - but only around the
// emails.
- // set the height to static so that we can get the height without
- // constraints.
- var height = selectEmailEl.innerHeight();
- // re-introduce constraints
-
- if(height < $("#signIn .vertical").innerHeight()) {
- selectEmailEl.addClass("vcenter");
+ if(scrollableEl.innerHeight() < boundingRectEl.innerHeight()) {
+ scrollableEl.addClass("vcenter");
/* The below width adjustment is part of a fix for a bug in webkit where
* there is a ghost padding-right to accommodate the scroll bar that is
@@ -47,33 +40,37 @@
* These two in combination force Chrome to re-flow, which fixes its
* own bug.
*/
- var width = selectEmailEl.width();
- selectEmailEl.width(width);
+ var width = scrollableEl.width();
+ scrollableEl.width(width);
}
else {
- selectEmailEl.removeClass("vcenter");
+ scrollableEl.removeClass("vcenter");
}
}
- else {
+
+ function mobileHacks() {
// First, remove the desktop hacks
- selectEmailEl.removeClass("vcenter");
+ scrollableEl.removeClass("vcenter");
// Hack to make sure the email addresses stay within their container.
// We have to do this ghettoness because table-cells (which are used to
// vertically center everything) expand to fully contain their children
// and the ellipsis never show up as expected.
- // First, find the maximum width that emails can be.
- selectEmailEl.css("width", "10px").removeClass("vcenter");
- var constrainedWidth = $("#signIn .contents").innerWidth();
+ // First, find the maximum width that emails can be. First set the
+ // width of the scrollable element to be very narrow so that we can
+ // find the natural innerWidth of the parent.
+ scrollableEl.css("width", "10px");
+ var parentNaturalWidth = scrollableEl.parent().innerWidth();
- // Find the real maximum width.
- selectEmailEl.css("width", "");
- var maxEmailWidth = selectEmailEl.innerWidth();
+ // Unconstrain the scrollableEl's width to find the real maximum
+ // width of the emails.
+ scrollableEl.css("width", "");
+ var maxEmailWidth = scrollableEl.innerWidth();
// If we have a too large an email, constrain the width.
- if(maxEmailWidth > constrainedWidth) {
- selectEmailEl.css("width", constrainedWidth + "px");
+ if(maxEmailWidth > parentNaturalWidth) {
+ scrollableEl.css("width", parentNaturalWidth + "px");
}
// Hack to find the min-height of the content area the footer is pushed
@@ -118,10 +115,19 @@
var favIconHeight = $("#favicon").outerHeight();
// Force the top of the main content area to be below the favicon area.
- signInEl.css("top", favIconHeight + "px");
+ boundingRectEl.css("top", favIconHeight + "px");
+ }
+
+ // The mobile breakpoint is 640px in the CSS. If the max-width is changed
+ // there, it must be changed here as well.
+ if($(window).width() > 640) {
+ desktopHacks();
+ }
+ else {
+ mobileHacks();
}
- selectEmailEl.css("position", "");
+ scrollableEl.css("position", "");
}
$(window).resize(onResize);
diff --git a/resources/static/dialog/views/pick_email.ejs b/resources/static/dialog/views/pick_email.ejs
index b41b6370fa168a475af093af92f20f98d7dc8181..af2f345ea86b4e9ad05ae45afe8ba0f5ff069334 100644
--- a/resources/static/dialog/views/pick_email.ejs
+++ b/resources/static/dialog/views/pick_email.ejs
@@ -4,11 +4,11 @@
- <p>
- <%= gettext('Sign in as...') %>
- </p>
-
<div id="selectEmail" class="form_section">
+ <p>
+ <%= gettext('Sign in as...') %>
+ </p>
+
<ul class="inputs" id="emailList">
<% _.each(identities, function(item, index) { var emailAddress = item.address, id = "email_" + index; %>
<li>