Studio: syncs up visual and semantic standards b/t create course and user forms

cms/static/js/base.js

@@ -597,11 +597,9 @@ function cancelNewSection(e) {
 
 function addNewCourse(e) {
     e.preventDefault();
-    $('.new-course-button').addClass('disabled');
-    $(e.target).addClass('disabled');
-    var $newCourse = $($('#new-course-template').html());
+    $('.new-course-button').addClass('is-disabled');
+    var $newCourse = $('.wrapper-create-course').addClass('is-shown');
     var $cancelButton = $newCourse.find('.new-course-cancel');
-    $('.courses').prepend($newCourse);
     $newCourse.find('.new-course-name').focus().select();
     $newCourse.find('form').bind('submit', saveNewCourse);
     $cancelButton.bind('click', cancelNewCourse);
@@ -613,11 +611,11 @@ function addNewCourse(e) {
 function saveNewCourse(e) {
     e.preventDefault();
 
-    var $newCourse = $(this).closest('.new-course');
-    var display_name = $newCourse.find('.new-course-name').val();
-    var org = $newCourse.find('.new-course-org').val();
-    var number = $newCourse.find('.new-course-number').val();
-    var run = $newCourse.find('.new-course-run').val();
+    var $newCourseForm = $(this).closest('#create-course-form');
+    var display_name = $newCourseForm.find('.new-course-name').val();
+    var org = $newCourseForm.find('.new-course-org').val();
+    var number = $newCourseForm.find('.new-course-number').val();
+    var run = $newCourseForm.find('.new-course-run').val();
 
     var required_field_text = gettext('Required field');
 
@@ -646,6 +644,7 @@ function saveNewCourse(e) {
 
     var setNewCourseErrMsgs = function(header_err_msg, display_name_errMsg, org_errMsg, number_errMsg, run_errMsg) {
         if (header_err_msg) {
+            $('.wrapper-create-course').addClass('has-errors');
             $('.wrap-error').addClass('is-shown');
             $('#course_creation_error').html('<p>' + header_err_msg + '</p>');
         } else {
@@ -701,8 +700,8 @@ function saveNewCourse(e) {
 
 function cancelNewCourse(e) {
     e.preventDefault();
-    $('.new-course-button').removeClass('disabled');
-    $(this).parents('section.new-course').remove();
+    $('.new-course-button').removeClass('is-disabled');
+    $('.wrapper-create-course').removeClass('is-shown');
 }
 
 function addNewSubsection(e) {

cms/static/sass/views/_dashboard.scss

@@ -358,20 +358,30 @@ body.dashboard {
 		}
 	}
 
-	.new-course {
-		@include clearfix();
-		padding: 0;
-		margin-top: $baseline;
-		border-radius: 3px;
-		border: 1px solid $gray;
-		background: $white;
-		box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
 
-    .title {
-      @extend .t-title4;
-      font-weight: 700;
-      margin-bottom: $baseline;
+  // ELEM: new user form
+  .wrapper-create-course {
+
+    // CASE: when form is animating
+    &.animate {
+
+      // STATE: shown
+      &.is-shown {
+        height: ($baseline*26);
+
+        // STATE: errors
+        &.has-errors {
+          height: ($baseline*33);
+        }
+      }
     }
+  }
+
+  // ====================
+
+  // course listings
+
+	.create-course {
 
 		.row {
 			@include clearfix();