From: Tom Hughes <tom@compton.nu>
Date: Tue, 20 Oct 2009 23:57:39 +0000 (+0000)
Subject: Improve handling of signup and login forms on small displays.
X-Git-Tag: live~6506^2~2
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/fc4e72dc350cc10a00f727598d8a0fa689046759?ds=sidebyside

Improve handling of signup and login forms on small displays.
---

diff --git a/app/views/user/login.html.erb b/app/views/user/login.html.erb
index 77294e62f..19e1f21e1 100644
--- a/app/views/user/login.html.erb
+++ b/app/views/user/login.html.erb
@@ -4,10 +4,10 @@
 
 <% form_tag :action => 'login' do %>
 <%= hidden_field_tag('referer', h(params[:referer])) %>
-<table>
+<table id="loginForm">
   <tr><td class="fieldName"><%= t 'user.login.email or username' %></td><td><%= text_field('user', 'email',{:size => 28, :maxlength => 255, :tabindex => 1}) %></td></tr>
   <tr><td class="fieldName"><%= t 'user.login.password' %></td><td><%= password_field('user', 'password',{:size => 28, :maxlength => 255, :tabindex => 2}) %> <span class="minorNote">(<%= link_to t('user.login.lost password link'), :controller => 'user', :action => 'lost_password' %>)</span></td></tr>
-  <tr><td colspan=2>&nbsp;<!--vertical spacer--></td></tr>
-  <tr><td></td><td align="left"><%= submit_tag t('user.login.login_button'), :tabindex => 3 %></td></tr>
+  <tr><td colspan="2">&nbsp;<!--vertical spacer--></td></tr>
+  <tr><td></td><td align="right"><%= submit_tag t('user.login.login_button'), :tabindex => 3 %></td></tr>
 </table>
 <% end %>
diff --git a/app/views/user/new.html.erb b/app/views/user/new.html.erb
index 8b1dab5be..83edc9b89 100644
--- a/app/views/user/new.html.erb
+++ b/app/views/user/new.html.erb
@@ -20,18 +20,18 @@
 
 <% form_tag :action => 'save' do %>
 <%= hidden_field_tag('referer', h(params[:referer])) unless params[:referer].nil? %>
-<table id="loginForm">
+<table id="signupForm">
   <tr><td class="fieldName"><%= t 'user.new.email address' %></td><td><%= text_field('user', 'email',{:size => 50, :maxlength => 255, :tabindex => 1}) %></td></tr>
   <tr><td class="fieldName"><%= t 'user.new.confirm email address' %></td><td><%= text_field('user', 'email_confirmation',{:size => 50, :maxlength => 255, :tabindex => 2}) %></td></tr>
   <tr><td></td><td><span class="minorNote"><%= t 'user.new.not displayed publicly' %></span></td></tr>
-  <tr><td colspan=2>&nbsp;<!--vertical spacer--></td></tr>
+  <tr><td colspan="2">&nbsp;<!--vertical spacer--></td></tr>
   <tr><td class="fieldName"><%= t 'user.new.display name' %></td><td><%= text_field('user', 'display_name',{:size => 30, :maxlength => 255, :tabindex => 3}) %></td></tr>
-  <tr><td colspan=2>&nbsp;<!--vertical spacer--></td></tr>
+  <tr><td colspan="2">&nbsp;<!--vertical spacer--></td></tr>
   <tr><td class="fieldName"><%= t 'user.new.password' %></td><td><%= password_field('user', 'pass_crypt',{:size => 30, :maxlength => 255, :tabindex => 4}) %></td></tr>
   <tr><td class="fieldName"><%= t 'user.new.confirm password' %></td><td><%= password_field('user', 'pass_crypt_confirmation',{:size => 30, :maxlength => 255, :tabindex => 5}) %></td></tr>
   
-  <tr><td colspan=2>&nbsp;<!--vertical spacer--></td></tr>
-  <tr><td></td><td align=right><input type="submit" value="<%= t'user.new.signup' %>" tabindex="6"></td></tr>
+  <tr><td colspan="2">&nbsp;<!--vertical spacer--></td></tr>
+  <tr><td></td><td align="right"><input type="submit" value="<%= t'user.new.signup' %>" tabindex="6"></td></tr>
 </table>
 <% end %>
 
diff --git a/public/stylesheets/site-sml.css b/public/stylesheets/site-sml.css
index d81e0453f..5c5213ac8 100644
--- a/public/stylesheets/site-sml.css
+++ b/public/stylesheets/site-sml.css
@@ -115,3 +115,30 @@ h1 {
     display: inline;
 }
 
+#signupForm input[type="text"], #signupForm input[type="password"] {
+    width: 100%;
+}
+#signupForm input#user_email {
+    max-width: 30em;
+}
+#signupForm input#user_email_confirmation {
+    max-width: 30em;
+}
+#signupForm input#user_display_name {
+    max-width: 20em;
+}
+#signupForm input#user_pass_crypt {
+    max-width: 20em;
+}
+#signupForm input#user_pass_crypt_confirmation {
+    max-width: 20em;
+}
+
+#loginForm input#user_email {
+    width: 100%;
+    max-width: 18em;
+}
+#loginForm input#user_password {
+    width: 100%;
+    max-width: 18em;
+}