Refactor signup form to remove tables

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index b392de1df95d253111717dbd104e83eac9971048..c05262b69e004c6aa33b7156a4b30bf45a76ca78 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -1427,24 +1427,22 @@ p#contributorGuidance {
 
 /* Rules for forms */
 
-.submitButton {
-  text-align: center;
-}
+.standard-form fieldset {
+  margin-bottom: 20px;
 
-.fieldName {
-  vertical-align: top;
-  font-weight: bold;
-  font-size: 12px;
-  line-height: 1.6666;
-  text-align: right;
 }
 
-.submitButton {
-  text-align: right;
+.standard-form label {
+  display: block;
+  width: 200px;
+  margin-right: 10px;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 1.5;
 }
 
-.minorNote {
-  font-size: 12px;
+.standard-form .form-row {
+  margin-bottom: 10px;
 }
 
 input[type="text"],
@@ -1535,7 +1533,12 @@ ul.secondary-actions {
 
 /* Utility for general button styles */
 
+input[type="button"],
+input[type="submit"],
+input[type="reset"],
 a.button {
+  cursor: pointer;
+  border: 0;
   display: block;
   padding: 5px;
   min-width: 120px;

diff --git a/app/views/user/new.html.erb b/app/views/user/new.html.erb
index 71d3e875b51731fa4e5e28691bab95242b49b231..25339c1f407d59b2c8d9d867d863d10589230896 100644 (file)
--- a/app/views/user/new.html.erb
+++ b/app/views/user/new.html.erb
@@ -9,62 +9,65 @@
 <%= form_for :user, :url => { :action => 'terms' } do %>
   <%= hidden_field_tag('referer', h(@referer)) unless @referer.nil? %>
 
-  <table id="signupForm">
-    <tr>
-      <td class="fieldName"><%= t 'user.new.email address' %></td>
-      <td><%= email_field(:user, :email, { :size => 50, :maxlength => 255, :tabindex => 1 }) %></td>
-    </tr>
-    <tr>
-      <td class="fieldName"><%= t 'user.new.confirm email address' %></td>
-      <td><%= email_field(:user, :email_confirmation, { :size => 50, :maxlength => 255, :tabindex => 2 }) %></td>
-    </tr>
-    <tr>
-      <td></td>
-      <td><span class="minorNote"><%= raw(t 'user.new.not displayed publicly') %></span></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></td>
-      <td><span class="minorNote"><%= t 'user.new.display name description' %></span></td>
-    </tr>
-
-    <tr id="openid_spacer"><td colspan="2">&nbsp;<!--vertical spacer--></td></tr>
-
-    <tr id="openid_field">
-      <td class="fieldName"><%= raw t 'user.new.openid', :logo => openid_logo %></td>
-      <td><%= url_field(:user, :openid_url, { :id => "openid_url", :size => 50, :maxlength => 255, :tabindex => 4, :class => "openid_url" }) %></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 => 5 }) %></td>
-    </tr>
-    <tr>
-      <td class="fieldName"><%= t 'user.new.confirm password' %></td>
-      <td><%= password_field(:user, :pass_crypt_confirmation, { :size => 30, :maxlength => 255, :tabindex => 6 }) %></td>
-    </tr>
-    <tr>
-      <td></td>
-      <td>
-        <span id="openid_prompt" class="minorNote"><%= link_to raw(t("user.new.use openid", :logo => openid_logo)), "#", :id => "openid_enable" %></span>
-        <span id="openid_note" class="minorNote"><%= t 'user.new.openid no password' %></span>
-      </td>
-    </tr>
-
-    <tr><td colspan="2" >&nbsp;<!--vertical spacer--></td></tr>
-
-    <tr>
-      <td></td>
-      <td class="submitButton"><%= submit_tag t('user.new.continue'), :tabindex => 6 %></td>
-    </tr>
-  </table>
+  <div id="signupForm" class="standard-form">
+    <fieldset>
+      <div class="form-row">
+        <label for="email" class="fieldName">
+          <%= t 'user.new.email address' %>
+        </label>
+        <%= email_field(:user, :email, { :tabindex => 1 }) %>
+      </div>
+      <div class="form-row">
+        <label for="email_confirmation" class="fieldName">
+          <%= t 'user.new.confirm email address' %>
+        </label>
+        <%= email_field(:user, :email_confirmation, { :tabindex => 2 }) %>
+      </div>
+    <p class="form-help deemphasize"><%= raw(t 'user.new.not displayed publicly') %></p>
+    </fieldset>
+
+    <fieldset>
+      <div class="form-row">
+        <label for="display_name" class="fieldName">
+          <%= t 'user.new.display name' %>
+        </label>
+        <%= text_field(:user, :display_name, { :tabindex => 3 }) %>
+      </div>
+      <p class="form-help deemphasize"><%= t 'user.new.display name description' %></span>
+    </fieldset>
+
+    <fieldset id="openid_field">
+      <div class="form-row">
+        <label for="openid_url" class="fieldName">
+          <%= raw t 'user.new.openid', :logo => openid_logo %>
+        </label>
+        <%= url_field(:user, :openid_url, { :id => "openid_url", :tabindex => 4, :class => "openid_url" }) %>
+      </div>
+    </fieldset>
+
+    <fieldset>
+      <div class="form-row">
+        <label for='user[pass_crypt]' class="fieldName">
+          <%= t 'user.new.password' %>
+        </label>
+        <%= password_field(:user, :pass_crypt, {:tabindex => 5 }) %>
+      </div>
+      <div class="form-row">
+        <label class="fieldName">
+          <%= t 'user.new.confirm password' %>
+        </label>
+        <%= password_field(:user, :pass_crypt_confirmation, { :tabindex => 6 }) %>
+      </div>
+      <span id="openid_prompt" class="">
+        <%= link_to raw(t("user.new.use openid", :logo => openid_logo)), "#", :id => "openid_enable" %>
+      </span>
+      <span id="openid_note" class="">
+        <%= t 'user.new.openid no password' %>
+      </span>
+    </fieldset>
+
+      <div class="submitButton"><%= submit_tag t('user.new.continue'), :tabindex => 6 %></div>
+  </div>
 <% end %>
 
 <script type="text/javascript">