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 77294e62fae34c98cef92b7bd979a3980b88fe58..19e1f21e143333ce75e30920efbe98dffe95092a 100644 (file)
--- 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 8b1dab5bedd153ccab5452fa9c442c0811dc199d..83edc9b89ad5a18962b68122e8aaa95a8f2cf492 100644 (file)
--- 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 d81e0453f273674e43561b700c04817584a7407e..5c5213ac82081c2d46e7e32569e93be848b792d6 100644 (file)
--- 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;
+}