diff --git a/lib/static_resources.js b/lib/static_resources.js
index 7b14d260da15c063e0260419c81c2420b4c03eb8..18ccbef39bbe6bc30f5222e7ebadea9f98a6d727 100644
--- a/lib/static_resources.js
+++ b/lib/static_resources.js
@@ -38,6 +38,7 @@ var common_js = [
'/common/js/tooltip.js',
'/common/js/validation.js',
'/common/js/helpers.js',
+ '/common/js/dom-helpers.js',
'/common/js/screens.js',
'/common/js/browser-support.js',
'/common/js/enable_cookies_url.js',
diff --git a/resources/static/common/js/dom-helpers.js b/resources/static/common/js/dom-helpers.js
new file mode 100644
index 0000000000000000000000000000000000000000..e944fc420dd454bf17e39e87b8922df0a4be3c14
--- /dev/null
+++ b/resources/static/common/js/dom-helpers.js
@@ -0,0 +1,32 @@
+/*globals BrowserID: true */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/. */
+BrowserID.DOMHelpers = (function() {
+ "use strict";
+
+ function makeEqualWidth(selector) {
+ var els = $(selector),
+ maxWidth = 0;
+
+ // Find the widest el then set the width of all the els to be the
+ // same. To do so, first let the els be their natural width, find the
+ // widest, and then go from there.
+ els.css({
+ "min-width": "0px",
+ "width": null
+ });
+
+ els.each(function(index, element) {
+ var width = $(element).outerWidth();
+ if (width > maxWidth) maxWidth = width;
+ });
+
+ els.css("width", maxWidth + "px");
+ }
+
+ return {
+ makeEqualWidth: makeEqualWidth
+ };
+
+}());
diff --git a/resources/static/dialog/css/m.css b/resources/static/dialog/css/m.css
index 40509beb05e94aa7dfa4a385281f9b620b4825f0..6412f9d7c05ee78dd6481afd33d3eba1b9e336b5 100644
--- a/resources/static/dialog/css/m.css
+++ b/resources/static/dialog/css/m.css
@@ -178,10 +178,18 @@
margin-top: 10px;
}
+ /* Since mobile devices are narrow, the buttons and their corresponding text
+ * should stack one on top of the other, center both.
+ */
#your_computer_content li {
- padding: 0 0 0 100px;
margin: 15px 0;
min-height: 40px;
+ text-align: center;
+ }
+
+ #your_computer_content button {
+ display: block;
+ margin: 0 auto;
}
diff --git a/resources/static/dialog/css/style.css b/resources/static/dialog/css/style.css
index 8e6a7eaf56071cd67f1856944fc699d7ba568c8c..9543dd9dfe6f496631798773fcec0fde7058fcfe 100644
--- a/resources/static/dialog/css/style.css
+++ b/resources/static/dialog/css/style.css
@@ -465,15 +465,15 @@ a.emphasize:active {
}
#your_computer_content li {
- padding: 0 50px 0 150px;
- margin: 28px 0;
+ margin: 15px 0;
text-align: left;
+ line-height: 28px;
}
#your_computer_content button {
- float: left;
- margin-left: -100px;
- min-width: 4em;
+ margin: 0 10px 0 0;
+ display: inline-block;
+ float: none;
}
.unsupported, .cookies_disabled {
diff --git a/resources/static/dialog/js/modules/is_this_your_computer.js b/resources/static/dialog/js/modules/is_this_your_computer.js
index b070364ee5bbc7f635f762af0898f790d69bd538..ebf40b322a7189d7288f2f914e4e504f1824752e 100644
--- a/resources/static/dialog/js/modules/is_this_your_computer.js
+++ b/resources/static/dialog/js/modules/is_this_your_computer.js
@@ -10,6 +10,7 @@ BrowserID.Modules.IsThisYourComputer = (function() {
dom = bid.DOM,
user = bid.User,
errors = bid.Errors,
+ domHelpers = bid.DOMHelpers,
email;
var Module = bid.Modules.PageModule.extend({
@@ -28,6 +29,9 @@ BrowserID.Modules.IsThisYourComputer = (function() {
self.click("#this_is_my_computer", self.yes);
self.click("#this_is_not_my_computer", self.no);
+ // Force all the buttons to be of equal width
+ domHelpers.makeEqualWidth("#your_computer_content button");
+
Module.sc.start.call(self, options);
},
diff --git a/resources/static/test/cases/common/js/dom-helpers.js b/resources/static/test/cases/common/js/dom-helpers.js
new file mode 100644
index 0000000000000000000000000000000000000000..35deecfbe3c80e379b073e0b9d175e79d4ad270f
--- /dev/null
+++ b/resources/static/test/cases/common/js/dom-helpers.js
@@ -0,0 +1,33 @@
+/*jshint browser: true, forin: true, laxbreak: true */
+/*global test: true, start: true, module: true, ok: true, equal: true, BrowserID: true */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/. */
+(function() {
+ "use strict";
+
+ var bid = BrowserID,
+ testHelpers = bid.TestHelpers,
+ domHelpers = bid.DOMHelpers;
+
+ module("common/js/dom-helpers", {
+ setup: testHelpers.setup,
+ teardown: testHelpers.teardown
+ });
+
+ test("makeEqualWidth", function() {
+ bid.Renderer.render("#page_head", "is_this_your_computer", {});
+
+ domHelpers.makeEqualWidth("#your_computer_content button");
+
+ var lastWidth;
+ $("#your_computer_content button").each(function(index, element) {
+ var currWidth = $(element).outerWidth();
+ if (lastWidth) {
+ equal(currWidth, lastWidth, "button widths are the same");
+ }
+ lastWidth = currWidth;
+ });
+ });
+
+}());
diff --git a/resources/views/test.ejs b/resources/views/test.ejs
index 546fb8a9ceb76c3c53f1ca64432426f89bcf9be3..3ed6739319d2460d530b5752ed655bc4467dafcc 100644
--- a/resources/views/test.ejs
+++ b/resources/views/test.ejs
@@ -95,6 +95,7 @@
<script src="/common/js/tooltip.js"></script>
<script src="/common/js/validation.js"></script>
<script src="/common/js/helpers.js"></script>
+ <script src="/common/js/dom-helpers.js"></script>
<script src="/common/js/screens.js"></script>
<script src="/common/js/browser-support.js"></script>
<script src="/common/js/enable_cookies_url.js"></script>
@@ -151,6 +152,7 @@
<script src="cases/include.js"></script>
<script src="cases/common/js/helpers.js"></script>
+ <script src="cases/common/js/dom-helpers.js"></script>
<script src="cases/common/js/renderer.js"></script>
<script src="cases/common/js/screens.js"></script>
<script src="cases/common/js/tooltip.js"></script>