diff --git a/cms/djangoapps/contentstore/views.py b/cms/djangoapps/contentstore/views.py index d2f19802af..017b6a963d 100644 --- a/cms/djangoapps/contentstore/views.py +++ b/cms/djangoapps/contentstore/views.py @@ -995,7 +995,7 @@ def get_course_settings(request, org, course, name): course_details = CourseDetails.fetch(location) return render_to_response('settings.html', { - 'active_tab': 'settings-tab', + 'active_tab': 'settings', 'context_course': course_module, 'course_details' : json.dumps(course_details, cls=CourseSettingsEncoder) }) diff --git a/cms/static/client_templates/course_grade_policy.html b/cms/static/client_templates/course_grade_policy.html index 97b0c20eb8..c9a21280dd 100644 --- a/cms/static/client_templates/course_grade_policy.html +++ b/cms/static/client_templates/course_grade_policy.html @@ -64,6 +64,6 @@ total exercises that won't be graded - Delete Assignment Type + + Delete diff --git a/cms/static/coffee/src/views/module_edit.coffee b/cms/static/coffee/src/views/module_edit.coffee index ad875294a1..0617b01bb4 100644 --- a/cms/static/coffee/src/views/module_edit.coffee +++ b/cms/static/coffee/src/views/module_edit.coffee @@ -56,6 +56,7 @@ class CMS.Views.ModuleEdit extends Backbone.View event.preventDefault() data = @module.save() data.metadata = @metadata() + $modalCover.hide() @model.save(data).done( => # # showToastMessage("Your changes have been saved.", null, 3) @module = null @@ -69,9 +70,11 @@ class CMS.Views.ModuleEdit extends Backbone.View event.preventDefault() @$el.removeClass('editing') @$component_editor().slideUp(150) + $modalCover.hide() clickEditButton: (event) -> event.preventDefault() @$el.addClass('editing') + $modalCover.show() @$component_editor().slideDown(150) @loadEdit() diff --git a/cms/static/coffee/src/views/tabs.coffee b/cms/static/coffee/src/views/tabs.coffee index 34d86a3051..1fbc6ffa7f 100644 --- a/cms/static/coffee/src/views/tabs.coffee +++ b/cms/static/coffee/src/views/tabs.coffee @@ -33,6 +33,10 @@ class CMS.Views.TabsEdit extends Backbone.View ) $('.new-component-item').before(editor.$el) + editor.$el.addClass('new') + setTimeout(=> + editor.$el.removeClass('new') + , 500) editor.cloneTemplate( @model.get('id'), diff --git a/cms/static/coffee/src/views/unit.coffee b/cms/static/coffee/src/views/unit.coffee index a250925bf9..fe8f928746 100644 --- a/cms/static/coffee/src/views/unit.coffee +++ b/cms/static/coffee/src/views/unit.coffee @@ -4,7 +4,6 @@ class CMS.Views.UnitEdit extends Backbone.View 'click .new-component .cancel-button': 'closeNewComponent' 'click .new-component-templates .new-component-template a': 'saveNewComponent' 'click .new-component-templates .cancel-button': 'closeNewComponent' - 'click .new-component-button': 'showNewComponentForm' 'click .delete-draft': 'deleteDraft' 'click .create-draft': 'createDraft' 'click .publish-draft': 'publishDraft' @@ -54,30 +53,20 @@ class CMS.Views.UnitEdit extends Backbone.View ) ) - # New component creation - showNewComponentForm: (event) => - event.preventDefault() - @$newComponentItem.addClass('adding') - $(event.target).fadeOut(150) - @$newComponentItem.css('height', @$newComponentTypePicker.outerHeight()) - @$newComponentTypePicker.slideDown(250) - showComponentTemplates: (event) => event.preventDefault() type = $(event.currentTarget).data('type') - @$newComponentTypePicker.fadeOut(250) - @$(".new-component-#{type}").fadeIn(250) + @$newComponentTypePicker.slideUp(250) + @$(".new-component-#{type}").slideDown(250) closeNewComponent: (event) => event.preventDefault() - @$newComponentTypePicker.slideUp(250) + @$newComponentTypePicker.slideDown(250) @$newComponentTemplatePickers.slideUp(250) - @$newComponentButton.fadeIn(250) @$newComponentItem.removeClass('adding') @$newComponentItem.find('.rendered-component').remove() - @$newComponentItem.css('height', @$newComponentButton.outerHeight()) saveNewComponent: (event) => event.preventDefault() 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..887d59f45d 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..5755bf659d Binary files /dev/null and b/cms/static/img/small-home-icon.png differ diff --git a/cms/static/img/upload-icon.png b/cms/static/img/upload-icon.png new file mode 100644 index 0000000000..0a78627f87 Binary files /dev/null and b/cms/static/img/upload-icon.png differ diff --git a/cms/static/js/base.js b/cms/static/js/base.js index eefc8c3c37..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,9 +604,11 @@ function hideToastMessage(e) { function addNewSection(e, isTemplate) { e.preventDefault(); + $(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); @@ -636,11 +645,14 @@ function saveNewSection(e) { function cancelNewSection(e) { e.preventDefault(); + $('.new-courseware-section-button').removeClass('disabled'); $(this).parents('section.new-section').remove(); } function addNewCourse(e) { e.preventDefault(); + + $(e.target).hide(); var $newCourse = $($('#new-course-template').html()); var $cancelButton = $newCourse.find('.new-course-cancel'); $('.new-course-button').after($newCourse); @@ -681,6 +693,7 @@ function saveNewCourse(e) { function cancelNewCourse(e) { e.preventDefault(); + $('.new-course-button').show(); $(this).parents('section.new-course').remove(); } diff --git a/cms/static/js/views/settings/main_settings_view.js b/cms/static/js/views/settings/main_settings_view.js index db347bae82..e31f4b4f41 100644 --- a/cms/static/js/views/settings/main_settings_view.js +++ b/cms/static/js/views/settings/main_settings_view.js @@ -356,7 +356,8 @@ CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({ return this; }, - addAssignmentType : function() { + addAssignmentType : function(e) { + e.preventDefault(); this.model.get('graders').push({}); }, fieldToSelectorMap : { @@ -461,7 +462,6 @@ CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({ // 0th ele doesn't have a bar; so, will never invoke this var cachethis = this; return function(event, ui) { - ui.element.height("50px"); var barIndex = ui.element.index(); // min and max represent limits not labels (note, can's make smaller than 3 points wide) var min = (barIndex < cachethis.descendingCutoffs.length ? cachethis.descendingCutoffs[barIndex]['cutoff'] + 3 : 3); @@ -487,7 +487,6 @@ CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({ var cachethis = this; return function(event, ui) { // for some reason the resize is setting height to 0 - ui.element.height("50px"); cachethis.saveCutoffs(); } }, @@ -503,6 +502,7 @@ CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({ }, addNewGrade: function(e) { + e.preventDefault(); var gradeLength = this.descendingCutoffs.length; // cutoffs doesn't include fail/f so this is only the passing grades if(gradeLength > 3) { // TODO shouldn't we disable the button @@ -541,6 +541,7 @@ CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({ }, removeGrade: function(e) { + e.preventDefault(); var domElement = $(e.currentTarget).closest('li'); var index = domElement.index(); // copy the boundary up to the next higher grade then remove @@ -614,8 +615,9 @@ CMS.Views.Settings.GraderView = CMS.Views.ValidatingView.extend({ } }, - deleteModel : function() { + deleteModel : function(e) { this.model.destroy(); + e.preventDefault(); } }); \ No newline at end of file diff --git a/cms/static/sass/_assets.scss b/cms/static/sass/_assets.scss index 29c3d4000d..23d9ea4d9a 100644 --- a/cms/static/sass/_assets.scss +++ b/cms/static/sass/_assets.scss @@ -5,14 +5,6 @@ background-color: #fff; } - .upload-button { - @include blue-button; - float: left; - margin-right: 20px; - padding: 8px 30px 10px; - font-size: 12px; - } - .asset-library { @include clearfix; diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 22a5a7e128..92cde28756 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -6,11 +6,15 @@ body { min-width: 980px; - background: #f3f4f5; - font-family: 'Open Sans', sans-serif; + background: rgb(240, 241, 245); font-size: 16px; line-height: 1.6; - color: #3c3c3c; + color: $baseFontColor; +} + +body, +input { + font-family: 'Open Sans', sans-serif; } a { @@ -26,7 +30,8 @@ a { h1 { float: left; font-size: 28px; - margin: 36px 6px; + font-weight: 300; + margin: 24px 6px; } .waiting { @@ -34,8 +39,7 @@ h1 { } .page-actions { - float: right; - margin-top: 42px; + margin-bottom: 30px; } .main-wrapper { @@ -53,13 +57,6 @@ h1 { } } -.window { - background: #fff; - border: 1px solid $darkGrey; - border-radius: 3px; - @include box-shadow(0 1px 2px rgba(0, 0, 0, .1)); -} - .sidebar { float: right; width: 28%; @@ -80,17 +77,18 @@ footer { input[type="text"], input[type="email"], -input[type="password"] { +input[type="password"], +textarea.text { padding: 6px 8px 8px; @include box-sizing(border-box); - border: 1px solid #b0b6c2; + border: 1px solid $mediumGrey; border-radius: 2px; - @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3)); - background-color: #edf1f5; + @include linear-gradient($lightGrey, tint($lightGrey, 90%)); + background-color: $lightGrey; @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset); font-family: 'Open Sans', sans-serif; font-size: 11px; - color: #3c3c3c; + color: $baseFontColor; outline: 0; &::-webkit-input-placeholder, @@ -98,6 +96,11 @@ input[type="password"] { &:-ms-input-placeholder { color: #979faf; } + + &:focus { + @include linear-gradient($paleYellow, tint($paleYellow, 90%)); + outline: 0; + } } input.search { @@ -107,7 +110,7 @@ input.search { border-radius: 20px; background: url(../img/search-icon.png) no-repeat 8px 7px #edf1f5; font-family: 'Open Sans', sans-serif; - color: #3c3c3c; + color: $baseFontColor; outline: 0; &::-webkit-input-placeholder { @@ -126,12 +129,18 @@ code { font-family: Monaco, monospace; } +.CodeMirror { + font-size: 13px; + border: 1px solid $darkGrey; + background: #fff; +} + .text-editor { width: 100%; min-height: 80px; padding: 10px; @include box-sizing(border-box); - border: 1px solid #b0b6c2; + border: 1px solid $mediumGrey; @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3)); background-color: #edf1f5; @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset); @@ -173,27 +182,32 @@ code { padding: 10px 0; } +.details { + display: none; + margin-bottom: 30px; + font-size: 14px; +} + .window { margin-bottom: 20px; + border: 1px solid $mediumGrey; + border-radius: 3px; + background: #fff; + @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.1)); .window-contents { padding: 20px; } - .details { - margin-bottom: 30px; - font-size: 14px; - } - h4 { padding: 6px 14px; - border-bottom: 1px solid #cbd1db; - border-radius: 3px 3px 0 0; - @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%); - background-color: #edf1f5; - @include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset); + border-bottom: 1px solid $mediumGrey; + border-radius: 2px 2px 0 0; + @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); + background-color: $lightBluishGrey; + @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset); font-size: 14px; - font-weight: 600; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); } label { @@ -345,8 +359,9 @@ body.show-wip { } .new-button { - @include grey-button; - padding: 20px 0; + @include green-button; + font-size: 13px; + padding: 8px 20px 10px; text-align: center; &.big { @@ -369,6 +384,13 @@ body.show-wip { } } +.delete-button.standard { + + &:hover { + background-color: tint($orange, 75%); + } +} + .tooltip { position: absolute; top: 0; diff --git a/cms/static/sass/_cms_mixins.scss b/cms/static/sass/_cms_mixins.scss index b4db2f096e..361aa6929c 100644 --- a/cms/static/sass/_cms_mixins.scss +++ b/cms/static/sass/_cms_mixins.scss @@ -48,18 +48,19 @@ } @mixin white-button { - @include button; - border: 1px solid $darkGrey; - border-radius: 3px; - @include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)); - background-color: #dfe5eb; - @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset); - color: #778192; - - &:hover { - background-color: #f2f6f9; - color: #778192; - } + @include button; + border: 1px solid $mediumGrey; + border-radius: 3px; + @include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)); + background-color: #dfe5eb; + @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset); + color: rgb(92, 103, 122); + text-shadow: 0 1px 0 rgba(255, 255, 255, .5); + + &:hover { + background-color: rgb(222, 236, 247); + color: rgb(92, 103, 122); + } } @mixin orange-button { @@ -92,6 +93,28 @@ } } +@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); + } +} + @mixin dark-grey-button { @include button; border: 1px solid #1c1e20; @@ -109,18 +132,17 @@ @mixin edit-box { padding: 15px 20px; border-radius: 3px; - border: 1px solid #5597dd; - @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); - background-color: #5597dd; + background-color: $lightBluishGrey2; + color: #3c3c3c; @include box-shadow(0 1px 0 rgba(255, 255, 255, .2) inset); label { - color: #fff; + color: $baseFontColor; } input, textarea { - border: 1px solid #3c3c3c; + border: 1px solid $darkGrey; } textarea { @@ -140,21 +162,19 @@ } .save-button { - @include orange-button; - border-color: #3c3c3c; + @include blue-button; margin-top: 0; } .cancel-button { @include white-button; - border-color: #30649C; margin-top: 0; } } @mixin tree-view { - border: 1px solid #ced2db; - background: #edf1f5; + border: 1px solid $mediumGrey; + background: $lightGrey; .branch { margin-bottom: 10px; @@ -200,15 +220,10 @@ content: "- draft"; } - .public-item:after { - content: "- public"; - } - .private-item:after { content: "- private"; } - .public-item, .private-item { color: #a4aab7; } @@ -219,7 +234,11 @@ } a { - color: #2c2e33; + color: $baseFontColor; + + &.new-unit-item { + color: #6d788b; + } } ol { diff --git a/cms/static/sass/_courseware.scss b/cms/static/sass/_courseware.scss index 37c9ca9036..bd50993bc5 100644 --- a/cms/static/sass/_courseware.scss +++ b/cms/static/sass/_courseware.scss @@ -1,21 +1,18 @@ + input.courseware-unit-search-input { float: left; width: 260px; background-color: #fff; } -.courseware-overview { - -} - .courseware-section { position: relative; background: #fff; - border: 1px solid $darkGrey; border-radius: 3px; - margin: 10px 0; + border: 1px solid $mediumGrey; + margin-top: 15px; padding-bottom: 12px; - @include box-shadow(0 1px 2px rgba(0, 0, 0, .1)); + @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.1)); &:first-child { margin-top: 0; @@ -139,6 +136,10 @@ input.courseware-unit-search-input { } } + .section-name-form { + margin-bottom: 15px; + } + .section-name-edit { input { font-size: 16px; @@ -192,6 +193,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; @@ -200,7 +212,7 @@ input.courseware-unit-search-input { .new-section-name-save, .new-subsection-name-save { @include blue-button; - padding: 6px 20px 8px; + padding: 4px 20px 7px; margin: 0 5px; color: #fff !important; } @@ -208,7 +220,7 @@ input.courseware-unit-search-input { .new-section-name-cancel, .new-subsection-name-cancel { @include white-button; - padding: 2px 20px 5px; + padding: 4px 20px 7px; color: #8891a1 !important; } @@ -291,4 +303,11 @@ input.courseware-unit-search-input { .cancel-button { font-size: 16px; } +} + +.collapse-all-button { + float: right; + margin-top: 10px; + font-size: 13px; + color: $darkGrey; } \ No newline at end of file diff --git a/cms/static/sass/_dashboard.scss b/cms/static/sass/_dashboard.scss index 8763927bdb..0a9e992650 100644 --- a/cms/static/sass/_dashboard.scss +++ b/cms/static/sass/_dashboard.scss @@ -36,13 +36,6 @@ } } -.new-course-button { - @include grey-button; - display: block; - padding: 20px; - text-align: center; -} - .new-course { padding: 15px 25px; margin-top: 20px; diff --git a/cms/static/sass/_graphics.scss b/cms/static/sass/_graphics.scss index 4a63a8a885..4ed22c570d 100644 --- a/cms/static/sass/_graphics.scss +++ b/cms/static/sass/_graphics.scss @@ -34,6 +34,14 @@ background: url(../img/video-icon.png) no-repeat; } +.upload-icon { + display: inline-block; + width: 22px; + height: 13px; + margin-right: 5px; + background: url(../img/upload-icon.png) no-repeat; +} + .list-icon { display: inline-block; width: 14px; @@ -56,6 +64,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 e80c7aa3b1..e031e16f50 100644 --- a/cms/static/sass/_header.scss +++ b/cms/static/sass/_header.scss @@ -5,18 +5,15 @@ 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); + @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); + background-color: rgba(255, 255, 255, .3); + @include box-shadow(0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 #fff inset); + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } .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: 30px; &.active-tab-courseware #courseware-tab { @include active; @@ -34,23 +31,16 @@ body.no-header { @include active; } + &.active-tab-settings #settings-tab { + @include active; + } + &.active-tab-import #import-tab { @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 { - width: 750px; - } - - .class-name { - max-width: 350px; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; + &.active-tab-export #export-tab { + @include active; } .drop-icon { @@ -63,26 +53,57 @@ 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; + @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); + background-color: $lightBluishGrey; + @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset); } - .class-nav, - .class-nav li { - float: left; - } + .class-nav { + @include clearfix; - a { - @include box-shadow(1px 0 0 #787981 inset, -1px 0 0 #3d3e44 inset, 1px 0 0 #787981, -1px 0 0 #3d3e44); + a { + float: left; + display: inline-block; + padding: 15px 25px 17px; + font-size: 15px; + color: #3c3c3c; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); - &:hover { - background: rgba(255, 255, 255, .1); + &:hover { + @include linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)); + } } + li { + float: left; + } + } + + .class { + @include clearfix; + height: 100%; + font-size: 12px; + color: rgb(163, 171, 184); + @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1)); + background-color: rgb(47, 53, 63); + + a { + display: inline-block; + height: 20px; + padding: 5px 10px 6px; + color: rgb(163, 171, 184); + } + + .home { + position: relative; + top: 1px; + } + + .log-out { + position: relative; + top: 3px; + } } } \ No newline at end of file diff --git a/cms/static/sass/_settings.scss b/cms/static/sass/_settings.scss index 3f1106584a..b11378145b 100644 --- a/cms/static/sass/_settings.scss +++ b/cms/static/sass/_settings.scss @@ -139,24 +139,25 @@ } &.time { - display: block !important; - width: 75px !important; - min-width: 75px !important; - } - - &:focus { - @include linear-gradient(tint($blue, 80%), tint($blue, 90%)); - border-color: $blue; - outline: 0; + width: 85px !important; + min-width: 85px !important; } &:disabled { - border-color: $mediumGrey; - color: $mediumGrey; + border: none; + @include box-shadow(none); + padding: 0; + color: $darkGrey !important; + font-weight: bold; background: #fff; } } + textarea.tinymce { + border: 1px solid $darkGrey; + height: 300px; + } + input[type="checkbox"], input[type="radio"] { } @@ -241,7 +242,7 @@ &.multi { display: block; background: tint($lightGrey, 50%); - padding: 20px 15px; + padding: 20px; @include border-radius(4px); @include box-sizing(border-box); @@ -290,10 +291,6 @@ width: 100%; } } - - .remove-item { - float: right; - } } } @@ -304,6 +301,7 @@ margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dotted $lightGrey; + @include clearfix(); &:last-child { border: 0; @@ -392,20 +390,8 @@ // editing controls - removing - .remove-item { - clear: both; - display: block; - margin-top: 10px; - opacity: 0.75; - font-size: 13px; - text-align: right; - @include transition(opacity 0.25s ease-in-out); - - - &:hover { - color: $blue; - opacity: 0.99; - } + .delete-button { + float: right; } // editing controls - preview @@ -497,13 +483,15 @@ .settings-grading { + .setting-grading-assignment-types { + + .row .field.enum { + width: 684px; + } + } + .course-grading-assignment-list-item { - .row:nth-child(4) { - border: none; - margin-bottom: 0; - padding-bottom: 0; - } } .input-list { @@ -718,7 +706,7 @@ } .grade-specific-bar { - height: 50px; + height: 50px !important; } .grades { diff --git a/cms/static/sass/_static-pages.scss b/cms/static/sass/_static-pages.scss index c8ffa0316c..e6d8ef0e58 100644 --- a/cms/static/sass/_static-pages.scss +++ b/cms/static/sass/_static-pages.scss @@ -7,7 +7,12 @@ } .unit-body { - padding: 30px 40px; + padding: 0; + } + + .component-editor { + border: none; + border-radius: 0; } .components > li { @@ -36,7 +41,7 @@ } .drag-handle { - background: url(../img/drag-handles.png) center no-repeat $lightGrey; + background: url(../img/drag-handles.png) center no-repeat #fff; } } @@ -46,10 +51,10 @@ z-index: 11; width: 35px; border: none; - background: url(../img/drag-handles.png) center no-repeat $lightGrey; + background: url(../img/drag-handles.png) center no-repeat #fff; &:hover { - background: url(../img/drag-handles.png) center no-repeat $lightGrey; + background: url(../img/drag-handles.png) center no-repeat #fff; } } @@ -60,16 +65,24 @@ } .component.editing { + border-left: 1px solid $mediumGrey; + border-right: 1px solid $mediumGrey; + .xmodule_display { display: none; } } + .new .xmodule_display { + background: $yellow; + } + .xmodule_display { padding: 20px 20px 22px; font-size: 24px; font-weight: 300; - background: $lightGrey; + background: #fff; + @include transition(background-color 3s); } .static-page-item { diff --git a/cms/static/sass/_unit.scss b/cms/static/sass/_unit.scss index fdf737fc12..0fb9e9b75d 100644 --- a/cms/static/sass/_unit.scss +++ b/cms/static/sass/_unit.scss @@ -57,14 +57,10 @@ margin: 20px 40px; &.new-component-item { - padding: 0; + padding: 20px; border: none; - border-radius: 0; - - &.adding { - background-color: $blue; - border-color: #437fbf; - } + border-radius: 3px; + background: $lightGrey; .new-component-button { display: block; @@ -85,12 +81,13 @@ border-radius: 3px 3px 0 0; } - .new-component-type, .new-component-template { - @include clearfix; + .new-component-type { + a, + li { + display: inline-block; + } a { - position: relative; - float: left; width: 100px; height: 100px; margin-right: 10px; @@ -98,14 +95,8 @@ border-radius: 8px; font-size: 13px; line-height: 14px; - color: #fff; text-align: center; - @include box-shadow(0 1px 1px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .4) inset); - @include transition(background-color .15s); - - &:hover { - background-color: rgba(255, 255, 255, .2); - } + @include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset); .name { position: absolute; @@ -118,23 +109,62 @@ } } + .new-component-type, .new-component-template { + @include clearfix; + a { - height: 60px; + position: relative; + border: 1px solid $darkGreen; + background: $green; + color: #fff; + @include transition(background-color .15s); + + &:hover { + background: $brightGreen; + } } } - .new-component, + .new-component-template { + margin-bottom: 20px; + + li:first-child { + a { + border-radius: 3px 3px 0 0; + } + } + + li:last-child { + a { + border-radius: 0 0 3px 3px; + } + } + + a { + display: block; + padding: 7px 20px; + border-bottom: none; + font-weight: 300; + } + } + + .new-component { + text-align: center; + + h5 { + color: $green; + } + + } + .new-component-templates { display: none; - position: absolute; - width: 100%; padding: 20px; @include clearfix; .cancel-button { - @include blue-button; - border-color: #30649c; + @include white-button; } } } @@ -142,7 +172,7 @@ } .component { - border: 1px solid #d1ddec; + border: 1px solid $lightBluishGrey2; border-radius: 3px; background: #fff; @include transition(none); @@ -157,7 +187,8 @@ } &.editing { - border-color: #6696d7; + border: 1px solid $lightBluishGrey2; + z-index: 9999; .drag-handle, .component-actions { @@ -173,11 +204,6 @@ position: absolute; top: 7px; right: 9px; - @include transition(opacity .15s); - - a { - color: $darkGrey; - } } .drag-handle { @@ -189,10 +215,10 @@ width: 15px; height: 100%; border-radius: 0 3px 3px 0; - border: 1px solid #d1ddec; - background: url(../img/white-drag-handles.png) center no-repeat #d1ddec; + border: 1px solid $lightBluishGrey2; + background: url(../img/white-drag-handles.png) center no-repeat $lightBluishGrey2; cursor: move; - @include transition(all .15s); + @include transition(none); } } @@ -205,9 +231,6 @@ display: none; padding: 20px; border-radius: 2px 2px 0 0; - @include linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1)); - background-color: $blue; - color: #fff; @include box-shadow(none); .metadata_edit { @@ -224,12 +247,6 @@ } } - .CodeMirror { - border: 1px solid #3c3c3c; - background: #fff; - color: #3c3c3c; - } - h3 { margin-bottom: 10px; font-size: 18px; @@ -446,3 +463,22 @@ display: none; } } + +// editing units from courseware +body.unit { + + .component { + padding-top: 30px; + + .component-actions { + @include box-sizing(border-box); + position: absolute; + width: 811px; + padding: 15px; + top: 0; + left: 0; + border-bottom: 1px solid $lightBluishGrey2; + background: $lightGrey; + } + } +} diff --git a/cms/static/sass/_users.scss b/cms/static/sass/_users.scss index bca9b4f2fb..e107bdbb6d 100644 --- a/cms/static/sass/_users.scss +++ b/cms/static/sass/_users.scss @@ -1,31 +1,8 @@ .users { - .user-overview { - @extend .window; - padding: 30px 40px; - } - - .new-user-button { - @include grey-button; - margin: 5px 8px; - padding: 3px 10px 4px 10px; - font-size: 12px; - - .plus-icon { - position: relative; - top: 1px; - } - } - - .list-header { - @include linear-gradient(top, transparent, rgba(0, 0, 0, .1)); - background-color: #ced2db; - border-radius: 3px 3px 0 0; - } - .new-user-form { display: none; padding: 15px 20px; - background: $mediumGrey; + background-color: $lightBluishGrey2; #result { display: none; @@ -55,21 +32,22 @@ .add-button { @include blue-button; + padding: 5px 20px 9px; } .cancel-button { @include white-button; + padding: 5px 20px 9px; } } .user-list { border: 1px solid $mediumGrey; - border-top: none; - background: $lightGrey; + background: #fff; li { position: relative; - padding: 10px 20px; + padding: 20px; border-bottom: 1px solid $mediumGrey; &:last-child { @@ -81,12 +59,19 @@ } .user-name { - width: 30%; - font-weight: 700; + margin-right: 10px; + font-size: 24px; + font-weight: 300; + } + + .user-email { + font-size: 14px; + font-style: italic; + color: $mediumGrey; } .item-actions { - top: 9px; + top: 24px; } } } diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index 8666dc192c..95ee847b5c 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -13,13 +13,23 @@ $body-line-height: golden-ratio(.875em, 1); $pink: rgb(182,37,104); $error-red: rgb(253, 87, 87); +$baseFontColor: #3c3c3c; $offBlack: #3c3c3c; +$black: rgb(0,0,0); +$white: rgb(255,255,255); $blue: #5597dd; $orange: #edbd3c; $red: #b20610; $green: #108614; $lightGrey: #edf1f5; -$mediumGrey: #ced2db; +$mediumGrey: #b0b6c2; $darkGrey: #8891a1; $extraDarkGrey: #3d4043; -$paleYellow: #fffcf1; \ No newline at end of file +$paleYellow: #fffcf1; +$yellow: rgb(255, 254, 223); +$green: rgb(37, 184, 90); +$brightGreen: rgb(22, 202, 87); +$disabledGreen: rgb(124, 206, 153); +$darkGreen: rgb(52, 133, 76); +$lightBluishGrey: rgb(197, 207, 223); +$lightBluishGrey2: rgb(213, 220, 228); diff --git a/cms/templates/asset_index.html b/cms/templates/asset_index.html index 173b751305..ca205157ab 100644 --- a/cms/templates/asset_index.html +++ b/cms/templates/asset_index.html @@ -35,10 +35,11 @@
-

Asset Library

- Upload New File - + + Upload New Asset + +
diff --git a/cms/templates/edit-tabs.html b/cms/templates/edit-tabs.html index 41dee15a7a..16bca8568b 100644 --- a/cms/templates/edit-tabs.html +++ b/cms/templates/edit-tabs.html @@ -17,10 +17,12 @@ <%block name="content">
-
-

Static Tabs

+
+ + New Page +
-
+

Here you can add and manage additional pages for your course. These pages will be added to the primary navigation menu alongside Courseware, Course Info, Discussion, etc.

@@ -31,9 +33,7 @@ % endfor
  • - - New Tab - +
    • diff --git a/cms/templates/import.html b/cms/templates/import.html index 18d9a1604d..e4f8019714 100644 --- a/cms/templates/import.html +++ b/cms/templates/import.html @@ -8,7 +8,6 @@ <%block name="content">
    -

    Import

    Please read the documentation before attempting an import!

    diff --git a/cms/templates/index.html b/cms/templates/index.html index d41bcc23ac..92987babda 100644 --- a/cms/templates/index.html +++ b/cms/templates/index.html @@ -37,7 +37,7 @@

    My Courses

    % if user.is_active: - New Course + New Course
      %for course, url in courses:
    • diff --git a/cms/templates/manage_users.html b/cms/templates/manage_users.html index 712766eb71..36930f5386 100644 --- a/cms/templates/manage_users.html +++ b/cms/templates/manage_users.html @@ -5,28 +5,28 @@ <%block name="content">
      -

      Users

      - -
      -
      -

      The following list of users have been designated as course staff. This means that these users will have permissions to modify course content. You may add additional course staff below, if you are the course instructor. Please note that they must have already registered and verified their account.

      -
      -
      - %if allow_actions: - - New User - - %endif -
      +
      %if allow_actions: -
      + + New User + + %endif +
      + +
      +

      The following list of users have been designated as course staff. This means that these users will have permissions to modify course content. You may add additional course staff below, if you are the course instructor. Please note that they must have already registered and verified their account.

      +
      + +
      + %endif
        @@ -57,6 +57,7 @@ function showNewUserForm(e) { e.preventDefault(); $newUserForm.slideDown(150); + $newUserForm.find('.email-input').focus(); } function hideNewUserForm(e) { @@ -66,26 +67,37 @@ $('#email').val(''); } + function checkForCancel(e) { + if(e.which == 27) { + e.data.$cancelButton.click(); + } + } + + function addUser(e) { + e.preventDefault(); + + $.ajax({ + url: '${add_user_postback_url}', + type: 'POST', + dataType: 'json', + contentType: 'application/json', + data:JSON.stringify({ 'email': $('#email').val()}), + }).done(function(data) { + if (data.ErrMsg != undefined) + $('#result').show().empty().append(data.ErrMsg); + else + location.reload(); + }); + } + $(document).ready(function() { $newUserForm = $('.new-user-form'); - $newUserForm.find('.cancel-button').bind('click', hideNewUserForm); + var $cancelButton = $newUserForm.find('.cancel-button'); + $newUserForm.bind('submit', addUser); + $cancelButton.bind('click', hideNewUserForm); $('.new-user-button').bind('click', showNewUserForm); - - $('#add_user').click(function() { - $.ajax({ - url: '${add_user_postback_url}', - type: 'POST', - dataType: 'json', - contentType: 'application/json', - data:JSON.stringify({ 'email': $('#email').val()}), - }).done(function(data) { - if (data.ErrMsg != undefined) - $('#result').show().empty().append(data.ErrMsg); - else - location.reload(); - }) - }); + $body.bind('keyup', { $cancelButton: $cancelButton }, checkForCancel); $('.remove-user').click(function() { $.ajax({ diff --git a/cms/templates/overview.html b/cms/templates/overview.html index 4cfcfac2fc..9e8742db24 100644 --- a/cms/templates/overview.html +++ b/cms/templates/overview.html @@ -98,10 +98,11 @@
        -

        Courseware

        -
        -
        - New Section +
        + New Section + Collapse All +
        +
        % for section in sections:
        diff --git a/cms/templates/settings.html b/cms/templates/settings.html index 559df38cf4..050eba6957 100644 --- a/cms/templates/settings.html +++ b/cms/templates/settings.html @@ -93,7 +93,6 @@ from contentstore import utils
        - e.g. 101x This is used in your course URL, and cannot be changed
        @@ -231,8 +230,8 @@ from contentstore import utils
        - - Video restrictions go here + + Video restrictions go here
      @@ -251,7 +250,7 @@ from contentstore import utils
      - Time students should spend on all course work + Time spent on all course work
      @@ -405,7 +404,7 @@ from contentstore import utils
      - leeway on due dates + leeway on due dates
      @@ -421,8 +420,8 @@ from contentstore import utils
      - - New Assignment Type + + New Assignment Type
    @@ -727,4 +726,5 @@ from contentstore import utils
    +
    diff --git a/cms/templates/unit.html b/cms/templates/unit.html index f2601c7c7e..523d956f06 100644 --- a/cms/templates/unit.html +++ b/cms/templates/unit.html @@ -32,12 +32,9 @@ % for id in components:
  • % endfor -
  • - - New Component - +
  • -
    Select Component Type
    +
    Add New Component
      % for type in sorted(component_templates.keys()):
    • @@ -48,7 +45,6 @@
      • % endfor
    - Cancel
    % for type, templates in sorted(component_templates.items()):
    diff --git a/cms/templates/widgets/header.html b/cms/templates/widgets/header.html index f65becb9c7..ac1379ebe8 100644 --- a/cms/templates/widgets/header.html +++ b/cms/templates/widgets/header.html @@ -1,31 +1,37 @@ <%! from django.core.urlresolvers import reverse %> <% active_tab_class = 'active-tab-' + active_tab if active_tab else '' %> -
    -