diff --git a/cms/static/img/collapse-all-icon.png b/cms/static/img/collapse-all-icon.png new file mode 100644 index 0000000000..c468778b02 Binary files /dev/null and b/cms/static/img/collapse-all-icon.png differ diff --git a/cms/static/img/home-icon-blue.png b/cms/static/img/home-icon-blue.png new file mode 100644 index 0000000000..45b4971a2a Binary files /dev/null and b/cms/static/img/home-icon-blue.png differ diff --git a/cms/static/img/log-out-icon.png b/cms/static/img/log-out-icon.png new file mode 100644 index 0000000000..c89373619a Binary files /dev/null and b/cms/static/img/log-out-icon.png differ diff --git a/cms/static/img/small-home-icon.png b/cms/static/img/small-home-icon.png new file mode 100644 index 0000000000..fb6adcd7cd Binary files /dev/null and b/cms/static/img/small-home-icon.png differ diff --git a/cms/static/js/base.js b/cms/static/js/base.js index 328c118405..8f2b822ece 100644 --- a/cms/static/js/base.js +++ b/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(); } diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 07ff92251d..a1bd203624 100644 --- a/cms/static/sass/_base.scss +++ b/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; diff --git a/cms/static/sass/_cms_mixins.scss b/cms/static/sass/_cms_mixins.scss index 637f4b48f9..5f2a0aadb8 100644 --- a/cms/static/sass/_cms_mixins.scss +++ b/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); } } diff --git a/cms/static/sass/_courseware.scss b/cms/static/sass/_courseware.scss index a48105eb59..05ddcefb48 100644 --- a/cms/static/sass/_courseware.scss +++ b/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; diff --git a/cms/static/sass/_graphics.scss b/cms/static/sass/_graphics.scss index 4a63a8a885..80599f7bc4 100644 --- a/cms/static/sass/_graphics.scss +++ b/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; diff --git a/cms/static/sass/_header.scss b/cms/static/sass/_header.scss index cb9a7ed121..039ac69898 100644 --- a/cms/static/sass/_header.scss +++ b/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 { - @include box-shadow(1px 0 0 #787981 inset, -1px 0 0 #3d3e44 inset, 1px 0 0 #787981, -1px 0 0 #3d3e44); - - &:hover { - background: rgba(255, 255, 255, .1); + a { + float: left; + display: inline-block; + padding: 20px 25px 22px; + font-size: 15px; } + li { + float: left; + } + } + + .class { + @include clearfix; + font-size: 12px; + color: $darkGrey; + + 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 diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index 8666dc192c..81bf252a34 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -22,4 +22,9 @@ $lightGrey: #edf1f5; $mediumGrey: #ced2db; $darkGrey: #8891a1; $extraDarkGrey: #3d4043; -$paleYellow: #fffcf1; \ No newline at end of file +$paleYellow: #fffcf1; + +$green: rgb(37, 184, 90); +$brightGreen: rgb(22, 202, 87); +$disabledGreen: rgb(124, 206, 153); +$darkGreen: rgb(52, 133, 76); diff --git a/cms/templates/overview.html b/cms/templates/overview.html index c1f99a2e30..f1a527bb38 100644 --- a/cms/templates/overview.html +++ b/cms/templates/overview.html @@ -99,9 +99,11 @@

Courseware

-
-
+
New Section + Collapse All +
+
% for section in sections:
diff --git a/cms/templates/widgets/header.html b/cms/templates/widgets/header.html index f65becb9c7..7f27dd378b 100644 --- a/cms/templates/widgets/header.html +++ b/cms/templates/widgets/header.html @@ -2,12 +2,28 @@ <% active_tab_class = 'active-tab-' + active_tab if active_tab else '' %>
- + +