From c0ae6caba6606c28e4da4a5ddb1e58ca5fd9d928 Mon Sep 17 00:00:00 2001
From: Shane Tomlinson <stomlinson@mozilla.com>
Date: Fri, 6 Jul 2012 11:58:57 +0100
Subject: [PATCH] Make sure the "Is this your computer" buttons are the same
width no matter what the language.
* Add a new module called dom-helpers with function makeEqualWidth.
* Force buttons on the "Is this your computer" screen to be the same width.
* Update CSS enable button width to be set this way.
* Update CSS to vertically center helper text.
* Update CSS to make the buttons look good in mobile.
issue #1932
---
lib/static_resources.js | 1 +
resources/static/common/js/dom-helpers.js | 32 ++++++++++++++++++
resources/static/dialog/css/m.css | 10 +++++-
resources/static/dialog/css/style.css | 10 +++---
.../js/modules/is_this_your_computer.js | 4 +++
.../test/cases/common/js/dom-helpers.js | 33 +++++++++++++++++++
resources/views/test.ejs | 2 ++
7 files changed, 86 insertions(+), 6 deletions(-)
create mode 100644 resources/static/common/js/dom-helpers.js
create mode 100644 resources/static/test/cases/common/js/dom-helpers.js
diff --git a/lib/static_resources.js b/lib/static_resources.js
index 7b14d260d..18ccbef39 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 000000000..e944fc420
--- /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 40509beb0..6412f9d7c 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 8e6a7eaf5..9543dd9df 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 b070364ee..ebf40b322 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 000000000..35deecfbe
--- /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 546fb8a9c..3ed673931 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>
--
GitLab