Improve the user image selection UI
authorTom Hughes <tom@compton.nu>
Wed, 17 Oct 2012 12:05:05 +0000 (13:05 +0100)
committerTom Hughes <tom@compton.nu>
Thu, 18 Oct 2012 17:59:39 +0000 (18:59 +0100)
app/assets/stylesheets/common.css.scss
app/views/user/account.html.erb

index bc56011..a1099a1 100644 (file)
@@ -928,8 +928,19 @@ p#contributorGuidance {
   border: 1px solid #ccc;
 }
 
-#accountImage td {
-  padding-bottom: 0px;
+#accountForm td.accountImage {
+  img {
+    vertical-align: top;
+    margin-top: 3px;
+  }
+
+  table {
+    display: inline-block;
+
+    td {
+      padding-bottom: 0px;
+    }
+  }
 }
 
 .nohome .location {
index 7adea7c..179e1b2 100644 (file)
     <td class="fieldName">
       <%= t 'user.account.image' %>
     </td>
-    <td valign="top">
-      <table id="accountImage">
+    <td class="accountImage">
+      <%= user_image @user %>
+      <table>
         <% if @user.image.file? %>
         <tr>
-          <td rowspan="4" valign="top"><%= user_image @user %></td>
           <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>
+          <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 rowspan="2" valign="top"><%= user_image @user %></td>
-          <td><%= radio_button_tag "image_action", "new", !@user.image_use_gravatar %></td>
-          <td><%= t 'user.account.new image' %> <%= f.file_field :image %><br /><span class="minorNote"><%= t 'user.account.image size hint' %></span></td>
+          <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>