Fix user order:

- gender color
 - add cancel button for input

app/assets/stylesheets/lib/main-list.css

@@ -39,6 +39,13 @@
 .main-list td {
   background-color: #FFFFFF;
 }
+.main-list td input[type="text"] {
+  margin-bottom: 0;
+  margin-left: -.4em;
+  margin-right: 3px;
+  padding: 0 .3em;
+  width: 4em;
+}
 .main-list td.action {
   vertical-align: middle;
   text-align: right;

app/views/admin/users_new_interface/edit_order.html.erb

@@ -1,13 +1,16 @@
 <% content_for :side_bar do %>
   <%= render :partial => 'admin/users_new_interface/side_bar' %>
 <% end %>
+<% content_for :page_specific_css do -%>
+  <%= stylesheet_link_tag "lib/member" %>
+<% end -%>
 
 <div id="list-view">
   <table id="member-list" class="table main-list">
     <thead>
       <tr class="sort-header">
         <th class="gender"></th>
-        <th class="span3"><a href="#"><%= t(:position) %></a></th>
+        <th class="span2"><a href="#"><%= t(:position) %></a></th>
         <th class="span4"><a href="#"><%= t(:name) %></a></th>
         <th><a href="#"><%= t(:email) %></a></th>
       </tr>
@@ -30,10 +33,16 @@
       var _userPosition = [];
       $('#member-list').on(clickEvent, '.edit_position', function(e){
         var $input = $('<input type="text">');
+        var $cross = $('<a class="btn btn-mini"><i class="icons-cross"/></a>');
+        $(this).after($cross);
         $(this).after($input);
         $(this).hide();
         $input.val($(this).text()).attr('id', $(this).data('user-id'));
         e.preventDefault();
+        $cross.click(function(event) {
+          $input.remove();
+          $(this).siblings('a').show().end().remove();
+        });
       });
 
       $('.bottomnav').on(clickEvent, '.btn', function(e) {