grading - finalized style/states for grading UI on courseware overview

cms/static/sass/_courseware.scss

@@ -66,13 +66,13 @@ input.courseware-unit-search-input {
 		min-height: 75px;
 		@include clearfix();
 
-		.item-details, .section-published-date, .gradable-status {
-			float: left;
+		.item-details, .section-published-date {
+			display: inline-block;
 		}
 
 		.item-details {
 			padding: 20px 0 10px 0;
-			width: 800px;
+			@include clearfix();
 
 			.section-name {
 				float: left;
@@ -110,6 +110,7 @@ input.courseware-unit-search-input {
 			}
 
 			.section-published-date {
+				float: left;
 				width: 265px;
 				margin-right: 10px;
 				padding: 4px 10px;
@@ -139,10 +140,12 @@ input.courseware-unit-search-input {
 					padding: 3px 15px 5px;
 				}
 			}
+		}
 
 		.gradable-status {
-				position: relative;
-				top: 1px;
+			position: absolute;
+			top: 20px;
+			right: 70px;
 			width: 145px;
 
 			.status-label {
@@ -150,7 +153,7 @@ input.courseware-unit-search-input {
 				top: 0;
 				right: 2px;
 				display: none;
-					width: 100px;
+				width: 105px;
 				padding: 10px 20px 10px 10px;
 				@include border-radius(3px);
 				background: $lightGrey;
@@ -241,7 +244,6 @@ input.courseware-unit-search-input {
 				}
 			}
 		}
-		}
 
 		.item-actions {	
 			margin-top: 21px;
@@ -324,20 +326,20 @@ input.courseware-unit-search-input {
 				}
 
 				.gradable-status {
-					float: left;
+					float: right;
 					position: relative;
 					top: -4px;
+					right: 50px;
 					width: 145px;
 
 					.status-label {
 						position: absolute;
-						top: 0;
-						right: 2px;
+						top: 2px;
+						right: -5px;
 						display: none;
-						width: 100px;
-						padding: 10px 20px 10px 10px;
+						width: 110px;
+						padding: 5px 20px 5px 10px;
 						@include border-radius(3px);
-						background: $lightGrey;
 						color: $lightGrey;
 						font-size: 12px;
 						font-weight: bold;
@@ -392,6 +394,7 @@ input.courseware-unit-search-input {
 						}
 
 						a {
+							color: $blue;
 
 							&.is-selected {
 								font-weight: bold;

cms/templates/overview.html

@@ -169,6 +169,7 @@
                   <a href="#" class="edit-button" data-date="${start_date_str}" data-time="${start_time_str}" data-id="${section.location}">Edit</a>
                 %endif
               </div>              
+            </div>
             
             <div class="gradable-status">
               <h4 class="status-label">Not Graded</h4>
@@ -186,7 +187,6 @@
                 <li><a class="gradable-status-notgraded" href="#">Not Graded</a></li>
               </ul>
             </div>
-            </div>
             
             <div class="item-actions">
               <a href="#" data-tooltip="Delete this section" class="delete-button delete-section-button"><span class="delete-icon"></span></a>