Merge pull request #1157 from MITx/bug/btalbot/cms-editingui

Course Info and Settings Editor UI Bug Fixes

cms/static/js/views/course_info_edit.js

@@ -62,6 +62,7 @@ CMS.Views.ClassInfoUpdateView = Backbone.View.extend({
     },
     
     onNew: function(event) {
+        event.preventDefault();
         var self = this;
         // create new obj, insert into collection, and render this one ele overriding the hidden attr
         var newModel = new CMS.Models.CourseUpdate();
@@ -94,6 +95,7 @@ CMS.Views.ClassInfoUpdateView = Backbone.View.extend({
     },
     
     onSave: function(event) {
+        event.preventDefault();
         var targetModel = this.eventModel(event);
         targetModel.set({ date : this.dateEntry(event).val(), content : this.$codeMirror.getValue() });
         // push change to display, hide the editor, submit the change        
@@ -102,6 +104,7 @@ CMS.Views.ClassInfoUpdateView = Backbone.View.extend({
     },
     
     onCancel: function(event) {
+        event.preventDefault();
         // change editor contents back to model values and hide the editor
         $(this.editor(event)).hide();
         var targetModel = this.eventModel(event);
@@ -109,6 +112,7 @@ CMS.Views.ClassInfoUpdateView = Backbone.View.extend({
     },
     
     onEdit: function(event) {
+        event.preventDefault();
         var self = this;
         this.$currentPost = $(event.target).closest('li');
         this.$currentPost.addClass('editing');
@@ -131,6 +135,7 @@ CMS.Views.ClassInfoUpdateView = Backbone.View.extend({
     },
 
     onDelete: function(event) {
+        event.preventDefault();
         // TODO ask for confirmation
         // remove the dom element and delete the model
         var targetModel = this.eventModel(event);

cms/static/js/views/settings/main_settings_view.js

@@ -177,6 +177,7 @@ CMS.Views.Settings.Details = CMS.Views.ValidatingView.extend({
 		}
 		
 		this.$el.find(this.fieldToSelectorMap['overview']).val(this.model.get('overview'));
+		this.codeMirrorize(null, $('#course-overview')[0]);
 		
 		this.$el.find('.current-course-introduction-video iframe').attr('src', this.model.videosourceSample());
 		if (this.model.has('intro_video')) {
@@ -268,11 +269,18 @@ CMS.Views.Settings.Details = CMS.Views.ValidatingView.extend({
 		}
 	},
 	codeMirrors : {},
-	codeMirrorize : function(e) {
-		if (!this.codeMirrors[e.currentTarget.id]) {
+	codeMirrorize : function(e, forcedTarget) {
+		if (forcedTarget) {
+			thisTarget = forcedTarget;
+			thisTarget.id = $(thisTarget).attr('id');
+		} else {
+			thisTarget = e.currentTarget;
+		}
+
+		if (!this.codeMirrors[thisTarget.id]) {
 			var cachethis = this;
-			var field = this.selectorToField['#' + e.currentTarget.id];
-			this.codeMirrors[e.currentTarget.id] = CodeMirror.fromTextArea(e.currentTarget, {
+			var field = this.selectorToField['#' + thisTarget.id];
+			this.codeMirrors[thisTarget.id] = CodeMirror.fromTextArea(thisTarget, {
 				mode: "text/html", lineNumbers: true, lineWrapping: true,
 				onBlur : function(mirror) {
 					mirror.save();

cms/static/sass/_unit.scss

@@ -42,7 +42,7 @@
   }
 
   h2 {
-    margin: 30px 40px;
+    margin: 30px 40px 30px 0;
     color: #646464;
     font-size: 19px;
     font-weight: 300;
@@ -468,17 +468,21 @@
 body.unit {
 
   .component {
-      padding-top: 30px;
+    padding-top: 30px;
 
-      .component-actions {
-        @include box-sizing(border-box);
-        position: absolute;
-        width: 811px;
-        padding: 15px;
-        top: 0;
-        left: 0;
-        border-bottom: 1px solid $lightBluishGrey2;
-        background: $lightGrey;
-      }
+    .component-actions {
+      @include box-sizing(border-box);
+      position: absolute;
+      width: 811px;
+      padding: 15px;
+      top: 0;
+      left: 0;
+      border-bottom: 1px solid $lightBluishGrey2;
+      background: $lightGrey;
     }
+
+    &.editing {
+      padding-top: 0;
+    }
+  }
 }

cms/templates/settings.html

@@ -212,7 +212,7 @@ from contentstore import utils
                 <label for="course-overview">Course Overview:</label>
                 <div class="field">
                   <div class="input">
-                    <textarea class="long tall edit-box tinymce" id="course-overview"></textarea>
+                    <textarea class="long tall tinymce text-editor" id="course-overview"></textarea>
                     <span class="tip tip-stacked">Introductions, prerequisites, FAQs that are used on <a href="${utils.get_lms_link_for_item(context_course.location, True)}">your course summary page</a></span>
                   </div>
                 </div>