wrapped up data syncing and date format issues

cms/static/js/models/course_info.js

@@ -15,7 +15,7 @@ CMS.Models.CourseInfo = Backbone.Model.extend({
 // course update -- biggest kludge here is the lack of a real id to map updates to originals
 CMS.Models.CourseUpdate = Backbone.Model.extend({
 	defaults: {
-		"date" : $.datepicker.formatDate('MM d', new Date()),
+		"date" : $.datepicker.formatDate('MM d, yy', new Date()),
 		"content" : ""
 	}
 });

cms/static/js/views/course_info_edit.js

@@ -67,10 +67,11 @@ CMS.Views.ClassInfoUpdateView = Backbone.View.extend({
         var updateEle = this.$el.find("#course-update-list");
         $(updateEle).prepend($newForm);
         $newForm.addClass('editing');
+        this.$currentPost = $newForm.closest('li');
 
         $modalCover.show();
         $modalCover.bind('click', function() {
-            self.closeEditor(self);
+            self.closeEditor(self, true);
         });
 
         $('.date').datepicker('destroy');
@@ -89,7 +90,7 @@ CMS.Views.ClassInfoUpdateView = Backbone.View.extend({
         // change editor contents back to model values and hide the editor
         $(this.editor(event)).hide();
         var targetModel = this.eventModel(event);
-        this.closeEditor(this);
+        this.closeEditor(this, !targetModel.id);
     },
     
     onEdit: function(event) {
@@ -116,13 +117,21 @@ CMS.Views.ClassInfoUpdateView = Backbone.View.extend({
         });
     },
 
-    closeEditor: function(self) {
+    closeEditor: function(self, removePost) {
         var targetModel = self.collection.getByCid(self.$currentPost.attr('name'));
 
+        if(removePost) {
+            self.$currentPost.remove();
+        }
+
+        // close the modal and insert the appropriate data
         self.$currentPost.removeClass('editing');
         self.$currentPost.find('.date-display').html(targetModel.get('date'));
+        self.$currentPost.find('.date').val(targetModel.get('date'));
         self.$currentPost.find('.update-contents').html(targetModel.get('content'));
+        self.$currentPost.find('.new-update-content').val(targetModel.get('content'));
         self.$currentPost.find('form').hide();
+        $modalCover.unbind('click');
         $modalCover.hide();
     },
     

cms/static/sass/_course-info.scss

@@ -1,9 +1,9 @@
 .course-updates {
 	padding: 30px 40px;
 
-	li {
+	.update-list > li {
 		padding: 34px 0 42px;
-		border-top: 1px solid #cbd1db;		
+		border-top: 1px solid #cbd1db;
 
 		&.editing {
 			position: relative;
@@ -19,6 +19,12 @@
 		}
 	}
 
+	h1 {
+		float: none;
+		font-size: 24px;
+		font-weight: 300;
+	}
+
 	h2 {
 		margin-bottom: 18px;
 		font-size: 14px;
@@ -50,13 +56,14 @@
 		@include blue-button;
 		display: block;
 		text-align: center;
-		padding: 12px 0;
+		padding: 18px 0;
 		margin-bottom: 28px;
 	}
 
 	.new-update-form {
 		@include edit-box;
 		margin-bottom: 24px;
+		padding: 30px;
 		border: none;
 
 		textarea {

cms/templates/course_info.html

@@ -39,7 +39,6 @@
       <h1>Course Info</h1>
       <div class="main-column">
         <article class="course-updates window" id="course-update-view">
-          <h2>Updates</h2>
           <a href="#" class="new-update-button">New Update</a>
           <ol class="update-list" id="course-update-list"></ol>
           <!-- probably replace w/ a vertical where each element of the vertical is a separate update w/ a date and html field -->