new styles for the handouts sidebar

cms/static/js/views/course_info_edit.js

@@ -80,6 +80,7 @@ CMS.Views.ClassInfoUpdateView = Backbone.View.extend({
     
     onSave: function(event) {
         var targetModel = this.eventModel(event);
+        console.log(this.contentEntry(event).val());
         targetModel.set({ date : this.dateEntry(event).val(), content : this.contentEntry(event).val() });
         // push change to display, hide the editor, submit the change        
         this.closeEditor(this);

cms/static/sass/_course-info.scss

@@ -1,5 +1,27 @@
+.course-info {
+	h2 {
+		margin-bottom: 24px;
+		font-size: 22px;
+		font-weight: 300;
+	}
+
+	.course-info-wrapper {
+		display: table;
+		width: 100%;
+	}
+
+	.main-column,
+	.course-handouts {
+		float: none;
+		display: table-cell;
+	}
+}
+
 .course-updates {
 	padding: 30px 40px;
+	margin: 0;
+	border-radius: 3px 0 0 3px;
+	border-right-color: $mediumGrey;
 
 	.update-list > li {
 		padding: 34px 0 42px;
@@ -17,38 +39,44 @@
 				display: none;
 			}
 		}
-	}
 
-	h1 {
-		float: none;
-		font-size: 24px;
-		font-weight: 300;
-	}
+		h1 {
+			float: none;
+			font-size: 24px;
+			font-weight: 300;
+		}
 
-	h2 {
-		margin-bottom: 18px;
-		font-size: 14px;
-		font-weight: 700;
-		line-height: 30px;
-		color: #646464;
-		letter-spacing: 1px;
-		text-transform: uppercase;
-	}
+		h2 {
+			margin-bottom: 18px;
+			font-size: 14px;
+			font-weight: 700;
+			line-height: 30px;
+			color: #646464;
+			letter-spacing: 1px;
+			text-transform: uppercase;
+		}
 
-	h3 {
-		margin: 34px 0 11px;
-		font-size: 16px;
-		font-weight: 700;
+		h3 {
+			margin: 34px 0 11px;
+			font-size: 16px;
+			font-weight: 700;
+		}
 	}
 
 	.update-contents {
 		p {
-			font-size: 14px;
-			line-height: 18px;
+			font-size: 16px;
+			line-height: 25px;
 		}
 
 		p + p {
-			margin-top: 18px;
+			margin-top: 25px;
+		}
+
+		.primary {
+			border: 1px solid #ddd;
+			background: #f6f6f6;
+			padding: 20px;
 		}
 	}
 
@@ -92,7 +120,17 @@
 }
 
 .course-handouts {
-	padding: 15px 20px;
+	width: 30%;
+	padding: 20px 25px;
+	margin: 0;
+	border-radius: 0 3px 3px 0;
+	border-left: none;
+	background: $lightGrey;
+
+	h2 {
+		font-size: 18px;
+		font-weight: 700;
+	}
 
 	.new-handout-button {
 		@include grey-button;

cms/templates/course_info.html

@@ -37,15 +37,19 @@
   <div class="main-wrapper">
     <div class="inner-wrapper">
       <h1>Course Info</h1>
-      <div class="main-column">
-        <article class="course-updates window" id="course-update-view">
-          <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 -->
-        </article>
-      </div>
-      <div class="sidebar window">
-        handouts go here
+      <div class="course-info-wrapper">
+        <div class="main-column">
+          <article class="course-updates window" id="course-update-view">
+            <h2>Course Updates & News</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 -->
+          </article>
+        </div>
+        <div class="sidebar window course-handouts">
+          <h2>Course Handouts</h2>
+          <a href="#" class="new-update-button">New Handout</a>
+        </div>
       </div>
     </div>
   </div>