From d001098c8d0fbf4edc95e2a44d036f0e6c9250a1 Mon Sep 17 00:00:00 2001
From: Shane Tomlinson <stomlinson@mozilla.com>
Date: Wed, 20 Jul 2011 13:54:56 -0700
Subject: [PATCH] Usability updates for the select email.
Can select buttons using the email address.
Can move through the email addresses and buttons using the tab/arrow keys.
close #86
---
browserid/static/dialog/style.css | 19 ++++++++++++-------
browserid/static/dialog/views/signin.ejs | 8 +++++---
2 files changed, 17 insertions(+), 10 deletions(-)
diff --git a/browserid/static/dialog/style.css b/browserid/static/dialog/style.css
index f9e18534e..866f565a7 100644
--- a/browserid/static/dialog/style.css
+++ b/browserid/static/dialog/style.css
@@ -100,17 +100,22 @@ div.actions {
#identities {
width: 450px;
margin: auto;
+ list-style: none;
}
-#identities > div {
- margin-bottom: .5em;
- height: 1.4em;
- font-size: .9em;
+#identities > ul, #identities > ul > li {
+ list-style: none;
}
-#identities > div > * {
- float: left;
- cursor: pointer;
+#identities > ul > li {
+ margin-bottom: .5em;
+ height: 1.4em;
+ font-size: .9em;
+ line-height: 18px;
+}
+
+input[type=radio], input[type=radio] + label {
+ cursor: pointer;
}
button {
diff --git a/browserid/static/dialog/views/signin.ejs b/browserid/static/dialog/views/signin.ejs
index f0802e68d..0fda9e7e1 100644
--- a/browserid/static/dialog/views/signin.ejs
+++ b/browserid/static/dialog/views/signin.ejs
@@ -1,9 +1,11 @@
<div class="content">
<p class="prompt">What email address would you like to use to sign into <span class="sitename bad"><%= sitename %></span>?</p>
<form id="identities" name="identities">
- <% _.each(identities, function(email_obj, email_address) { %>
- <div><input type="radio" name="identity" value="<%=email_address%>" /> <%= email_address %></div>
- <% }); %>
+ <ul>
+ <% _.each(identities, function(email_obj, email_address) { %>
+ <li><input type="radio" name="identity" value="<%=email_address%>" id="<%=email_address%>" /><label for="<%=email_address%>"><%= email_address %></label></li>
+ <% }); %>
+ </ul>
</form>
</div>
<div class="actions">
--
GitLab