Improve layout and styling of forms
authorSaman Bemel-Benrud <samanpwbb@gmail.com>
Wed, 12 Jun 2013 00:57:10 +0000 (17:57 -0700)
committerTom Hughes <tom@compton.nu>
Mon, 8 Jul 2013 08:03:17 +0000 (09:03 +0100)
18 files changed:
app/assets/stylesheets/common.css.scss
app/helpers/application_helper.rb
app/views/diary_entry/comments.html.erb
app/views/diary_entry/edit.html.erb
app/views/export/start.html.erb
app/views/message/_message_summary.html.erb
app/views/message/_sent_message_summary.html.erb
app/views/message/new.html.erb
app/views/message/read.html.erb
app/views/oauth_clients/_form.html.erb
app/views/oauth_clients/edit.html.erb
app/views/oauth_clients/new.html.erb
app/views/oauth_clients/show.html.erb
app/views/trace/create.html.erb
app/views/trace/edit.html.erb
app/views/user/account.html.erb
app/views/user/login.html.erb
app/views/user/new.html.erb

index 4c1345eaadb188d41085b5a7ba3cc53cb23b29c4..148d4368a02da5f93a6bf4068959a1b673487c53 100644 (file)
@@ -4,6 +4,7 @@ $typeheight: 14px;
 
 $offwhite: #f4f4ff;
 $blue: #7092FF;
+$lightblue: #B8C5F0;
 $grey: #AAA;
 $keyline: #CCC;
 $hovercolor: 20%;
@@ -12,7 +13,7 @@ $hovercolor: 20%;
 
 /* Minimal CSS reset */
 
-html, body, ul, ol, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p {
+html, body, ul, ol, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p, input {
   margin: 0;
   padding: 0;
   border: 0;
@@ -488,7 +489,7 @@ table {
 
 .count-number {
   padding: 2px $lineheight/4;
-  border-radius: 3px;
+  border-radius: 2px;
   background: #d7d7ff;
   margin: 0 2px;
   font-size: 11px;
@@ -738,6 +739,10 @@ ul.results-list li { border-bottom: 1px solid #ccc; }
 
 .export_area_inputs {
   margin-bottom: $lineheight/2;
+  input[type="text"] {
+    width: 60px;
+    margin-bottom: 5px;
+  }
 }
 
 .export_bound {
@@ -1285,8 +1290,16 @@ ul.results-list li { border-bottom: 1px solid #ccc; }
   border: 1px solid #ccc;
 }
 
-.accountImage-options p {
-  margin-bottom: 0px;
+#accountForm .user_image {
+  margin-bottom: 0;
+}
+
+#accountForm #user_image {
+  margin-left: 20px;
+}
+
+#accountForm ul.accountImage-options {
+  margin-left: 120px;
 }
 
 .nohome .location {
@@ -1306,12 +1319,18 @@ ul.results-list li { border-bottom: 1px solid #ccc; }
   float: none;
 }
 
-/* Rules for message in/out box page */
+/* Rules for the oauth settings page */
 
-.message #content {
-  max-width: 740px;
+.oauth_clients .buttons .oauth-edit {
+  border-radius: 2px 0 0 2px;
 }
 
+.oauth_clients .buttons .oauth-delete {
+  border-radius: 0 2px 2px 0;
+}
+
+/* Rules for messages pages */
+
 .messages {
   width: 100%;
   border: 1px solid #ddd;
@@ -1340,6 +1359,7 @@ ul.results-list li { border-bottom: 1px solid #ccc; }
     padding: $lineheight/4;
   }
   tr td {
+    height: 30px;
     border-right: 1px solid $keyline;
   }
 }
@@ -1362,10 +1382,26 @@ ul.results-list li { border-bottom: 1px solid #ccc; }
   vertical-align: middle;
 }
 
+.inbox-mark-unread,
+.inbox-mark-read,
+.inbox-delete {
+  width: 1%;
+}
+
 .inbox-row-unread .inbox-mark-unread {
   display: none;
 }
 
+.message-read .message-buttons {
+  margin-top: $lineheight;
+  padding-top: $lineheight;
+  border-top: 1px solid $keyline;
+}
+
+.message-read .buttons .mark-unread-button {
+  border-radius: 0;
+}
+
 /* Rules for "flash" notice boxes shown at the top of the content area */
 
 .flash {
@@ -1426,15 +1462,25 @@ ul.results-list li { border-bottom: 1px solid #ccc; }
   fieldset {
     margin-bottom: $lineheight;
   }
-  label {
+  label.standard-label {
     display: block;
-    width: 300px;
     margin-bottom: $lineheight/4;
     font-size: $typeheight;
     font-weight: bold;
     line-height: 1.5;
   }
-  .form-section {
+  label.standard-label.secondary {
+    display: inline-block;
+    font-weight: normal;
+  }
+  .form-help {
+    font-weight: normal;
+  }
+  .form-column {
+    float: left;
+    margin-right: 20px;
+  }
+  .form-divider {
     margin-top: $lineheight;
     padding-top: $lineheight;
     border-top: 1px solid $keyline;
@@ -1442,9 +1488,17 @@ ul.results-list li { border-bottom: 1px solid #ccc; }
   .form-row {
     margin-bottom: $lineheight/2;
   }
-  input[name=remember_me],
-  input[name=remember_me_openid] {
+  .form-list {
+    margin-bottom: 0;
+  }
+  .form-list li {
+    margin-bottom: 5px;
+   }
+  input[type="checkbox"],
+  input[type="radio"] {
     float: left;
+    margin-top: 5px;
+    margin-right: 5px;
   }
 }
 
@@ -1465,6 +1519,8 @@ textarea {
 
 textarea {
   padding: 5px;
+  width: 100%;
+  height: 100% !important;
 }
 
 /* Rules for user images */
@@ -1553,8 +1609,9 @@ input[type="reset"],
 a.button {
   cursor: pointer;
   border: 0;
-  display: block;
-  padding: $lineheight/4;
+  display: inline-block;
+  line-height: 20px;
+  padding: $lineheight/4 $lineheight/2;
   min-width: 120px;
   margin: 0 0 $lineheight/2 0;
   color: white;
@@ -1566,31 +1623,28 @@ a.button {
     background: darken($blue, $hovercolor);
     text-decoration: none;
   }
+  &.deemphasize {
+    background: $lightblue;
+    &:hover {
+      background: darken($lightblue, $hovercolor);
+    }
+  }
   &:last-child {
     margin-bottom: 0;
   }
 }
 
-a.button.submit {
-  background-color: #cbeea7;
-  &:hover {
-    background-color: #9ed485;
-  }
-}
-
 .buttons {
   min-width: 200px;
-
   input[type="submit"],
+  input[type="button"],
+  input[type="reset"],
   .button {
     box-sizing: border-box;
-    display: inline-block;
+    float: left;
     margin-bottom:0;
-    width:50%;
-    min-width: 0;
+    min-width: 100px;
     max-width: 150px;
-    margin-left: 2px;
-    margin-right: 2px;
   }
   input:first-child,
   .button:first-child {
@@ -1603,6 +1657,12 @@ a.button.submit {
     border-radius:0 2px 2px 0;
     margin-right: 0px;
   }
+  input:only-child,
+  .button:only-child {
+    border-radius:2px;
+    margin-right: 0px;
+  }
+
 }
 
 /* Rules for doing distinct colour of alternate table rows */
@@ -1626,7 +1686,8 @@ a.button.submit {
 
 /* Rules for rich text */
 
-.richtext {
+.richtext,
+.prose {
   h1, h2 {
     padding-bottom: $lineheight/2;
     border-bottom: 1px dashed #cccccc;
@@ -1704,7 +1765,10 @@ a.button.submit {
 /* Rules for rich text editors */
 
 .richtext_container {
+  margin-bottom: $lineheight;
+
   .richtext_content {
+    width: 50%;
     display: inline-block;
     vertical-align: top;
 
index fa7ef3daa3fd35dcdad462b9568bef11398eb124..3a0ad084b5f15ac30808d7aeb14f5154e19442a6 100644 (file)
@@ -84,8 +84,8 @@ module ApplicationHelper
       output_buffer << content_tag(:div, :id => "#{id}_help", :class => "richtext_help") do
         output_buffer << render("site/#{format}_help")
         output_buffer << content_tag(:div, :class => "buttons") do
-          output_buffer << submit_tag(I18n.t("site.richtext_area.edit"), :id => "#{id}_doedit", :class => "richtext_doedit", :disabled => true)
-          output_buffer << submit_tag(I18n.t("site.richtext_area.preview"), :id => "#{id}_dopreview", :class => "richtext_dopreview")
+          output_buffer << submit_tag(I18n.t("site.richtext_area.edit"), :id => "#{id}_doedit", :class => "richtext_doedit deemphasize", :disabled => true)
+          output_buffer << submit_tag(I18n.t("site.richtext_area.preview"), :id => "#{id}_dopreview", :class => "richtext_dopreview deemphasize")
         end
       end
     end
index b55eecf76576cdc80a64b102771a3246e5f93f00..971993a9b65ac4f6b800cad592600b1821366d46 100644 (file)
@@ -2,7 +2,7 @@
   <h1><%= t('diary_entry.comments.has_commented_on', :display_name => @this_user.display_name) %></h1>
 <% end %>
 
-<table class="comments-table" width="100%">
+<table class="messages" width="100%">
   <tr>
     <th width="25%"><%= t 'diary_entry.comments.post' %></th>
     <th width="25%"><%= t 'diary_entry.comments.when' %></th>
@@ -13,7 +13,7 @@
   <tr class="<%= cl %>">
     <td width="25%"><%= link_to comment.diary_entry.title, :action => :view, :display_name => comment.diary_entry.user.display_name, :id => comment.diary_entry.id %></td>
     <td width="25%"><span title="<%= l comment.created_at, :format => :friendly %>"><%= t 'diary_entry.comments.ago', :ago => time_ago_in_words(comment.created_at) %></span></td>
-    <td width="50%" class="richtext"><%= comment.body.to_html %></td>
+    <td width="50%" class="richtext"><%= comment.body %></td>
   </tr>
   <% end -%>
 </table>
index 940389c8367facad3fe9641c6a5a96acbbf63062..93e7631ed6e4365be40b279f0e55edcd86bf5984 100644 (file)
 <%= form_for :diary_entry do |f| %>
   <div class="diary_entry standard-form">
     <fieldset>
-      <label class="standard-label"><%= t 'diary_entry.edit.subject' -%></label>
-      <%= f.text_field :title, :size => 60 %>
-    </fieldset>
-    <fieldset>
-      <label class="standard-label"><%= t 'diary_entry.edit.body' -%></label>
-      <%= richtext_area :diary_entry, :body, :cols => 80, :format => @diary_entry.body_format %>
-    </fieldset>
-    <fieldset>
-      <label class="standard-label"><%= t 'diary_entry.edit.language' -%></label>
-      <%= f.collection_select :language_code, Language.order(:english_name), :code, :name %>
+      <div class='form-row'>
+        <label class="standard-label"><%= t 'diary_entry.edit.subject' -%></label>
+        <%= f.text_field :title %>
+      </div>
+      <div class='form-row'>
+        <label class="standard-label"><%= t 'diary_entry.edit.body' -%></label>
+        <%= richtext_area :diary_entry, :body, :format => @diary_entry.body_format %>
+      </div>
+      <div clas='form-row'>
+        <label class="standard-label"><%= t 'diary_entry.edit.language' -%></label>
+        <%= f.collection_select :language_code, Language.order(:english_name), :code, :name %>
+    </div>
     </fieldset>
-    <div class="location">
-      <p class="form-help"><%= t 'diary_entry.edit.location' -%></p>
+    <fieldset class='location'>
+      <label class="standard-label"><%= t 'diary_entry.edit.location' -%></label>
       <%= content_tag "div", "", :id => "map", :data => {:lat => @lat, :lon => @lon, :zoom => @zoom} %>
-      <fieldset>
-        <label class="standard-label"><%= t 'diary_entry.edit.latitude' -%></label>
-        <%= f.text_field :latitude, :size => 20, :id => "latitude" %>
-      </fieldset>
-      <fieldset>
-        <label class="standard-label"><%= t 'diary_entry.edit.longitude' -%></label>
-        <%= f.text_field :longitude, :size => 20, :id => "longitude" %>
-      </fieldset>
-      <p class="form-help"><a href="#" id="usemap"><%= t 'diary_entry.edit.use_map_link' -%></a></p>
-    </div>
+      <div class='form-row clearfix'>
+        <div class='form-column'>
+          <label class="secondary standard-label"><%= t 'diary_entry.edit.latitude' -%></label>
+          <%= f.text_field :latitude, :size => 20, :id => "latitude" %>
+        </div>
+        <div class='form-column'>
+          <label class="secondary standard-label"><%= t 'diary_entry.edit.longitude' -%></label>
+          <%= f.text_field :longitude, :size => 20, :id => "longitude" %>
+        </div>
+        <div class='form-column'>
+          <a href="#" id="usemap"><%= t 'diary_entry.edit.use_map_link' -%></a>
+        </div>
+      </div>
+    </fieldset>
+
     <%= submit_tag t('diary_entry.edit.save_button') %>
     <%# TODO: button should say 'publish' or 'save changes' depending on new/edit state %>
   </div>
index 7c733ab7fcf587d3eb5419d9644d7ffd8b608e28..cdb16970fb02787e67dc411e668f3918932f80b9 100644 (file)
   <h4><%= t'export.start.format_to_export' %></h4>
 
   <ul class="export_details inner12">
-    <li><%= radio_button_tag("format", "osm") %> <%= t'export.start.osm_xml_data' %></li>
-    <li><%= radio_button_tag("format", "mapnik") %> <%= t'export.start.map_image' %></li>
-    <li><%= radio_button_tag("format", "html") %> <%= t'export.start.embeddable_html' %></li>
+    <li>
+      <%= radio_button_tag("format", "osm") %>
+      <label for='format_osm'><%= t'export.start.osm_xml_data' %></label>
+    </li>
+    <li>
+      <%= radio_button_tag("format", "mapnik") %>
+      <label for='format_mapnik'><%= t'export.start.map_image' %></label>
+    </li>
+    <li>
+      <%= radio_button_tag("format", "html") %>
+      <label for='format_html'><%= t'export.start.embeddable_html' %></label></li>
   </ul>
 
   <div id="export_osm">
index ffdfd6c380443dc9bfdbb8100a6c5b263d72e54c..6e692ab2c85acac0622c9b449e6443adb319b0bc 100644 (file)
@@ -4,5 +4,5 @@
   <td class="inbox-sent"><%= l message_summary.sent_on, :format => :friendly %></td>
   <td class="inbox-mark-unread"><%= button_to t('message.message_summary.unread_button'), {:controller => 'message', :action => 'mark', :message_id => message_summary.id, :mark => 'unread'}, { :remote => true } %></td>
   <td class="inbox-mark-read"><%= button_to t('message.message_summary.read_button'), {:controller => 'message', :action => 'mark', :message_id => message_summary.id, :mark => 'read'}, { :remote => true } %></td>
-  <td><%= button_to t('message.message_summary.delete_button'), {:controller => 'message', :action => 'delete', :message_id => message_summary.id, :referer => request.fullpath}, { :remote => true } %></td>
+  <td class="inbox-delete"><%= button_to t('message.message_summary.delete_button'), {:controller => 'message', :action => 'delete', :message_id => message_summary.id, :referer => request.fullpath}, { :remote => true } %></td>
 </tr>
index 3580822ae17c7bbf866dc083ff892e7c210aad3b..de21e8cd3cde2321febfa46a929b55f3f81f92ce 100644 (file)
@@ -2,5 +2,5 @@
   <td class="inbox-sender"><%= link_to h(sent_message_summary.recipient.display_name), :controller => 'user', :action => 'view', :display_name => sent_message_summary.recipient.display_name %></td>
   <td class="inbox-subject"><%= link_to h(sent_message_summary.title), :controller => 'message', :action => 'read', :message_id => sent_message_summary.id  %></td>
   <td class="inbox-sent"><%= l sent_message_summary.sent_on, :format => :friendly %></td>
-  <td><%= button_to t('message.sent_message_summary.delete_button'), :controller => 'message', :action => 'delete', :message_id => sent_message_summary.id, :referer => request.fullpath %></td>
+  <td class="inbox-delete"><%= button_to t('message.sent_message_summary.delete_button'), :controller => 'message', :action => 'delete', :message_id => sent_message_summary.id, :referer => request.fullpath %></td>
 </tr>
index ea9c510f93dad22b519acbfa2a673e0b7af351cb..3dc16acc043954f003dfe74e701434d5c991335c 100644 (file)
@@ -5,21 +5,18 @@
 <%= error_messages_for 'message' %>
 
 <%= form_for :message, :html => { :class => 'standard-form' }, :url => { :action => "new", :display_name => @this_user.display_name } do |f| %>
-  <fieldset class="form-row">
-    <label class="standard-label"><%= t'message.new.subject' %></label>
-    <%= f.text_field :title, :size => 60, :value => @subject %>
-  </fieldset>
-
-  <fieldset class="form-row">
-    <label class="standard-label"><%= t'message.new.body' %></label>
-    <%= richtext_area :message, :body, :cols => 80, :value => @body %>
-  </fieldset>
-
-  <fieldset class="form-row">
-    <%= submit_tag t('message.new.send_button') %>
+  <fieldset>
+    <div class='form-row'>
+      <label class="standard-label"><%= t'message.new.subject' %></label>
+      <%= f.text_field :title, :size => 60, :value => @subject %>
+    </div>
+    <div class='form-row'>
+      <label class="standard-label"><%= t'message.new.body' %></label>
+      <%= richtext_area :message, :body, :cols => 80, :value => @body %>
+    </div>
+    <div class='buttons'>
+      <%= submit_tag t('message.new.send_button') %>
+      <%= link_to t('message.new.back_to_inbox'), { :controller => 'message', :action => 'inbox', :display_name => @user.display_name }, :class => 'deemphasize button' %>
+    </div>
   </fieldset>
 <% end %>
-
-<br />
-
-<%= link_to t('message.new.back_to_inbox'), :controller => 'message', :action => 'inbox', :display_name => @user.display_name %>
index 98584cc9aa47329bd52ad75892d69a590ae7dc9e..eeacd5b39b63c6404b26739a47ca8959f99e4b82 100644 (file)
@@ -8,16 +8,14 @@
     <%= link_to h(@message.sender.display_name), :controller => 'user', :action => 'view', :display_name => @message.sender.display_name %></td>
     <div class='right'>
       <%= l @message.sent_on, :format => :friendly %>
-      <div class='buttons'>
-      <%= button_to t('message.read.reply_button'), :controller => 'message', :action => 'reply', :message_id => @message.id %>
-      <%= button_to t('message.read.unread_button'), :controller => 'message', :action => 'mark', :message_id => @message.id, :mark => 'unread' %>
-    </div>
     </div>
   </div>
 
   <div class="richtext"><%= @message.body.to_html %></div>
 
-  <%= link_to t('message.read.back_to_inbox'), :controller => 'message', :action => 'inbox', :display_name => @user.display_name %>
+  <div class='message-buttons buttons'>
+    <%= button_to t('message.read.reply_button'), {:controller => 'message', :action => 'reply', :message_id => @message.id}, :class => 'reply-button' %>
+    <%= button_to t('message.read.unread_button'), {:controller => 'message', :action => 'mark', :message_id => @message.id, :mark => 'unread'}, :class => 'mark-unread-button' %>
 
 <% else %>
 
@@ -33,6 +31,9 @@
 
   <div class="richtext"><%= @message.body.to_html %></div>
 
-  <%= link_to t('message.read.back_to_outbox'), :controller => 'message', :action => 'outbox', :display_name => @user.display_name %>
+  <div class='message-buttons buttons'>
 
 <% end %>
+
+  <%= link_to t('message.read.back_to_outbox'), {:controller => 'message', :action => 'outbox', :display_name => @user.display_name }, :class => "button deemphasize" %>
+  </div>
index dc8f8e3d91e96f15d7710151edcb2f237e9e6117..96ab68ad7bc2eae27d2f1ee13e8ca537dd2d201d 100644 (file)
@@ -1,23 +1,29 @@
-<div class="field">
-  <label for="client_application_name"><%= t'oauth_clients.form.name' %> (<%= t'oauth_clients.form.required' %>)</label><br/>
-  <%= f.text_field :name %>
-</div>
-<div class="field">
-  <label for="client_application_url"><%= t'oauth_clients.form.url' %> (<%= t'oauth_clients.form.required' %>)</label><br/>
-  <%= f.text_field :url %>
-</div>
-<div class="field">
-  <label for="client_application_callback_url"><%= t'oauth_clients.form.callback_url' %></label><br/>
-  <%= f.text_field :callback_url %>
-</div>
-<div class="field">
-  <label for="client_application_support_url"><%= t'oauth_clients.form.support_url' %></label><br/>
-  <%= f.text_field :support_url %>
-</div>
-<p><%= t'oauth_clients.form.requests' %></p>
-<% ClientApplication.all_permissions.each do |perm| %>
-<div class="field">
-  <%= f.check_box perm %>
-  <label for="client_application_<%= perm.to_s %>"><%= t('oauth_clients.form.' + perm.to_s) %></label><br/>
-</div>
-<% end %>
+<div class='standard-form'>
+  <fieldset>
+    <div class="form-row">
+      <label class='standard-label' for="client_application_name"><%= t'oauth_clients.form.name' %> (<%= t'oauth_clients.form.required' %>)</label>
+      <%= f.text_field :name %>
+    </div>
+    <div class="form-row">
+      <label class='standard-label' for="client_application_url"><%= t'oauth_clients.form.url' %> (<%= t'oauth_clients.form.required' %>)</label>
+      <%= f.text_field :url %>
+    </div>
+    <div class="form-row">
+      <label class='standard-label' for="client_application_callback_url"><%= t'oauth_clients.form.callback_url' %></label>
+      <%= f.text_field :callback_url %>
+    </div>
+    <div class="form-row">
+      <label class='standard-label' for="client_application_support_url"><%= t'oauth_clients.form.support_url' %></label>
+      <%= f.text_field :support_url %>
+    </div>
+  </fieldset>
+  <fieldset class='form-divider'>
+      <p><%= t'oauth_clients.form.requests' %></p>
+      <% ClientApplication.all_permissions.each do |perm| %>
+        <div class="form-row">
+          <%= f.check_box perm %>
+          <label class='standard-label' for="client_application_<%= perm.to_s %>"><%= t('oauth_clients.form.' + perm.to_s) %></label>
+        </div>
+      <% end %>
+  </fieldset>
+</div>
\ No newline at end of file
index 99aab0ed03b95d9d7db616eb846ed28ae50cafc5..397849c4442d28d4e3a4dd9affa96a4b93149210 100644 (file)
@@ -4,6 +4,5 @@
 
 <%= form_for @client_application, :url => oauth_client_path(@client_application.user.display_name, @client_application), :html => { :method => :put } do |f| %>
   <%= render :partial => "form", :locals => { :f => f } %>
-  <br/>
   <%= submit_tag t'oauth_clients.edit.submit' %>
 <% end %>
index 1c18857b1cb628d12ad24a0745282361404a34cb..a931cffe59660c61b51793776d298b05a8a8fc80 100644 (file)
@@ -2,8 +2,10 @@
   <h1><%= t'oauth_clients.new.title' %></h1>
 <% end %>
 
-<%= form_for :client_application, :url => { :action => :create } do |f| %>
-   <%= render :partial => "form", :locals => { :f => f } %>
-   <br />
-   <%= submit_tag t('oauth_clients.new.submit') %>
-<% end %>
\ No newline at end of file
+<div class='standard-form'>
+  <%= form_for :client_application, :url => { :action => :create } do |f| %>
+  <%= render :partial => "form", :locals => { :f => f } %>
+  <%= submit_tag t('oauth_clients.new.submit') %>
+</div>
+
+<% end %>
index 131696ed305fd9f4dc1fc712e03dc7a6bc0af1d4..a23ce082d05fc91ea1d01a0d0591073a138bf1a4 100644 (file)
@@ -1,32 +1,33 @@
 <% content_for :heading do %>
   <h1><%= t('oauth_clients.show.title', :app_name => @client_application.name) %></h1>
 <% end %>
-<p>
-  <b><%= t'oauth_clients.show.key' %></b> <%=@client_application.key %>
-</p>
-<p>
-  <b><%= t'oauth_clients.show.secret' %></b> <%=@client_application.secret %>
-</p>
-<p>
-  <b><%= t'oauth_clients.show.url' %></b> http<%='s' if request.ssl? %>://<%= request.host_with_port %><%=@client_application.oauth_server.request_token_path %>
-</p>
-<p>
-  <b><%= t'oauth_clients.show.access_url' %></b> http<%='s' if request.ssl? %>://<%= request.host_with_port %><%=@client_application.oauth_server.access_token_path %>
-</p>
-<p>
-  <b><%= t'oauth_clients.show.authorize_url' %></b> http<%='s' if request.ssl? %>://<%= request.host_with_port %><%=@client_application.oauth_server.authorize_path %>
-</p>
+<div class='prose'>
+  <p>
+    <strong><%= t'oauth_clients.show.key' %></strong> <%=@client_application.key %>
+  </p>
+  <p>
+    <strong><%= t'oauth_clients.show.secret' %></strong> <%=@client_application.secret %>
+  </p>
+  <p>
+    <strong><%= t'oauth_clients.show.url' %></strong> http<%='s' if request.ssl? %>://<%= request.host_with_port %><%=@client_application.oauth_server.request_token_path %>
+  </p>
+  <p>
+    <strong><%= t'oauth_clients.show.access_url' %></strong> http<%='s' if request.ssl? %>://<%= request.host_with_port %><%=@client_application.oauth_server.access_token_path %>
+  </p>
+  <p>
+    <strong><%= t'oauth_clients.show.authorize_url' %></strong> http<%='s' if request.ssl? %>://<%= request.host_with_port %><%=@client_application.oauth_server.authorize_path %>
+  </p>
 
-<p><%= t'oauth_clients.show.requests' %></p>
-<ul><% @client_application.permissions.each do |perm| %>
-<div class="field">
-  <li><%= t('oauth_clients.form.' + perm.to_s) %></li>
-</div>
-<% end %></ul>
-
-<p><%= t'oauth_clients.show.support_notice' %></p>
+  <p><%= t'oauth_clients.show.requests' %></p>
+  <ul><% @client_application.permissions.each do |perm| %>
+  <div class="field">
+    <li><%= t('oauth_clients.form.' + perm.to_s) %></li>
+  </div>
+  <% end %></ul>
 
+  <p><%= t'oauth_clients.show.support_notice' %></p>
+</div>
 <div class="buttons">
-  <%= button_to t('oauth_clients.show.edit'), edit_oauth_client_path(@client_application.user.display_name, @client_application), :method => :get %>
-  <%= button_to t('oauth_clients.show.delete'), oauth_client_path(@client_application.user.display_name, @client_application), :method => :delete, :data => { :confirm => t('oauth_clients.show.confirm') } %>
+  <%= button_to t('oauth_clients.show.edit'), edit_oauth_client_path(@client_application.user.display_name, @client_application), :method => :get, :class=> "oauth-edit" %>
+  <%= button_to t('oauth_clients.show.delete'), oauth_client_path(@client_application.user.display_name, @client_application), :method => :delete, :data => { :confirm => t('oauth_clients.show.confirm') }, :class=> "oauth-delete deemphasize" %>
 </div>
index bfdbf37b42d35d3f63fa01a1b883e911799af87d..43d4eff3750bba96b390d047626dfce792132189 100644 (file)
@@ -7,24 +7,27 @@
 <%= form_for @trace, :url => { :action => "create" }, :html => { :multipart => true } do |f| %>
   <div class="standard-form">
     <fieldset>
-      <label class="standard-label"><%= t'trace.trace_form.upload_gpx' %></label>
-      <%= f.file_field :gpx_file %>
-    </fieldset>
-    <fieldset>
-      <label class="standard-label"><%= t'trace.trace_form.description' %></label>
-      <%= f.text_field :description %></td></tr>
-    </fieldset>
-    <fieldset>
-      <label class="standard-label"><%= t'trace.trace_form.tags' %></label>
-      <%= f.text_field :tagstring %>
-      <p class="form-help deemphasize">(<%= t'trace.trace_form.tags_help' %>)</p>
-    </fieldset>
-    <fieldset>
-      <label class="standard-label"><%= t'trace.trace_form.visibility' %></label>
-      <%= f.select :visibility, [[t('trace.visibility.private'),"private"],[t('trace.visibility.public'),"public"],[t('trace.visibility.trackable'),"trackable"],[t('trace.visibility.identifiable'),"identifiable"]] %>
-      <p class="form-help deemphasize">(<a href="<%= t'trace.trace_form.visibility_help_url' %>"><%= t'trace.trace_form.visibility_help' %></a>)</p>
+      <div class='form-row'>
+        <label for="trace_gpx_file" class="standard-label"><%= t'trace.trace_form.upload_gpx' %></label>
+        <%= f.file_field :gpx_file %>
+      </div>
+      <div class='form-row'>
+        <label class="standard-label"><%= t'trace.trace_form.description' %></label>
+        <%= f.text_field :description %>
+      </div>
+      <div class='form-row'>
+        <label class="standard-label"><%= t'trace.trace_form.tags' %></label>
+        <%= f.text_field :tagstring %>
+        <span class="form-help deemphasize">(<%= t'trace.trace_form.tags_help' %>)</span>
+      </div>
+      <div class='form-row'>
+        <label class="standard-label"><%= t'trace.trace_form.visibility' %></label>
+        <%= f.select :visibility, [[t('trace.visibility.private'),"private"],[t('trace.visibility.public'),"public"],[t('trace.visibility.trackable'),"trackable"],[t('trace.visibility.identifiable'),"identifiable"]] %>
+        <span class="form-help deemphasize">(<a href="<%= t'trace.trace_form.visibility_help_url' %>"><%= t'trace.trace_form.visibility_help' %></a>)</span>
+      </div>
     </fieldset>
+
     <%= submit_tag t('trace.trace_form.upload_button') %>
-    <p class="form-help deemphasize"><a href="<%= t'trace.trace_form.help_url' %>"><%= t'trace.trace_form.help' %></a></p>
+    <span class="form-help deemphasize"><a href="<%= t'trace.trace_form.help_url' %>"><%= t'trace.trace_form.help' %></a></span>
   </div>
 <% end %>
index 36b5ee90e723c78e3d628e9c47ecf3d487a6a6aa..d9ec9f14b7d94cc632ca824607c4ec2edfc07195 100644 (file)
@@ -8,40 +8,54 @@
 
 <div id='edit-trace-form' class='standard-form'>
   <fieldset>
-    <label><%= t'trace.edit.filename' %></label>
-    <p class='deemphasize'><%= @trace.name %> (<%= link_to t('trace.edit.download'), :controller => 'trace', :action => 'data', :id => @trace.id %>)</p>
-  </fieldset>
-  <fieldset>
-    <label><%= t'trace.edit.uploaded_at' %></label>
-    <p class='deemphasize'><%= l @trace.timestamp, :format => :friendly %></p>
+    <div class='form-row'>
+      <label><%= t'trace.edit.filename' %></label>
+      <p class='deemphasize'><%= @trace.name %> (<%= link_to t('trace.edit.download'), :controller => 'trace', :action => 'data', :id => @trace.id %>)</p>
+    </div>
+    <div class='form-row'>
+      <label><%= t'trace.edit.uploaded_at' %></label>
+      <p class='deemphasize'><%= l @trace.timestamp, :format => :friendly %></p>
+    </div>
   </fieldset>
+
   <% if @trace.inserted? %>
+
   <fieldset>
-    <label><%= t'trace.edit.points' %></label>
-    <p class='deemphasize'><%= @trace.size.to_s.gsub(/(\d)(?=(\d{3})+$)/,'\1,') %></p>
-  <fieldset>
-    <label><%= t'trace.edit.start_coord' %></label>
+    <div class='form-row'>
+      <label><%= t'trace.edit.points' %></label>
+      <p class='deemphasize'><%= @trace.size.to_s.gsub(/(\d)(?=(\d{3})+$)/,'\1,') %></p>
+    </div>
+    <div class='form-row'>
+      <label><%= t'trace.edit.start_coord' %></label>
+    </div>
     <div class="geo">
       <span class="latitude"><%= @trace.latitude %></span>;
       <span class="longitude"><%= @trace.longitude %></span>
     </div>
-      (<%=link_to t('trace.edit.map'), :controller => 'site', :action => 'index', :lat => @trace.latitude, :lon => @trace.longitude, :zoom => 14 %> / <%=link_to t('trace.edit.edit'), :controller => 'site', :action => 'edit', :lat => @trace.latitude, :lon => @trace.longitude, :gpx=> @trace.id, :zoom => 14 %>)
+    (<%=link_to t('trace.edit.map'), :controller => 'site', :action => 'index', :lat => @trace.latitude, :lon => @trace.longitude, :zoom => 14 %> / <%=link_to t('trace.edit.edit'), :controller => 'site', :action => 'edit', :lat => @trace.latitude, :lon => @trace.longitude, :gpx=> @trace.id, :zoom => 14 %>)
   </fieldset>
+
   <% end %>
+
   <fieldset>
-    <label><%= t'trace.edit.owner' %></label>
-    <p class='deemphasize'><%= link_to h(@trace.user.display_name), {:controller => 'user', :action => 'view', :display_name => @trace.user.display_name} %></p>
-  </fieldset>
-    <label><%= t'trace.edit.description' %></label>
-    <%= f.text_field :description %>
-  </fieldset>
-  <fieldset>
-    <label><%= t'trace.edit.tags' %></label>
-    <%= f.text_field :tagstring %> (<%= t'trace.edit.tags_help' %>)
+    <div class='form-row'>
+      <label><%= t'trace.edit.owner' %></label>
+      <p class='deemphasize'><%= link_to h(@trace.user.display_name), {:controller => 'user', :action => 'view', :display_name => @trace.user.display_name} %></p>
+    </div>
+    <div class='form-row'>
+      <label><%= t'trace.edit.description' %></label>
+      <%= f.text_field :description %>
+    </div>
+    <div class='form-row'>
+      <label><%= t'trace.edit.tags' %></label>
+      <%= f.text_field :tagstring %> (<%= t'trace.edit.tags_help' %>)
+    </div>
+    <div class='form-row'>
+      <label><%= t'trace.edit.visibility' %></label>
+      <%= f.select :visibility, [[t('trace.visibility.private'),"private"],[t('trace.visibility.public'),"public"],[t('trace.visibility.trackable'),"trackable"],[t('trace.visibility.identifiable'),"identifiable"]] %> (<a href="<%= t'trace.edit.visibility_help_url' %>"><%= t'trace.edit.visibility_help' %></a>)
+    </div>
   </fieldset>
-  <fieldset>
-    <label><%= t'trace.edit.visibility' %></label>
-    <%= f.select :visibility, [[t('trace.visibility.private'),"private"],[t('trace.visibility.public'),"public"],[t('trace.visibility.trackable'),"trackable"],[t('trace.visibility.identifiable'),"identifiable"]] %> (<a href="<%= t'trace.edit.visibility_help_url' %>"><%= t'trace.edit.visibility_help' %></a>)
+
 </div>
 
 <%= submit_tag t'trace.edit.save_button' %>
index d8a63bde63e8c9d98922043504d3864adb643b79..a0979d5ae5cb80594954d62d17324a2d6cca61c8 100644 (file)
 
 <%= error_messages_for 'user' %>
 <%= form_for :user, :html => { :multipart => true, :id => 'accountForm',:class => 'standard-form' } do |f| %>
-  <fieldset class="form-row">
-    <label class="standard-label"><%= t 'user.new.display name' %></label>
-    <%= f.text_field :display_name %>
+  <fieldset>
+    <div class="form-row">
+      <label class="standard-label"><%= t 'user.new.display name' %></label>
+      <%= f.text_field :display_name %>
+    </div>
   </fieldset>
 
-  <fieldset class="form-row">
-    <label class="standard-label"><%= t 'user.account.current email address' %></label>
-    <input type="email" disabled value="<%= @user.email %>" />
-    <p class="form-help deemphasize"><%= t 'user.account.email never displayed publicly' %></p>
-  </fieldset>
+  <fieldset>
+    <div class="form-row">
+      <label class="standard-label"><%= t 'user.account.current email address' %></label>
+      <input type="email" disabled value="<%= @user.email %>" />
+      <span class="form-help deemphasize"><%= t 'user.account.email never displayed publicly' %></span>
+    </div>
 
-  <fieldset class="form-row">
-    <label class="standard-label"><%= t 'user.account.new email address' %></label>
-    <%= f.email_field :new_email %>
-    <p class="form-help deemphasize"><%= t 'user.account.email never displayed publicly' %></p>
+    <div class="form-row">
+      <label class="standard-label"><%= t 'user.account.new email address' %></label>
+      <%= f.email_field :new_email %>
+      <span class="form-help deemphasize"><%= t 'user.account.email never displayed publicly' %></span>
+    </div>
   </fieldset>
 
-  <fieldset class="form-row">
-      <label class="standard-label"><%= t 'user.new.password' %></label>
-    <%= f.password_field :pass_crypt, {:value => '', :autocomplete => :off} %>
-  </fieldset>
+  <fieldset>
+    <div class="form-row">
+        <label class="standard-label"><%= t 'user.new.password' %></label>
+      <%= f.password_field :pass_crypt, {:value => '', :autocomplete => :off} %>
+    </div>
 
-  <fieldset class="form-row">
-    <label class="standard-label"><%= t 'user.new.confirm password' %></label>
-    <%= f.password_field :pass_crypt_confirmation, {:value => '', :autocomplete => :off} %>
+    <div class="form-row">
+      <label class="standard-label"><%= t 'user.new.confirm password' %></label>
+      <%= f.password_field :pass_crypt_confirmation, {:value => '', :autocomplete => :off} %>
+    </div>
   </fieldset>
 
-  <fieldset class="form-row">
-    <label class="standard-label"><%= t 'user.account.openid.openid' %></label>
+  <fieldset>
+    <div class="form-row">
+      <label class="standard-label"><%= t 'user.account.openid.openid' %></label>
       <%= f.url_field :openid_url, {:id => "openid_url", :class => "openid_url"} %>
-      <p class="form-help deemphasize">(<a href="<%= t 'user.account.openid.link' %>" target="_new"><%= t 'user.account.openid.link text' %></a>)</p>
+      <span class="form-help deemphasize">(<a href="<%= t 'user.account.openid.link' %>" target="_new"><%= t 'user.account.openid.link text' %></a>)</span>
+    </diV>
   </fieldset>
 
-  <div class="form-row">
-    <label class="standard-label"><%= t 'user.account.public editing.heading' %></label>
-    <p class="form-help deemphasize">
-      <% if @user.data_public? %>
-        <%= t 'user.account.public editing.enabled' %>
-        (<a href="<%= t 'user.account.public editing.enabled link' %>" target="_new"><%= t 'user.account.public editing.enabled link text' %></a>)
-      <% else %>
-        <%= t 'user.account.public editing.disabled' %>
-        (<a href="#public"><%= t 'user.account.public editing.disabled link text' %></a>)
-      <% end %>
-    </p>
-  </div>
-
-  <fieldset class="form-row">
-    <label class="standard-label"><%= t 'user.account.contributor terms.heading' %></label>
-    <p class="form-help deemphasize">
-      <% if @user.terms_agreed? %>
-        <%= t 'user.account.contributor terms.agreed' %>
-        (<a href="<%= t 'user.account.contributor terms.link' %>" target="_new"><%= t 'user.account.contributor terms.link text' %></a>)
-        <% if @user.consider_pd? %>
-          <%= t 'user.account.contributor terms.agreed_with_pd' %>
+  <fieldset class="form-divider">
+    <div class="form-row">
+      <label class="standard-label"><%= t 'user.account.public editing.heading' %></label>
+      <span class="form-help deemphasize">
+        <% if @user.data_public? %>
+          <%= t 'user.account.public editing.enabled' %>
+          (<a href="<%= t 'user.account.public editing.enabled link' %>" target="_new"><%= t 'user.account.public editing.enabled link text' %></a>)
+        <% else %>
+          <%= t 'user.account.public editing.disabled' %>
+          (<a href="#public"><%= t 'user.account.public editing.disabled link text' %></a>)
         <% end %>
-      <% else %>
-        <%= t 'user.account.contributor terms.not yet agreed' %>
-        <%= link_to t('user.account.contributor terms.review link text'), :controller => 'user', :action => 'terms' %>
-      <% end %>
-    </p>
-  </fieldset>
+      </span>
+    </div>
 
-  <fieldset class="form-row">
-    <label class="standard-label"><%= t 'user.account.profile description' %></label>
-    <%= richtext_area :user, :description, :rows => '15', :cols => '80' %>
+    <div class="form-row">
+      <label class="standard-label"><%= t 'user.account.contributor terms.heading' %></label>
+      <span class="form-help deemphasize">
+        <% if @user.terms_agreed? %>
+          <%= t 'user.account.contributor terms.agreed' %>
+          (<a href="<%= t 'user.account.contributor terms.link' %>" target="_new"><%= t 'user.account.contributor terms.link text' %></a>)
+          <% if @user.consider_pd? %>
+            <%= t 'user.account.contributor terms.agreed_with_pd' %>
+          <% end %>
+        <% else %>
+          <%= t 'user.account.contributor terms.not yet agreed' %>
+          <%= link_to t('user.account.contributor terms.review link text'), :controller => 'user', :action => 'terms' %>
+        <% end %>
+      </span>
+    </div>
+    <div class="form-row">
+      <label class="standard-label"><%= t 'user.account.preferred editor' %></label>
+      <%= f.select :preferred_editor, [[t("editor.default", :name => t("editor.#{DEFAULT_EDITOR}.name")), 'default']] + Editors::ALL_EDITORS.collect { |e| [t("editor.#{e}.description"), e] } %>
+    </div>
   </fieldset>
 
-  <fieldset class="form-row">
-    <label class="standard-label"><%= t 'user.account.preferred languages' %></label>
-    <%= f.text_field :languages %>
-  </fieldset>
+  <fieldset class="form-divider">
+    <div class='form-row'>
+      <label class="standard-label"><%= t 'user.account.profile description' %></label>
+      <%= richtext_area :user, :description %>
+    </div>
 
-  <fieldset class="form-row">
-    <label class="standard-label"><%= t 'user.account.preferred editor' %></label>
-    <%= f.select :preferred_editor, [[t("editor.default", :name => t("editor.#{DEFAULT_EDITOR}.name")), 'default']] + Editors::ALL_EDITORS.collect { |e| [t("editor.#{e}.description"), e] } %>
-  </fieldset>
+    <div class="form-row">
+      <label class="standard-label"><%= t 'user.account.preferred languages' %></label>
+      <%= f.text_field :languages %>
+    </div>
 
-  <fieldset class="form-row">
-    <label class="standard-label"><%= t 'user.account.image' %></label>
-    <div class="accountImage">
-      <%= user_image @user %>
-      <fieldset class="accountImage-options">
+    <div class='form-row accountImage'>
+      <label class="standard-label"><%= t 'user.account.image' %></label>
+        <%= user_image @user %>
+        <ul class='form-list accountImage-options'>
         <% if @user.image.file? %>
-        <div class="form-row">
+        <li>
           <%= radio_button_tag "image_action", "keep", !@user.image_use_gravatar %>
-          <%= t 'user.account.keep image' %>
-        </div>
+          <label class='standard-label' for='image_action_keep'><%= t 'user.account.keep image' %></label>
+        </li>
         <% end %>
         <% if @user.image.file? || @user.image_use_gravatar? %>
-        <div class="form-row">
+        <li>
           <%= radio_button_tag "image_action", "delete" %>
-          <%= t 'user.account.delete image' %>
-        </div>
+          <label class='standard-label' for='image_action_delete'><%= t 'user.account.delete image' %></label>
+        </li>
         <% end %>
         <% if @user.image.file? %>
-        <div>
-          <div class="form-row">
+          <li>
             <%= radio_button_tag "image_action", "new" %>
-            <%= t 'user.account.replace image' %>
-          </div>
-          <div class="form-row">
+            <label class='standard-label' for='image_action_new'>
+                <%= t 'user.account.replace image' %>
+                <span class="form-help deemphasize"><%= t 'user.account.image size hint' %></span>
+            </label>
             <%= f.file_field :image, :onchange => "$('#image_action_new').prop('checked', true)" %>
-            <p class="form-help deemphasize"><%= t 'user.account.image size hint' %></p>
-          </div>
-        </div>
+          </li>
         <% else %>
-        <div class="form-row">
+        <li>
           <%= radio_button_tag "image_action", "new" %>
-          <%= t 'user.account.new image' %>
-        </div>
-        <div class="form-row">
+          <label class='standard-label' for='image_action_new'>
+            <%= t 'user.account.new image' %>
+            <span class="form-help deemphasize"><%= t 'user.account.image size hint' %></span>
+          </label>
           <%= f.file_field :image, :onchange => "$('#image_action_new').prop('checked', true)" %>
-          <p class="form-help deemphasize"><%= t 'user.account.image size hint' %></p>
-        </div>
+        </li>
         <% end %>
-        <div class="form-row">
+        <li>
           <%= radio_button_tag "image_action", "gravatar", @user.image_use_gravatar %>
-          <%= t 'user.account.gravatar.gravatar' %>
-          <p class="form-help deemphasize">(<a href="<%= t 'user.account.gravatar.link' %>" target="_new"><%= t 'user.account.gravatar.link text' %></a>)</p>
-        </div>
-      </fieldset>
+          <label class='standard-label' for='image_action_gravatar'>
+            <%= t 'user.account.gravatar.gravatar' %>
+            <span class='form-help deemphasize'> (<a href="<%= t 'user.account.gravatar.link' %>" target="_new"><%= t 'user.account.gravatar.link text' %></a>)</span>
+          </label>
+        </li>
+      </ul>
     </div>
   </fieldset>
 
-<fieldset>
-  <p class="form-help"><%= t 'user.account.home location' %></p>
-  <div id="homerow" <% unless @user.home_lat and @user.home_lon %>class="nohome"<%end%> >
-    <p class="message form-help deemphasize"><%= t 'user.account.no home location' %></p>
-    <div class="location">
-      <label class="standard-label"><%= t 'user.account.latitude' %></label>
-      <%= f.text_field :home_lat, :id => "home_lat" %>
-      <label class="standard-label"><%= t 'user.account.longitude' %></label>
-      <%= f.text_field :home_lon, :id => "home_lon" %>
+  <fieldset class="form-divider">
+    <div class='form-row location clearfix'>
+    <label class="standard-label"><%= t 'user.account.home location' %></label>
+    <div id="homerow" <% unless @user.home_lat and @user.home_lon %>class="nohome"<%end%> >
+      <p class="message form-help deemphasize"><%= t 'user.account.no home location' %></p>
+        <div class='form-column'>
+          <label class="standard-label secondary"><%= t 'user.account.latitude' %></label>
+          <%= f.text_field :home_lat, :id => "home_lat" %>
+        </div>
+        <div class='form-column'>
+          <label class="standard-label secondary"><%= t 'user.account.longitude' %></label>
+          <%= f.text_field :home_lon, :id => "home_lon" %>
+        </div>
+      </div>
     </div>
-  </div>
 
-  <div class="form-row">
-    <p><%= t 'user.account.update home location on click' %> <input type="checkbox" value="1" <% unless @user.home_lat and @user.home_lon %> checked="checked" <% end %> id="updatehome" /> </p>
+    <div class="form-row">
+      <input type="checkbox" name="updatehome" value="1" <% unless @user.home_lat and @user.home_lon %> checked="checked" <% end %> id="updatehome" />
+      <label class="standard-label" for="updatehome"><%= t 'user.account.update home location on click' %></label>
+    </div>
     <% content_for :head do %>
       <%= javascript_include_tag "user" %>
     <% end %>
     <%= content_tag "div", "", :id => "map", :class => "content_map settings_map set_location" %>
-  </div>
-</fieldset>
+  </fieldset>
 
   <%= submit_tag t('user.account.save changes button') %>
 <% end %>
index d1efa8b2b0e0dae9818a51cb76f66c2a85580818..699c977b0d7d12a5fdac9ca17863da8f9e82bb09 100644 (file)
@@ -24,9 +24,9 @@
           </label>
           <%= password_field_tag "password", "", :tabindex => 2 %>
         </div>
-        <p class="form-help deemphasize">
+        <span class="form-help deemphasize">
           <%= link_to t('user.login.lost password link'), :controller => 'user', :action => 'lost_password' %>
-        </p>
+        </span>
       </fieldset>
 
       <fieldset>
@@ -37,7 +37,7 @@
         <%= submit_tag t('user.login.login_button'), :tabindex => 4 %>
       </fieldset>
 
-      <fieldset class='form-section'>
+      <fieldset class='form-divider'>
 
         <p class='standard-label'><%= t 'user.login.with openid' %></p>
 
index ab243cbfd7602c673e1ae36bccfae6aead1a136a..52abb33113e3837c6824a2c251556b953c97e5f1 100644 (file)
@@ -10,6 +10,7 @@
   <%= hidden_field_tag('referer', h(@referer)) unless @referer.nil? %>
 
   <div id="signupForm" class="standard-form">
+
     <fieldset>
       <div class="form-row">
         <label for="email" class="standard-label">
@@ -23,7 +24,7 @@
         </label>
         <%= email_field(:user, :email_confirmation, { :tabindex => 2 }) %>
       </div>
-    <p class="form-help deemphasize"><%= raw(t 'user.new.not displayed publicly') %></p>
+    <span class="form-help deemphasize"><%= raw(t 'user.new.not displayed publicly') %></span>
     </fieldset>
 
     <fieldset>
         </label>
         <%= text_field(:user, :display_name, { :tabindex => 3 }) %>
       </div>
-      <p class="form-help deemphasize"><%= t 'user.new.display name description' %></span>
+      <span class="form-help deemphasize"><%= t 'user.new.display name description' %></span>
     </fieldset>
 
-    <fieldset id="openid_field">
+    <fieldset class="form-divider" id="openid_field">
       <div class="form-row">
         <label for="openid_url" class="standard-label">
           <%= raw t 'user.new.openid', :logo => openid_logo %>
         </label>
         <%= url_field(:user, :openid_url, { :id => "openid_url", :tabindex => 4, :class => "openid_url" }) %>
       </div>
+      <span id="openid_note" class="deemphasize">
+        <%= t 'user.new.openid no password' %>
+      </span>
     </fieldset>
 
     <fieldset>
         </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 id="openid_prompt" class="form-row">
+      <%= link_to raw(t("user.new.use openid", :logo => openid_logo)), "#", :id => "openid_enable" %>
+    </div>
+
     <%= submit_tag t('user.new.continue'), :tabindex => 6 %>
   </div>
 <% end %>
@@ -74,7 +77,6 @@ function enableOpenID()
 {
   $("#openid_prompt").hide();
 
-  $("#openid_spacer").show();
   $("#openid_field").show();
   $("#openid_note").show();
 
@@ -85,7 +87,6 @@ function disableOpenID()
 {
   $("#openid_prompt").show();
 
-  $("#openid_spacer").hide();
   $("#openid_field").hide();
   $("#openid_note").hide();