assignments - rough in of addition state/proof of concept - wip

cms/static/js/base.js

@@ -597,7 +597,7 @@ function hideToastMessage(e) {
 function addNewSection(e) {
     e.preventDefault();
     var $newSection = $($('#new-section-template').html());
-    $('.new-courseware-section-button').after($newSection);
+    $('.new-courseware-element-nav').after($newSection);
     $newSection.find('.new-section-name').focus().select();
     $newSection.find('.new-section-name-save').bind('click', saveNewSection);
     $newSection.find('.new-section-name-cancel').bind('click', cancelNewSection);
@@ -606,7 +606,7 @@ function addNewSection(e) {
 function addNewAssignment(e) {
     e.preventDefault();
     var $newAssignment = $($('#new-assignment-template').html());
-    $('.new-courseware-assignment-button').after($newAssignment);
+    $('.new-courseware-element-nav').after($newAssignment);
     $newAssignment.find('.new-assignment-name').focus().select();
     $newAssignment.find('.new-assignment-name-save').bind('click', saveNewAssignment);
     $newAssignment.find('.new-assignment-name-cancel').bind('click', cancelNewAssignment);

cms/static/sass/_courseware.scss

@@ -5,15 +5,38 @@ input.courseware-unit-search-input {
 }
 
 .courseware-overview {
-	.new-courseware-section-button {
-		@include grey-button;
-		display: block;
-		text-align: center;
-		padding: 12px 0;
+	
+	.new-courseware-element-nav {
+		margin-bottom: 20px;
+		@include clearfix;
+
+		li {
+			float: left;
+			margin-right: 2%;
+			width: 49%;
+
+			&:last-child {
+				margin-right: 0;
+			}
+		}
+
+		.new-courseware-assignment-button {
+			@include grey-button;
+		}
+
+		.new-courseware-section-button {
+			@include grey-button;
+		}
+
+		.new-courseware-assignment-button, .new-courseware-section-button {
+			display: block;
+			text-align: center;
+			padding: 12px;
+		}
 	}
 }
 
-.courseware-section {
+.courseware-section, .courseware-assignment {
 	position: relative;
 	background: #fff;
 	border: 1px solid $darkGrey;
@@ -185,7 +208,7 @@ input.courseware-unit-search-input {
 		}
 	}
 
-	&.new-section {
+	&.new-section, &.new-assignment {
 		header {
 			height: auto;
 			@include clearfix;
@@ -194,6 +217,10 @@ input.courseware-unit-search-input {
 		.expand-collapse-icon {
 			visibility: hidden;
 		}
+
+		.item-details {
+			padding-top: 16px;
+		}
 	}
 }
 
@@ -217,6 +244,26 @@ input.courseware-unit-search-input {
 	color: #8891a1 !important;
 }
 
+.new-assignment-name,
+.new-subsection-assignment-name-input {
+	width: 515px;
+}
+
+.new-assignment-name-save,
+.new-subsection-assignment-name-save {
+	@include blue-button;
+	padding: 2px 20px 5px;
+	margin: 0 5px;
+	color: #fff !important;
+}
+
+.new-assignment-name-cancel,
+.new-subsection-assignment-name-cancel {
+	@include white-button;
+	padding: 2px 20px 5px;
+	color: #8891a1 !important;
+}
+
 .dummy-calendar {
 	display: none;
 	position: absolute;

cms/templates/overview.html

@@ -34,8 +34,12 @@
     <section class="courseware-assignment branch new-assignment">
       <header>
         <a href="#" class="expand-collapse-icon collapse"></a>
-        <div class="assignment-details">
-          <h3 class="assignment-name"><input type="text" value="New Assignment Name" class="new-section-name" /><a href="#" class="new-assignment-name-save" data-parent="${parent_location}" data-template="${new_section_template}">Save</a><a href="#" class="new-assignment-name-cancel">Cancel</a></h3>
+        <div class="item-details">
+          <h3 class="assignment-name">
+            <input type="text" value="New Assignment Name" class="new-section-name" />
+            <a href="#" class="new-assignment-name-save" data-parent="${parent_location}" data-template="${new_section_template}">Save</a>
+            <a href="#" class="new-assignment-name-cancel">Cancel</a>
+          </h3>
         </div>
       </header>
     </section>