Port aspect edit pane to Bootstrap

app/assets/javascripts/aspect-edit-pane.js

@@ -41,8 +41,8 @@ app.tmp || (app.tmp = {});
 
 // on the contacts page, viewing the facebox for single aspect
 app.tmp.ContactAspectsBox = function() {
-  $('body').on('click', '#aspect_edit_pane a.add.button', _.bind(this.addToAspect, this));
-  $('body').on('click', '#aspect_edit_pane a.added.button', _.bind(this.removeFromAspect, this));
+  $('body').on('click', '#aspect_edit_pane a.add.btn', _.bind(this.addToAspect, this));
+  $('body').on('click', '#aspect_edit_pane a.added.btn', _.bind(this.removeFromAspect, this));
 };
 _.extend(app.tmp.ContactAspectsBox.prototype, {
   addToAspect: function(evt) {

app/assets/stylesheets/aspects.css.scss

@@ -27,6 +27,12 @@ $bluebg: #e7f2f7;
   }
 }
 
+.btn {
+  &.delete {
+    color: desaturate($red,10%);
+  }
+}
+
 .modify_aspect {
   background: url("icons/pencil.png") no-repeat;
   width: 12px;
@@ -48,12 +54,6 @@ $bluebg: #e7f2f7;
     margin-right: 5px;
   }
 
-  .btn {
-    &.delete {
-      color: desaturate($red,10%);
-    }
-  }
-
   .button_to { display: inline-block; }
   
   .contact_visibility_padlock,
@@ -173,8 +173,13 @@ $bluebg: #e7f2f7;
     margin-bottom: 5px;
   }
 
+  #aspect_name_title {
+    margin: 0px 0px 5px 0px;
+  }
+
   #contact_list_search {
     width: 200px;
+    margin-bottom: 2px;
     margin-top: 0px;
     float: right;
   }
@@ -232,18 +237,28 @@ $bluebg: #e7f2f7;
         border: 1px solid $border-dark-grey;
 
         &.hidden { display: none; }
-        & > .name { white-space: nowrap; }
         &.remote_friend { width: 285px; }
 
-        a.button {
+        & > .name {
+          font-size: 16px;
+          margin: 0px 0px 5px 0px;
+          white-space: nowrap;
+        }
+
+        a.btn {
           @include box-shadow(0,0,0);
           border-bottom: none;
-          min-width: auto;
+          min-width: 90px;
           float: right;
-          padding: 2px 4px;
+          padding: 2px 0px;
           margin-top: 5px;
+          margin-right: -5px;
+
+          &.added {
+            @include linear-gradient(rgb(158,255,153), rgb(92,199,86));
+            background-color: rgb(92,199,86);
+          }
 
-          &.added { @include linear-gradient(rgb(158,255,153), rgb(92,199,86)); }
           &.added.remove {
             @include linear-gradient(rgb(255,153,153), rgb(199,86,86));
 
@@ -296,6 +311,7 @@ $bluebg: #e7f2f7;
   
     form {
       display: inline-block;
+      margin: 0px;
     }
     
     .creation {

app/helpers/aspects_helper.rb

@@ -12,7 +12,7 @@ module AspectsHelper
         :person_id => person_id
       },
       :method => 'post',
-      :class => 'add button',
+      :class => 'add btn',
       'data-aspect_id' => aspect_id,
       'data-person_id' => person_id
   end
@@ -24,7 +24,7 @@ module AspectsHelper
         :id => membership_id
       },
       :method => 'delete',
-      :class => 'added button',
+      :class => 'added btn',
       'data-membership_id' => membership_id,
       'data-aspect_id' => aspect_id,
       'data-person_id' => person_id

app/views/aspects/edit.html.haml

@@ -12,13 +12,13 @@
     #aspect_name_edit.hidden
       = form_for @aspect, :remote => true do |aspect|
         = aspect.text_field :name, :maxlength => 20
-        = aspect.submit t('.update'), 'data-disable-with' => t('.updating'), :class => 'button'
+        = aspect.submit t('.update'), 'data-disable-with' => t('.updating'), :class => 'btn'
 
   - if @contacts.count > 0
     = render 'shared/contact_list', :aspect => @aspect, :contacts => @contacts
 
   .bottom_submit_section
-    = button_to t('delete'), @aspect, :method => "delete", :data => { :confirm => t('.confirm_remove_aspect') }, :class => 'button delete'
+    = button_to t('delete'), @aspect, :method => "delete", :data => { :confirm => t('.confirm_remove_aspect') }, :class => 'btn delete'
     = aspect_visibility_link(@aspect)
-    = submit_tag t('.done'), :class => 'button creation', :rel => 'close'
+    = submit_tag t('.done'), :class => 'btn creation', :rel => 'close'
 

app/views/contacts/sharing.haml

@@ -27,4 +27,4 @@
 
   %br
   %div{:style => "text-align:right;"}
-    = link_to t('aspects.edit.done'), '#', :class => 'button', :rel => 'close'
+    = link_to t('aspects.edit.done'), '#', :class => 'btn', :rel => 'close'

app/views/shared/_contact_list.html.haml

@@ -14,6 +14,6 @@
         = person_image_tag contact.person
         %h4.name
           = link_to contact.person.name, contact.person
-        .right
+        .pull-right
           = aspect_membership_button(aspect, contact, contact.person)