From edc32e9db5a008ec30507e6f886e7e9ce0ac5dd2 Mon Sep 17 00:00:00 2001
From: Tom Giannattasio <tom@mitx.mit.edu>
Date: Wed, 10 Oct 2012 15:45:04 -0400
Subject: [PATCH] tweaks to new component animations

---
 cms/static/coffee/src/views/unit.coffee | 10 ++++++----
 cms/static/sass/_unit.scss              |  3 +++
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/cms/static/coffee/src/views/unit.coffee b/cms/static/coffee/src/views/unit.coffee
index 53eb11d511..2b0f7668a2 100644
--- a/cms/static/coffee/src/views/unit.coffee
+++ b/cms/static/coffee/src/views/unit.coffee
@@ -65,24 +65,26 @@ class CMS.Views.UnitEdit extends Backbone.View
   showNewComponentForm: (event) =>
     event.preventDefault()
     @$newComponentItem.addClass('adding')
-    $(event.target).slideUp(150)
+    $(event.target).fadeOut(150)
+    @$newComponentItem.css('height', @$newComponentTypePicker.outerHeight())
     @$newComponentTypePicker.slideDown(250)
 
   showComponentTemplates: (event) =>
     event.preventDefault()
 
     type = $(event.currentTarget).data('type')
-    @$newComponentTypePicker.slideUp(250)
-    @$(".new-component-#{type}").slideDown(250)
+    @$newComponentTypePicker.fadeOut(250)
+    @$(".new-component-#{type}").fadeIn(250)
 
   closeNewComponent: (event) =>
     event.preventDefault()
 
     @$newComponentTypePicker.slideUp(250)
     @$newComponentTemplatePickers.slideUp(250)
-    @$newComponentButton.slideDown(250)
+    @$newComponentButton.fadeIn(250)
     @$newComponentItem.removeClass('adding')
     @$newComponentItem.find('.rendered-component').remove()
+    @$newComponentItem.css('height', @$newComponentButton.outerHeight())
 
   saveNewComponent: (event) =>
     event.preventDefault()
diff --git a/cms/static/sass/_unit.scss b/cms/static/sass/_unit.scss
index 265f70c6c5..91e5d52026 100644
--- a/cms/static/sass/_unit.scss
+++ b/cms/static/sass/_unit.scss
@@ -209,7 +209,10 @@
         .new-component,
         .new-component-templates {
           display: none;
+          position: absolute;
+          width: 100%;
           padding: 20px;
+          @include clearfix;
 
           .cancel-button {
             @include blue-button;