new header styles; collapse all button added to courseware

cms/static/js/base.js

@@ -43,6 +43,8 @@ $(document).ready(function() {
     $('.unit .item-actions .delete-button').bind('click', deleteUnit);
     $('.new-unit-item').bind('click', createNewUnit);
 
+    $('.collapse-all-button').bind('click', collapseAll);
+
     // autosave when a field is updated on the subsection page
     $body.on('keyup', '.subsection-display-name-input, .unit-subtitle, .policy-list-value', checkForNewValue);
     $('.subsection-display-name-input, .unit-subtitle, .policy-list-name, .policy-list-value').each(function(i) {
@@ -128,6 +130,11 @@ $(document).ready(function() {
     });
 });
 
+function collapseAll(e) {
+    $('.branch').addClass('collapsed');
+    $('.expand-collapse-icon').removeClass('collapse').addClass('expand');
+}
+
 function editSectionPublishDate(e) {
     e.preventDefault();
     $modal = $('.edit-subsection-publish-settings').show();
@@ -597,11 +604,11 @@ function hideToastMessage(e) {
 function addNewSection(e, isTemplate) {
     e.preventDefault();
 
-    $(e.target).hide();
+    $(e.target).addClass('disabled');
 
     var $newSection = $($('#new-section-template').html());
     var $cancelButton = $newSection.find('.new-section-name-cancel');
-    $('.new-courseware-section-button').after($newSection);
+    $('.courseware-overview').prepend($newSection);
     $newSection.find('.new-section-name').focus().select();
     $newSection.find('.section-name-form').bind('submit', saveNewSection);
     $cancelButton.bind('click', cancelNewSection);
@@ -638,7 +645,7 @@ function saveNewSection(e) {
 
 function cancelNewSection(e) {
     e.preventDefault();
-    $('.new-courseware-section-button').show();
+    $('.new-courseware-section-button').removeClass('disabled');
     $(this).parents('section.new-section').remove();
 }
 

cms/static/sass/_base.scss

@@ -28,6 +28,7 @@ a {
 }
 
 h1 {
+    display: none;
     float: left;
     font-size: 28px;
     font-weight: 300;
@@ -39,8 +40,7 @@ h1 {
 }
 
 .page-actions {
-    float: right;
-    margin-top: 42px;
+    margin-bottom: 25px;
 }
 
 .main-wrapper {
@@ -349,7 +349,7 @@ body.show-wip {
 }
 
 .new-button {
-    @include blue-button;
+    @include green-button;
     font-size: 13px;
     padding: 8px 20px 10px;
     text-align: center;

cms/static/sass/_cms_mixins.scss

@@ -88,7 +88,28 @@
 
 	&:hover {
 		background-color: #d9e3ee;
-		color: #6d788b;
+	}
+}
+
+@mixin green-button {
+	@include button;
+	border: 1px solid $darkGreen;
+	border-radius: 3px;
+	@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
+	background-color: $green;
+	@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
+	color: #fff;
+
+	&:hover {
+		background-color: $brightGreen;
+		color: #fff;
+	}
+
+	&.disabled {
+		border: 1px solid $disabledGreen !important;
+		background: $disabledGreen !important;
+		color: #fff !important;
+		@include box-shadow(none);
 	}
 }
 

cms/static/sass/_courseware.scss

@@ -9,7 +9,7 @@ input.courseware-unit-search-input {
 	position: relative;
 	background: #fff;
 	border-radius: 3px;
-	margin: 15px 0;
+	margin-top: 15px;
 	padding-bottom: 12px;
 	@include box-shadow(0 1px 1px rgba(0,0,0,0.2), 0 0 0 1px rgba(0, 0, 0, 0.1));
 
@@ -192,6 +192,17 @@ input.courseware-unit-search-input {
 	}
 }
 
+.collapse-all-button {
+	float: right;
+	margin-top: 10px;
+	font-size: 13px;
+	color: $darkGrey;
+
+	.collapse-all-icon {
+		margin-right: 6px;
+	}
+}
+
 .new-section-name,
 .new-subsection-name-input {
 	width: 515px;

cms/static/sass/_graphics.scss

@@ -56,6 +56,27 @@
 	background: url(../img/home-icon.png) no-repeat;
 }
 
+.small-home-icon {
+	display: inline-block;
+	width: 16px;
+	height: 14px;
+	background: url(../img/small-home-icon.png) no-repeat;
+}
+
+.log-out-icon {
+	display: inline-block;
+	width: 15px;
+	height: 13px;
+	background: url(../img/log-out-icon.png) no-repeat;
+}
+
+.collapse-all-icon {
+	display: inline-block;
+	width: 15px;
+	height: 9px;
+	background: url(../img/collapse-all-icon.png) no-repeat;
+}
+
 .calendar-icon {
 	display: inline-block;
 	width: 12px;

cms/static/sass/_header.scss

@@ -5,18 +5,16 @@ body.no-header {
 }
 
 @mixin active {
-	@include linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
-	@include box-shadow(0 2px 8px rgba(0, 0, 0, .7) inset);
+	color: #3c3c3c;
+	border-bottom: 3px solid $mediumGrey;
 }
 
 .primary-header {
 	width: 100%;
-	height: 36px;
-	border-bottom: 1px solid #2c2e33;
-	@include linear-gradient(top, #686b76, #54565e);
-	font-size: 13px;
-	color: #fff;
-	@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(255, 255, 255, 0.05) inset);
+	margin-bottom: 25px;
+	border-top: 6px solid $blue;
+	border-bottom: 1px solid $mediumGrey;
+	background: #fff;
 
 	&.active-tab-courseware #courseware-tab {
 		@include active;
@@ -38,23 +36,6 @@ body.no-header {
 		@include active;
 	}
 
-	#import-tab {
-		@include box-shadow(1px 0 0 #787981 inset, -1px 0 0 #3d3e44 inset, 1px 0 0 #787981, -1px 0 0 #3d3e44);
-	}
-
-	.left {
-		position: absolute;
-		left: 0;
-		width: 100%;
-	}
-
-	.class-name {
-		max-width: 350px;
-		text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-	}
-
 	.drop-icon {
 		margin-left: 5px;
 		font-size: 11px;
@@ -65,26 +46,46 @@ body.no-header {
 		line-height: 18px;
 	}
 
-	a,
-	.username {
-		float: left;
-		display: inline-block;
-		height: 29px;
-		padding: 7px 15px 0;
-		color: #e4e6ee;
+	.class-nav-bar {
+		clear: both;
 	}
 
-	.class-nav,
-	.class-nav li {
-		float: left;
+	.class-nav {
+		@include clearfix;
+		border-top: 1px solid $mediumGrey;
+
+		a {
+			float: left;
+			display: inline-block;
+			padding: 20px 25px 22px;
+			font-size: 15px;
+		}
+
+		li {
+			float: left;
+		}
 	}
 
-	a {
-		@include box-shadow(1px 0 0 #787981 inset, -1px 0 0 #3d3e44 inset, 1px 0 0 #787981, -1px 0 0 #3d3e44);
+	.class {
+		@include clearfix;
+		font-size: 12px;
+		color: $darkGrey;
 
-		&:hover {
-			background: rgba(255, 255, 255, .1);
+		a {
+			display: inline-block;
+			height: 20px;
+			padding: 5px 10px 6px;
+			color: $darkGrey;
 		}
 
+		.home {
+			position: relative;
+			top: 1px;
+		}
+
+		.log-out {
+			position: relative;
+			top: 3px;
+		}
 	}
 }
\ No newline at end of file

cms/static/sass/_variables.scss

@@ -22,4 +22,9 @@ $lightGrey: #edf1f5;
 $mediumGrey: #ced2db;
 $darkGrey: #8891a1;
 $extraDarkGrey: #3d4043;
-$paleYellow: #fffcf1;
+$paleYellow: #fffcf1;
\ No newline at end of file
+
+$green: rgb(37, 184, 90);
+$brightGreen: rgb(22, 202, 87);
+$disabledGreen: rgb(124, 206, 153);
+$darkGreen: rgb(52, 133, 76);

cms/templates/overview.html

@@ -99,9 +99,11 @@
   <div class="main-wrapper">
     <div class="inner-wrapper">
       <h1>Courseware</h1>
-      <div class="page-actions"></div>
-      <article class="courseware-overview" data-course-id="${context_course.location.url()}">
+      <div class="page-actions">
         <a href="#" class="new-button new-courseware-section-button"><span class="plus-icon white"></span> New Section</a>
+        <a href="#" class="collapse-all-button"><span class="collapse-all-icon"></span>Collapse All</a>
+      </div>
+      <article class="courseware-overview" data-course-id="${context_course.location.url()}">        
         % for section in sections:
         <section class="courseware-section branch" data-id="${section.location}">
           <header>

cms/templates/widgets/header.html

@@ -2,12 +2,28 @@
 
 <% active_tab_class = 'active-tab-' + active_tab if active_tab else '' %>
 <header class="primary-header ${active_tab_class}">
-  <nav class="inner-wrapper">
-    <div class="left">
-      <a href="/"><span class="home-icon"></span></a>
+  <div class="inner-wrapper">
+    <div class="class">
+      <div class="left">        
+        % if context_course:
+          <% ctx_loc = context_course.location %>
+          <a href="/" class="home"><span class="small-home-icon"></span></a> › 
+          <a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" class="class-name">${context_course.display_name}</a> ›
+        % endif
+      </div>
+
+      <div class="right">
+        <span class="username">${ user.username }</span>
+        % if user.is_authenticated():
+           <a href="${reverse('logout')}" class="log-out"><span class="log-out-icon"></span></a>
+        % else:
+           <a href="${reverse('login')}">Log in</a>
+        % endif
+      </div>
+    </div>
+    <nav class="class-nav-bar">
       % if context_course:
       <% ctx_loc = context_course.location %>
-      <a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" class="class-name">${context_course.display_name}</a>
       <ul class="class-nav">
         <li><a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='courseware-tab'>Courseware</a></li>
         <li><a href="${reverse('course_info', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='courseinfo-tab'>Course Info</a></li>
@@ -18,14 +34,6 @@
         <li><a href="${reverse('import_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='import-tab'>Import</a></li>
       </ul>
       % endif
-    </div>
-    <div class="right">
-      <span class="username">${ user.username }</span>
-      % if user.is_authenticated():
-         <a href="${reverse('logout')}">Log out</a>
-      % else:
-         <a href="${reverse('login')}">Log in</a>
-      % endif
-    </div>
-  </nav>
+    </nav>
+  </div>
 </header>