Make the account image form less ugly

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index f6d3fa68b98ff10c229fdebabcd2d4332c42f3aa..56c32d9e7cc1468930dd11c949175ebd081de8e6 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -1295,9 +1295,8 @@ ul.results-list li { border-bottom: 1px solid #ccc; }
   border: 1px solid #ccc;
 }
 
-.accountImage-options {
-  width: 50%;
-  display: inline-block;
+.accountImage-options p {
+  margin-bottom: 0px;
 }
 
 .nohome .location {

diff --git a/app/views/user/account.html.erb b/app/views/user/account.html.erb
index a4dbf81a3ea301b75fddf1df27ebf9adb95631b1..759502706450513d90c0163cb98a360cbc3ffe44 100644 (file)
--- a/app/views/user/account.html.erb
+++ b/app/views/user/account.html.erb
@@ -89,35 +89,46 @@
     <label><%= t 'user.account.image' %></label>
     <div class="accountImage">
       <%= user_image @user %>
-      <table class="accountImage-options">
+      <fieldset class="accountImage-options">
         <% if @user.image.file? %>
-        <fieldset class="form-row">
+        <div class="form-row">
           <%= radio_button_tag "image_action", "keep", !@user.image_use_gravatar %>
           <%= t 'user.account.keep image' %>
-        </fieldset>
+        </div>
         <% end %>
         <% if @user.image.file? || @user.image_use_gravatar? %>
-        <fieldset class="form-row">
+        <div class="form-row">
           <%= radio_button_tag "image_action", "delete" %>
           <%= t 'user.account.delete image' %>
-        </fieldset>
+        </div>
         <% end %>
         <% if @user.image.file? %>
-        <fieldset class="form-row">
-          <%= radio_button_tag "image_action", "new" %>
-          <%= t 'user.account.replace image' %><br /><%= f.file_field :image, :onchange => "$('#image_action_new').prop('checked', true)" %><br /><span class="form-help deemphasize"><%= t 'user.account.image size hint' %></span>
-        </fieldset>
+        <div>
+          <div class="form-row">
+            <%= radio_button_tag "image_action", "new" %>
+            <%= t 'user.account.replace image' %>
+          </div>
+          <div class="form-row">
+            <%= 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>
         <% else %>
-        <fieldset class="form-row">
+        <div class="form-row">
           <%= radio_button_tag "image_action", "new" %>
-          <%= t 'user.account.new image' %><br /><%= f.file_field :image, :onchange => "$('#image_action_new').prop('checked', true)" %><br /><span class="form-help deemphasize"><%= t 'user.account.image size hint' %></span>
-        </fieldset>
+          <%= t 'user.account.new image' %>
+        </div>
+        <div class="form-row">
+          <%= f.file_field :image, :onchange => "$('#image_action_new').prop('checked', true)" %>
+          <p class="form-help deemphasize"><%= t 'user.account.image size hint' %></p>
+        </div>
         <% end %>
-        <fieldset class="form-row">
+        <div class="form-row">
           <%= radio_button_tag "image_action", "gravatar", @user.image_use_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>
-        </fieldset>
-      </table>
+          <%= 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>
     </div>
   </fieldset>