I set out to do a quick and dirty typography overhaul to make things more consistent and a bit cleaner, but I kept running into things I didn't like, so this lead me down something of a rabbit hole of design tweaks to the OSM site. Goals here are to have better content hierarchy, better vertical rhythm, more consistent UI, cleaner markup with less tables, all while keeping the basics pretty much intact. There are a lot of things I didn't touch even though they need to be updated (lots of tables where stuff shouldn't be tables, mostly). Basic overview of changes: I added a new persistent header that helps segment pages. It's now a lot easier to know what you're looking at. The header has a page title, a description, plus a submenu of actions. There is now a pattern of 20px/10px margins and padding for more rhythm and breathing room throughout the site. I know there are other problems here or things I've missed - would love another set of eyes to look over this! I am still getting comfortable working on the site - it's my first time ever digging into a ruby or rails so I'm not familiar with the templating language yet.
152 lines
No EOL
6.7 KiB
Text
152 lines
No EOL
6.7 KiB
Text
<% content_for :heading do %>
|
|
<h2><%= t 'user.account.my settings' %></h2>
|
|
<ul class='secondary-actions clearfix'>
|
|
<li><%= link_to t('user.account.return to profile'), :controller => 'user', :action => 'view', :display_name => @user.display_name %></li>
|
|
<li><%= link_to t('user.view.oauth settings'), :controller => 'oauth_clients', :action => 'index' %></li>
|
|
</ul>
|
|
<% end %>
|
|
|
|
<%= error_messages_for 'user' %>
|
|
<%= form_for :user, :html => { :multipart => true } do |f| %>
|
|
<table id="accountForm">
|
|
<tr>
|
|
<td class="fieldName"><%= t 'user.new.display name' %></td>
|
|
<td><%= f.text_field :display_name %></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="fieldName" style="padding-bottom:0px;"><%= t 'user.account.current email address' %></td>
|
|
<td style="padding-bottom:0px;"><%= @user.email %> <span class="minorNote"><%= t 'user.account.email never displayed publicly' %></span></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="fieldName"><%= t 'user.account.new email address' %></td>
|
|
<td><%= f.email_field :new_email, {:size => 50, :maxlength => 255} %> <span class="minorNote"><%= t 'user.account.email never displayed publicly' %></span></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="fieldName" style="padding-bottom:0px;"><%= t 'user.new.password' %></td>
|
|
<td style="padding-bottom:0px;"><%= f.password_field :pass_crypt, {:value => '', :size => 30, :maxlength => 255, :autocomplete => :off} %></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="fieldName"><%= t 'user.new.confirm password' %></td>
|
|
<td><%= f.password_field :pass_crypt_confirmation, {:value => '', :size => 30, :maxlength => 255, :autocomplete => :off} %></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="fieldName" ><%= t 'user.account.openid.openid' %></td>
|
|
<td><%= f.url_field :openid_url, {:id => "openid_url", :class => "openid_url"} %> <span class="minorNote">(<a href="<%= t 'user.account.openid.link' %>" target="_new"><%= t 'user.account.openid.link text' %></a>)</span></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="fieldName"><%= t 'user.account.public editing.heading' %></td>
|
|
<td>
|
|
<% if @user.data_public? %>
|
|
<%= t 'user.account.public editing.enabled' %> <span class="minorNote">(<a href="<%= t 'user.account.public editing.enabled link' %>" target="_new"><%= t 'user.account.public editing.enabled link text' %></a>)</span>
|
|
<% else %>
|
|
<%= t 'user.account.public editing.disabled' %> <span class="minorNote">(<a href="#public"><%= t 'user.account.public editing.disabled link text' %></a>)</span>
|
|
<% end %>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="fieldName"><%= t 'user.account.contributor terms.heading' %></td>
|
|
<td>
|
|
<% if @user.terms_agreed? %>
|
|
<%= t 'user.account.contributor terms.agreed' %>
|
|
<span class="minorNote">(<a href="<%= t 'user.account.contributor terms.link' %>" target="_new"><%= t 'user.account.contributor terms.link text' %></a>)</span>
|
|
<br />
|
|
<% if @user.consider_pd? %>
|
|
<%= t 'user.account.contributor terms.agreed_with_pd' %>
|
|
<% end %>
|
|
<% else %>
|
|
<%= t 'user.account.contributor terms.not yet agreed' %> <br />
|
|
|
|
<%= link_to t('user.account.contributor terms.review link text'), :controller => 'user', :action => 'terms' %>
|
|
<% end %>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="fieldName"><%= t 'user.account.profile description' %></td>
|
|
<td><%= richtext_area :user, :description, :rows => '15', :cols => '80' %></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="fieldName"><%= t 'user.account.preferred languages' %></td>
|
|
<td><%= f.text_field :languages %></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="fieldName"><%= t 'user.account.preferred editor' %></td>
|
|
<td><%= f.select :preferred_editor, [[t("editor.default", :name => t("editor.#{DEFAULT_EDITOR}.name")), 'default']] + Editors::ALL_EDITORS.collect { |e| [t("editor.#{e}.description"), e] } %></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="fieldName">
|
|
<%= t 'user.account.image' %>
|
|
</td>
|
|
<td class="accountImage">
|
|
<%= user_image @user %>
|
|
<table class="accountImage-options">
|
|
<% if @user.image.file? %>
|
|
<tr>
|
|
<td><%= radio_button_tag "image_action", "keep", !@user.image_use_gravatar %></td>
|
|
<td><%= t 'user.account.keep image' %></td>
|
|
</tr>
|
|
<% end %>
|
|
<% if @user.image.file? || @user.image_use_gravatar? %>
|
|
<tr>
|
|
<td><%= radio_button_tag "image_action", "delete" %></td>
|
|
<td><%= t 'user.account.delete image' %></td>
|
|
</tr>
|
|
<% end %>
|
|
<% if @user.image.file? %>
|
|
<tr>
|
|
<td><%= radio_button_tag "image_action", "new" %></td>
|
|
<td><%= t 'user.account.replace image' %><br /><%= f.file_field :image, :onchange => "$('#image_action_new').prop('checked', true)" %><br /><span class="minorNote"><%= t 'user.account.image size hint' %></span></td>
|
|
</tr>
|
|
<% else %>
|
|
<tr>
|
|
<td><%= radio_button_tag "image_action", "new" %></td>
|
|
<td><%= t 'user.account.new image' %><br /><%= f.file_field :image, :onchange => "$('#image_action_new').prop('checked', true)" %><br /><span class="minorNote"><%= t 'user.account.image size hint' %></span></td>
|
|
</tr>
|
|
<% end %>
|
|
<tr>
|
|
<td><%= radio_button_tag "image_action", "gravatar", @user.image_use_gravatar %></td>
|
|
<td><%= t 'user.account.gravatar.gravatar' %> <span class="minorNote">(<a href="<%= t 'user.account.gravatar.link' %>" target="_new"><%= t 'user.account.gravatar.link text' %></a>)</span></td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="homerow" <% unless @user.home_lat and @user.home_lon %> class="nohome" <%end%> >
|
|
<td class="fieldName"><%= t 'user.account.home location' %></td>
|
|
<td><em class="message"><%= t 'user.account.no home location' %></em><span class="location"><%= t 'user.account.latitude' %> <%= f.text_field :home_lat, :size => 20, :id => "home_lat" %> <%= t 'user.account.longitude' %><%= f.text_field :home_lon, :size => 20, :id => "home_lon" %></span></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td></td>
|
|
<td>
|
|
<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>
|
|
<% content_for :head do %>
|
|
<%= javascript_include_tag "user" %>
|
|
<% end %>
|
|
<%= content_tag "div", "", :id => "map", :class => "content_map settings_map set_location" %>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td></td>
|
|
<td class="submitButton"><%= submit_tag t('user.account.save changes button') %></td>
|
|
</tr>
|
|
</table>
|
|
<% end %>
|
|
|
|
<% unless @user.data_public? %>
|
|
<a name="public"></a>
|
|
<h2><%= t 'user.account.public editing note.heading' %></h2>
|
|
<%= raw t 'user.account.public editing note.text' %>
|
|
<%= button_to t('user.account.make edits public button'), :action => :go_public %>
|
|
<% end %> |