aspects can be created/destroyed via ajax on getting_started#2

app/views/users/getting_started/1.html.haml

@@ -3,18 +3,19 @@
 -#   the COPYRIGHT file.
 
 
-.span-8.append-1.last
-  %h1{:style => "text-align:right;"}
-    = "Welcome!"
+.span-8.append-1.last{:style => "text-align:right;"}
+  %h1
+    = "Welcome to Diaspora!"
     .description
       Do the stuff below to further complete some things.
 
-  %h3{:style => "text-align:right;"}
+  %h3
     = link_to "Edit your profile", getting_started_path(1)
     %br
     = link_to "Define your aspects", getting_started_path(2)
     %br
     = link_to "Find your friends", getting_started_path(3)
+    %br
 
 .span-15.last
   = render 'users/profile'

app/views/users/getting_started/2.html.haml

@@ -3,34 +3,52 @@
 -#   the COPYRIGHT file.
 
 
-.span-8.append-1.last
-  %h1{:style => "text-align:right;"}
-    = "Welcome!"
+- content_for :head do
+  :javascript
+    $("#new_aspect").live("submit", function(){
+      var newAspectName = $(this).children("#aspect_name").val();
+      $("ul.aspects").prepend($("<li>" + newAspectName + "</li>").fadeIn(200));
+      $("#aspect_nav").find("ul").first().find("li:last").before($("<li><a href='#'>" + newAspectName + "</a></li>").fadeIn(200));
+    });
+
+    $(".aspects li").find(".delete").live("click", function(){
+      var aspectElement = $(this).parent("li");
+      aspectElement.fadeOut(300, function(){aspectElement.remove();});
+    });
+
+.span-8.append-1.last{:style => "text-align:right;"}
+  %h1
+    = "Welcome to Diaspora!"
     .description
       Do the stuff below to further complete some things.
 
-  %h3{:style => "text-align:right;"}
+  %h3
     = link_to "Edit your profile", getting_started_path(1)
     %br
     = link_to "Define your aspects", getting_started_path(2)
     %br
     = link_to "Find your friends", getting_started_path(3)
+    %br
 
 .span-15.last
   %h3
     Your aspects
-    .description
-      These will be blah blah blah blah and some stuff.
+  %p
+    Diaspora aspects are mappings of your real-life aspects.
 
   %h4
     Aspect name
-    = text_field_tag :aspect_name, nil, :placeholder => "New aspect"
+  - form_for Aspect.new, :remote => true do |aspect|
+    = aspect.text_field :name
+    = aspect.submit "Add"
 
   %ul.aspects
     - for aspect in @aspects
-      %li
+      %li{:style=>"position:relative;"}
         = aspect
         .friend_pictures.horizontal
-          - for friend in @friends
+          - for friend in aspect.people
             = person_image_link(friend)
 
+        = link_to "x", aspect_path(aspect), :confirm => "are you sure?", :method => :delete, :remote => true, :class => "delete right"
+

public/stylesheets/sass/application.sass

@@ -1130,6 +1130,8 @@ h1,h2,h3,h4
       :size 70%
       :weight 100
     :color #ccc
+    :margin
+      :top 0.5em
     
 h2,h3,h4
   .description
@@ -1264,7 +1266,30 @@ ul.aspects
     :size 24px
 
   > li
-    :padding 12px 0
+    :padding 12px
     :border
       :bottom 1px solid #eee
 
+    &:hover
+      :background
+        :color #fafafa
+      
+
+  .right
+    :top 12px
+    :right 12px
+
+  .delete
+    :background
+      :color #eee
+    :width 20px
+    :height 20px
+
+    :-webkit-border-radius 10px
+
+    :line-height 16px 
+    :text-indent 6px
+    :font-size 16px
+
+.inline
+  :display inline