assignments - wip

cms/static/sass/_cms_mixins.scss

@@ -256,3 +256,14 @@
 		}
 	}
 }
+
+@mixin sr-text {
+	border: 0; 
+	clip: rect(0 0 0 0); 
+	height: 1px; 
+	margin: -1px; 
+	overflow: hidden; 
+	padding: 0; 
+	position: absolute; 
+	width: 1px;
+}

cms/static/sass/_courseware.scss

@@ -35,54 +35,6 @@ input.courseware-unit-search-input {
 		margin-left: 10px;
 	}
 
-	.section-published-date {
-		position: absolute;
-		top: 19px;
-		right: 90px;
-		padding: 4px 10px;
-		border-radius: 3px;
-		background: $lightGrey;
-		text-align: right;
-
-		.published-status {
-			font-size: 12px;
-			margin-right: 15px;
-
-			strong {
-				font-weight: 700;
-			}
-		}
-
-		.schedule-button {
-			@include blue-button;
-		}
-
-		.edit-button {
-			@include blue-button;
-		}
-
-		.schedule-button,
-		.edit-button {
-			font-size: 11px;
-			padding: 3px 15px 5px;
-		}
-	}
-
-	.section-gradable-status {
-		position: absolute;
-		top: 25px;
-		right: 330px;
-
-		input[type=checkbox] {
-		   position: absolute;
-		   top: -9999px;
-		   left: -9999px;
-		}
-		label {
-		  cursor: pointer;
-		}
-	}
-
 	.datepair .date,
 	.datepair .time {
 		padding-left: 0;
@@ -91,7 +43,7 @@ input.courseware-unit-search-input {
 		background: none;
 		@include box-shadow(none);
 		font-size: 13px;
-		font-weight: 700;
+		font-weight: bold;
 		color: $blue;
 		cursor: pointer;
 	}
@@ -111,14 +63,187 @@ input.courseware-unit-search-input {
 	}
 
 	header {
-		height: 75px;
+		min-height: 75px;
+		@include clearfix();
 
-		.item-details {
+		.item-details, .section-published-date, .gradable-status {
 			float: left;
-			padding: 21px 0 0;
 		}
 
-		.item-actions {			
+		.item-details {
+			padding: 20px 0 10px 0;
+			width: 800px;
+
+			.section-name {
+				float: left;
+				margin-right: 10px;
+				width: 350px;
+				font-size: 19px;
+				font-weight: bold;
+				color: $blue;
+			}
+
+			.section-name-span {
+				cursor: pointer;
+				@include transition(color .15s);
+
+				&:hover {
+					color: $orange;
+				}
+			}
+
+			.section-name-edit {
+				input {
+					font-size: 16px;	
+				}
+				
+				.save-button {
+					@include blue-button;
+					padding: 7px 20px 7px;
+					margin-right: 5px;
+				}
+
+				.cancel-button {
+					@include white-button;
+					padding: 7px 20px 7px;
+				}
+			}
+
+			.section-published-date {
+				width: 265px;
+				margin-right: 10px;
+				padding: 4px 10px;
+				@include border-radius(3px);
+				background: $lightGrey;
+
+				.published-status {
+					font-size: 12px;
+					margin-right: 15px;
+
+					strong {
+						font-weight: bold;
+					}
+				}
+
+				.schedule-button {
+					@include blue-button;
+				}
+
+				.edit-button {
+					@include blue-button;
+				}
+
+				.schedule-button,
+				.edit-button {
+					font-size: 11px;
+					padding: 3px 15px 5px;
+				}
+			}
+
+			.gradable-status {
+				position: relative;
+				top: 1px;
+				width: 145px;
+
+				.status-label {
+					position: absolute;
+					top: 0;
+					right: 2px;
+					display: none;
+					width: 100px;
+					padding: 10px 20px 10px 10px;
+					@include border-radius(3px);
+					background: $lightGrey;
+					color: $lightGrey;
+					font-size: 12px;
+					font-weight: bold;
+					line-height: 16px;
+				}
+
+				.menu-toggle {
+					z-index: 10;
+					position: absolute;
+					top: 0;
+					right: 5px;
+					padding: 5px;
+					color: $lightGrey;
+
+					&:hover, &.is-active {
+						color: $blue;
+					}
+				}
+
+				.menu {
+					z-index: 1;
+					display: block;
+					opacity: 0.0;
+					position: absolute;
+					top: -1px;
+					left: 2px;
+					margin: 0;
+					padding: 8px 12px;
+					background: $white;
+					border: 1px solid $mediumGrey;
+					font-size: 12px;
+					@include border-radius(4px);
+					@include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
+					@include transition(opacity .15s);
+
+
+					li {
+						width: 115px;
+						margin-bottom: 3px;
+						padding-bottom: 3px;
+						border-bottom: 1px solid $lightGrey;
+
+						&:last-child {
+							margin-bottom: 0;
+							padding-bottom: 0;
+							border: none;
+
+							a {
+								color: $darkGrey;
+							}
+						}
+					}
+
+					a {
+
+						&.is-selected {
+							font-weight: bold;
+						}
+					}
+				}
+
+				// dropdown state
+				&.is-active {
+
+					.menu {
+						z-index: 1000;
+						opacity: 1.0;
+					}
+
+					.menu-toggle {
+						z-index: 10000;
+					}
+				}
+
+				// set state
+				&.is-set {
+
+					.menu-toggle {
+						color: $blue;
+					}
+
+					.status-label {
+						display: block;
+						color: $blue;
+					}
+				}
+			}
+		}
+
+		.item-actions {	
 			margin-top: 21px;
 			margin-right: 12px;
 
@@ -137,13 +262,6 @@ input.courseware-unit-search-input {
 		.drag-handle {
 			margin-left: 11px;
 		}
-	}
-
-	h3 {
-		font-size: 19px;
-		font-weight: 700;
-		color: $blue;
-	}
 
 	.section-name-span {
 		cursor: pointer;
@@ -175,8 +293,9 @@ input.courseware-unit-search-input {
 		font-size: 12px;
 		color: #878e9d;
 
-		strong {
+			strong {
-			font-weight: 700;
+				font-weight: bold;
+			}
 		}
 	}
 
@@ -193,12 +312,127 @@ input.courseware-unit-search-input {
 			@include tree-view;
 			border-top-width: 0;
 		}
+
+		.branch {
+
+			.section-item {
+				@include clearfix();
+
+				.details {
+					float: left;
+					width: 650px;
+				}
+
+				.gradable-status {
+					float: left;
+					position: relative;
+					top: -4px;
+					width: 145px;
+
+					.status-label {
+						position: absolute;
+						top: 0;
+						right: 2px;
+						display: none;
+						width: 100px;
+						padding: 10px 20px 10px 10px;
+						@include border-radius(3px);
+						background: $lightGrey;
+						color: $lightGrey;
+						font-size: 12px;
+						font-weight: bold;
+						line-height: 16px;
+					}
+
+					.menu-toggle {
+						z-index: 10;
+						position: absolute;
+						top: 0;
+						right: 5px;
+						padding: 5px;
+						color: $mediumGrey;
+
+						&:hover, &.is-active {
+							color: $blue;
+						}
+					}
+
+					.menu {
+						z-index: 1;
+						display: block;
+						opacity: 0.0;
+						position: absolute;
+						top: -1px;
+						left: 5px;
+						margin: 0;
+						padding: 8px 12px;
+						background: $white;
+						border: 1px solid $mediumGrey;
+						font-size: 12px;
+						@include border-radius(4px);
+						@include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
+						@include transition(opacity .15s);
+
+
+						li {
+							width: 115px;
+							margin-bottom: 3px;
+							padding-bottom: 3px;
+							border-bottom: 1px solid $lightGrey;
+
+							&:last-child {
+								margin-bottom: 0;
+								padding-bottom: 0;
+								border: none;
+
+								a {
+									color: $darkGrey;
+								}
+							}
+						}
+
+						a {
+
+							&.is-selected {
+								font-weight: bold;
+							}
+						}
+					}
+
+					// dropdown state
+					&.is-active {
+
+						.menu {
+							z-index: 1000;
+							opacity: 1.0;
+						}
+
+						.menu-toggle {
+							z-index: 10000;
+						}
+					}
+
+					// set state
+					&.is-set {
+
+						.menu-toggle {
+							color: $blue;
+						}
+
+						.status-label {
+							display: block;
+							color: $blue;
+						}
+					}
+				}
+			}
+		}
 	}
 
 	&.new-section {
 		header {
 			height: auto;
-			@include clearfix;
+			@include clearfix();
 		}
 
 		.expand-collapse-icon {
@@ -285,7 +519,7 @@ input.courseware-unit-search-input {
 	}
 
 	strong {
-		font-weight: 700;
+		font-weight: bold;
 	}
 
 	.start-date,

cms/static/sass/_variables.scss

@@ -10,10 +10,19 @@ $fg-min-width: 810px;
 $sans-serif: 'Open Sans', $verdana;
 $body-line-height: golden-ratio(.875em, 1);
 
+$white: rgb(255,255,255);
+$black: rgb(0,0,0);
+
 $pink: rgb(182,37,104);
 $error-red: rgb(253, 87, 87);
 
 $blue: #5597dd;
+$lightBlue: tint($blue, 75%);
+$extraLightBlue: tint($lightBlue, 75%);
+$darkBlue: shade($blue, 25%);
+$extraDarkBlue: shade($darkBlue, 25%);
+$lightTransparentBlue: rgba(167, 192, 221, 0.3);
+
 $orange: #edbd3c;
 $green: #108614;
 $lightGrey: #edf1f5;

cms/templates/overview.html

@@ -16,6 +16,48 @@
   <script src="${static.url('js/vendor/timepicker/jquery.timepicker.js')}"></script>
   <script src="${static.url('js/vendor/timepicker/datepair.js')}"></script>
   <script src="${static.url('js/vendor/date.js')}"></script>
+
+  <link rel="stylesheet" type="text/css" href="${static.url('css/vendor/symbolset.ss-standard.css')}" />
+  <link rel="stylesheet" type="text/css" href="${static.url('css/vendor/symbolset.ss-symbolicons-block.css')}" />
+  <script src="${static.url('js/vendor/symbolset.ss-standard.js')}"></script>
+  <script src="${static.url('js/vendor/symbolset.ss-symbolicons.js')}"></script>
+
+  <script type="text/javascript">
+    (function() {
+      $body = $('body');  
+      $('.gradable-status .menu-toggle').bind('click', showGradeMenu);
+      $('.gradable-status .menu').bind('click', selectGradeType);
+    })();
+
+    function showGradeMenu(e) {
+
+      $section = $(this).closest('.gradable-status');
+
+      e.preventDefault();
+      $section.toggleClass('is-active');
+    }
+
+    function selectGradeType(e) {
+      e.preventDefault();
+
+      var $section = $(this).closest('.gradable-status');
+      $section.find('.menu li a').removeClass('is-selected');
+
+
+      var $target = $(e.target).addClass('is-selected');
+      var $label = $section.find('.status-label');
+
+      $section.removeClass('is-active');      
+      $label.html($target.html());
+
+      if ($target.hasClass('gradable-status-notgraded')) {
+        $section.removeClass('is-set');
+      }
+      else {
+        $section.addClass('is-set');
+      }
+    }
+  </script>
 </%block>
 
 <%block name="header_extras">
@@ -77,8 +119,6 @@
       </ol>
     </li>
   </script>
-
-
 </%block>
 
 <%block name="content">
@@ -129,11 +169,25 @@
                   <a href="#" class="edit-button" data-date="${start_date_str}" data-time="${start_time_str}" data-id="${section.location}">Edit</a>
                 %endif
               </div>
-              <div class="section-gradable-status">
+              
-                <input type="checkbox" id="section-gradable-status-true">
+              <div class="gradable-status">
-                <label for="section-gradable-status-true">Gradable</label>
+                <h4 class="status-label">Not Graded</h4>
+                
+                <a class="menu-toggle" href="#">
+                  <span class="ss-icon ss-standard">&#x2713;</span>
+                </a>
+                                
+                <ul class="menu">
+                  <li><a class="is-selected" href="#">Homework</a></li>
+                  <li><a href="#">Finger Exercises</a></li>
+                  <li><a href="#">Lab</a></li>
+                  <li><a href="#">Midterm Exam</a></li>
+                  <li><a href="#">Final Exam</a></li>
+                  <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>
               <a href="#" data-tooltip="Drag to reorder" class="drag-handle"></a>
@@ -149,13 +203,31 @@
               % for subsection in section.get_children():
               <li class="branch collapsed" data-id="${subsection.location}">
                 <div class="section-item">
-                  <div>
+                  <div class="details">
-                    <a href="#" data-tooltip="Collapse/expand this subsection" class="expand-collapse-icon expand"></a>
+                    <a href="#"  data-tooltip="Collapse/expand this subsection" class="expand-collapse-icon expand"></a>
                     <a href="${reverse('edit_subsection', args=[subsection.location])}">
                       <span class="folder-icon"></span>
                       <span class="subsection-name"><span class="subsection-name-value">${subsection.display_name}</span></span>
                     </a>
                   </div>
+                  
+                  <div class="gradable-status">
+                    <h4 class="status-label">Not Graded</h4>
+                    
+                    <a class="menu-toggle" href="#">
+                      <span class="ss-icon ss-standard">&#x2713;</span>
+                    </a>
+                                    
+                    <ul class="menu">
+                      <li><a class="is-selected" href="#">Homework</a></li>
+                      <li><a href="#">Finger Exercises</a></li>
+                      <li><a href="#">Lab</a></li>
+                      <li><a href="#">Midterm Exam</a></li>
+                      <li><a href="#">Final Exam</a></li>
+                      <li><a class="gradable-status-notgraded" href="#">Not Graded</a></li>
+                    </ul>
+                  </div>
+                  
                   <div class="item-actions">
                     <a href="#" data-tooltip="Delete this subsection" class="delete-button delete-subsection-button"><span class="delete-icon"></span></a>                    
                     <a href="#" data-tooltip="Drag to reorder" class="drag-handle"></a>