update styles fixed; tweaks to white button mixins; add update to top of list; render updates upon save

cms/static/coffee/src/client_templates/course_info_update.html

@@ -16,13 +16,15 @@
 			<a href="#" class="cancel-button" name="<%= updateModel.cid %>">Cancel</a>
 		</div>
 	</form>
-	<h2>
-		<span class="calendar-icon"></span><span id="date-display"><%=
-			updateModel.get('date') %></span>
-	</h2>
-	<div class="update-contents"><%= updateModel.get('content') %></div>
-	<div class="row">
-		<a href="#" class="edit-button" name="<%- updateModel.cid %>">Edit</a>
-		<a href="#" class="delete-button" name="<%- updateModel.cid %>"">Delete</a>
+	<div class="preview">
+		<div class="post-actions">
+			<a href="#" class="edit-button" name="<%- updateModel.cid %>"><span class="edit-icon"></span>Edit</a>
+			<a href="#" class="delete-button" name="<%- updateModel.cid %>"><span class="delete-icon"></span>Delete</a>
+		</div>
+		<h2>
+			<span class="calendar-icon"></span><span id="date-display"><%=
+				updateModel.get('date') %></span>
+		</h2>
+		<div class="update-contents"><%= updateModel.get('content') %></div>
 	</div>
 </li>

cms/static/js/template_loader.js

@@ -5,7 +5,7 @@
 	if (typeof window.templateLoader == 'function') return;
 	
     var templateLoader = {
-      templateVersion: "0.0.3",
+      templateVersion: "0.0.4",
       templates: {},
       loadRemoteTemplate: function(templateName, filename, callback) {
         if (!this.templates[templateName]) {

cms/static/js/views/course_info_edit.js

@@ -35,7 +35,8 @@ CMS.Views.ClassInfoUpdateView = Backbone.View.extend({
         window.templateLoader.loadRemoteTemplate("course_info_update",
         	// TODO Where should the template reside? how to use the static.url to create the path?
             "/static/coffee/src/client_templates/course_info_update.html",
-            function (raw_template) { 
+            function (raw_template) {
+                console.log(raw_template);
         		self.template = _.template(raw_template);
         		self.render();
         }
@@ -63,16 +64,16 @@ CMS.Views.ClassInfoUpdateView = Backbone.View.extend({
         
         var newForm = this.template({ updateModel : newModel });
         var updateEle = this.$el.find("#course-update-list");
-        $(updateEle).append(newForm);
-        $(newForm).find(".new-update-form").show();
+        $(updateEle).prepend(newForm);
+        $(newForm).find(".new-update-form").slideDown(150);
     },
     
     onSave: function(event) {
         var targetModel = this.eventModel(event);
         targetModel.set({ date : this.dateEntry(event).val(), content : this.contentEntry(event).val() });
         // push change to display, hide the editor, submit the change
-        $(this.dateDisplay(event)).val(targetModel.get('date'));
-        $(this.contentDisplay(event)).val(targetModel.get('content'));
+        $(this.dateDisplay(event)).html(targetModel.get('date'));
+        $(this.contentDisplay(event)).html(targetModel.get('content'));
         $(this.editor(event)).hide();
         
         targetModel.save();
@@ -82,12 +83,12 @@ 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.dateEntry(event)).val(targetModel.get('date'));
-        $(this.contentEntry(event)).val(targetModel.get('content'));
+        $(this.dateEntry(event)).html(targetModel.get('date'));
+        $(this.contentEntry(event)).html(targetModel.get('content'));
     },
     
     onEdit: function(event) {
-        $(this.editor(event)).show();
+        $(this.editor(event)).slideDown(150);
     },
         
     onDelete: function(event) {

cms/static/sass/_cms_mixins.scss

@@ -48,18 +48,18 @@
 }
 
 @mixin white-button {
-  @include button;
-  border: 1px solid $darkGrey;
-  border-radius: 3px;
-  @include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
-  background-color: #dfe5eb;
-  @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
-  color: #778192;
+	@include button;
+	border: 1px solid $darkGrey;
+	border-radius: 3px;
+	@include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
+	background-color: #dfe5eb;
+	@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
+	color: #778192;
 
-  &:hover {
-    background-color: #f2f6f9;
-    color: #778192;
-  }
+	&:hover {
+		background-color: #f2f6f9;
+		color: #778192;
+	}
 }
 
 @mixin orange-button {

cms/static/sass/_course-info.scss

@@ -1,31 +1,28 @@
-body.updates {
-	h2 {
-		margin-bottom: 24px;
-		font-size: 22px;
-		font-weight: 300;
-	}
-}
-
 .course-updates {
 	padding: 30px 40px;
 
 	li {
-		padding: 24px 0 32px;
+		padding: 34px 0 42px;
 		border-top: 1px solid #cbd1db;
 	}
 
-	h3 {
+	h2 {
 		margin-bottom: 18px;
 		font-size: 14px;
 		font-weight: 700;
+		line-height: 30px;
 		color: #646464;
 		letter-spacing: 1px;
 		text-transform: uppercase;
 	}
 
-	.update-contents {
-		padding-left: 30px;
+	h3 {
+		margin: 34px 0 11px;
+		font-size: 16px;
+		font-weight: 700;
+	}
 
+	.update-contents {
 		p {
 			font-size: 14px;
 			line-height: 18px;
@@ -37,7 +34,7 @@ body.updates {
 	}
 
 	.new-update-button {
-		@include grey-button;
+		@include blue-button;
 		display: block;
 		text-align: center;
 		padding: 12px 0;
@@ -52,6 +49,25 @@ body.updates {
 			height: 180px;
 		}
 	}
+
+	.post-actions {
+		float: right;
+
+		.edit-button,
+		.delete-button{
+			float: left;
+			@include white-button;
+	    padding: 3px 10px 4px;
+	    margin-left: 7px;
+	    font-size: 12px;
+	    font-weight: 400;
+
+	    .edit-icon,
+	    .delete-icon {
+	      margin-right: 4px;
+	    }
+		}
+	}
 }
 
 .course-handouts {

cms/templates/course_info.html

@@ -3,6 +3,7 @@
 
 <!-- TODO decode course # from context_course into title -->
 <%block name="title">Course Info</%block>
+<%block name="bodyclass">course-info</%block>
 
 <%block name="jsextra">
   <script type="text/javascript" src="${static.url('js/template_loader.js')}"></script>
@@ -33,7 +34,7 @@
     <div class="inner-wrapper">
       <h1>Course Info</h1>
       <div class="main-column">
-        <article class="unit-body window" id="course-update-view">
+        <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>