diff --git a/cms/djangoapps/contentstore/features/courses.py b/cms/djangoapps/contentstore/features/courses.py index db8e20722a..e394165f08 100644 --- a/cms/djangoapps/contentstore/features/courses.py +++ b/cms/djangoapps/contentstore/features/courses.py @@ -59,4 +59,4 @@ def i_am_on_tab(step, tab_name): @step('I see a link for adding a new section$') def i_see_new_section_link(step): link_css = 'a.new-courseware-section-button' - assert_css_with_text(link_css, 'New Section') + assert_css_with_text(link_css, '+ New Section') diff --git a/cms/djangoapps/contentstore/tests/test_contentstore.py b/cms/djangoapps/contentstore/tests/test_contentstore.py index a4ce54f950..b79d86b52f 100644 --- a/cms/djangoapps/contentstore/tests/test_contentstore.py +++ b/cms/djangoapps/contentstore/tests/test_contentstore.py @@ -342,7 +342,7 @@ class ContentStoreTest(ModuleStoreTestCase): # Create a course so there is something to view resp = self.client.get(reverse('index')) self.assertContains(resp, - '

My Courses

', + '

My Courses

', status_code=200, html=True) diff --git a/cms/djangoapps/contentstore/views.py b/cms/djangoapps/contentstore/views.py index 926fd05d68..6d5905afe7 100644 --- a/cms/djangoapps/contentstore/views.py +++ b/cms/djangoapps/contentstore/views.py @@ -131,7 +131,8 @@ def index(request): reverse('course_index', args=[ course.location.org, course.location.course, - course.location.name])) + course.location.name]), + get_lms_link_for_item(course.location)) for course in courses], 'user': request.user, 'disable_course_creation': settings.MITX_FEATURES.get('DISABLE_COURSE_CREATION', False) and not request.user.is_staff @@ -172,6 +173,8 @@ def course_index(request, org, course, name): if not has_access(request.user, location): raise PermissionDenied() + lms_link = get_lms_link_for_item(location) + upload_asset_callback_url = reverse('upload_asset', kwargs={ 'org': org, 'course': course, @@ -184,6 +187,7 @@ def course_index(request, org, course, name): return render_to_response('overview.html', { 'active_tab': 'courseware', 'context_course': course, + 'lms_link': lms_link, 'sections': sections, 'course_graders': json.dumps(CourseGradingModel.fetch(course.location).graders), 'parent_location': course.location, diff --git a/cms/static/coffee/src/views/tabs.coffee b/cms/static/coffee/src/views/tabs.coffee index 5a826c1794..9fbe4e5789 100644 --- a/cms/static/coffee/src/views/tabs.coffee +++ b/cms/static/coffee/src/views/tabs.coffee @@ -1,6 +1,4 @@ class CMS.Views.TabsEdit extends Backbone.View - events: - 'click .new-tab': 'addNewTab' initialize: => @$('.component').each((idx, element) => @@ -13,6 +11,7 @@ class CMS.Views.TabsEdit extends Backbone.View ) ) + @options.mast.find('.new-tab').on('click', @addNewTab) @$('.components').sortable( handle: '.drag-handle' update: @tabMoved diff --git a/cms/static/img/preview-lms-staticpages.png b/cms/static/img/preview-lms-staticpages.png new file mode 100644 index 0000000000..05a62f7c7f Binary files /dev/null and b/cms/static/img/preview-lms-staticpages.png differ diff --git a/cms/static/js/base.js b/cms/static/js/base.js index f9a3f9e80d..d8b32cb0e8 100644 --- a/cms/static/js/base.js +++ b/cms/static/js/base.js @@ -43,6 +43,12 @@ $(document).ready(function () { $('body').addClass('js'); + // lean/simple modal + $('a[rel*=modal]').leanModal({overlay : 0.80, closeButton: '.action-modal-close' }); + $('a.action-modal-close').click(function(e){ + (e).preventDefault(); + }); + // nav - dropdown related $body.click(function (e) { $('.nav-dropdown .nav-item .wrapper-nav-sub').removeClass('is-shown'); @@ -638,7 +644,7 @@ function addNewCourse(e) { $(e.target).hide(); var $newCourse = $($('#new-course-template').html()); var $cancelButton = $newCourse.find('.new-course-cancel'); - $('.new-course-button').after($newCourse); + $('.inner-wrapper').prepend($newCourse); $newCourse.find('.new-course-name').focus().select(); $newCourse.find('form').bind('submit', saveNewCourse); $cancelButton.bind('click', cancelNewCourse); @@ -822,4 +828,4 @@ function saveSetSectionScheduleDate(e) { hideModal(); }); -} +} \ No newline at end of file diff --git a/cms/static/js/views/course_info_edit.js b/cms/static/js/views/course_info_edit.js index cb396b2a7f..277a15b57c 100644 --- a/cms/static/js/views/course_info_edit.js +++ b/cms/static/js/views/course_info_edit.js @@ -10,7 +10,7 @@ CMS.Views.CourseInfoEdit = Backbone.View.extend({ render: function() { // instantiate the ClassInfoUpdateView and delegate the proper dom to it new CMS.Views.ClassInfoUpdateView({ - el: this.$('#course-update-view'), + el: $('body.updates'), collection: this.model.get('updates') }); @@ -27,10 +27,10 @@ CMS.Views.ClassInfoUpdateView = Backbone.View.extend({ // collection is CourseUpdateCollection events: { "click .new-update-button" : "onNew", - "click .save-button" : "onSave", - "click .cancel-button" : "onCancel", - "click .edit-button" : "onEdit", - "click .delete-button" : "onDelete" + "click #course-update-view .save-button" : "onSave", + "click #course-update-view .cancel-button" : "onCancel", + "click .post-actions > .edit-button" : "onEdit", + "click .post-actions > .delete-button" : "onDelete" }, initialize: function() { diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index c229377dd0..5d4bc7c773 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -50,7 +50,142 @@ h1 { // ==================== -// layout - basic +// layout - basic page header +.wrapper-mast { + margin: 0; + padding: 0 $baseline; + position: relative; + + .mast, .metadata { + @include clearfix(); + @include font-size(16); + position: relative; + max-width: $fg-max-width; + min-width: $fg-min-width; + width: flex-grid(12); + margin: 0 auto $baseline auto; + color: $gray-d2; + } + + .mast { + border-bottom: 1px solid $gray-l4; + padding-bottom: ($baseline/2); + + .title-sub { + @include font-size(14); + position: relative; + top: ($baseline/4); + display: block; + margin: 0; + color: $gray-l2; + font-weight: 400; + } + + .title, .title-1 { + @include font-size(32); + margin: 0; + padding: 0; + font-weight: 600; + color: $gray-d3; + } + + .nav-hierarchy { + @include font-size(14); + display: block; + margin: 0; + color: $gray-l2; + font-weight: 400; + + .nav-item { + display: inline; + vertical-align: middle; + margin-right: ($baseline/4); + + &:after { + content: ">>"; + margin-left: ($baseline/4); + } + + &:last-child { + margin-right: 0; + + &:after { + content: none; + } + } + } + } + + // layout with actions + .title { + width: flex-grid(12); + } + + // layout with actions + &.has-actions { + @include clearfix(); + + .title { + float: left; + width: flex-grid(6,12); + margin-right: flex-gutter(); + } + + .nav-actions { + position: relative; + bottom: -($baseline*0.75); + float: right; + width: flex-grid(6,12); + text-align: right; + + .nav-item { + display: inline-block; + vertical-align: top; + margin-right: ($baseline/2); + + &:last-child { + margin-right: 0; + } + } + + // buttons + .button { + padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2) !important; + font-weight: 400 !important; + } + + .new-button { + font-weight: 700 !important; + } + + .view-button { + + font-weight: 700 !important; + } + + .upload-button .icon-create { + @include font-size(18); + margin-top: ($baseline/4); + } + } + } + + // layout with actions + &.has-subtitle { + + .nav-actions { + bottom: -($baseline*1.5); + } + } + } + + // page metadata/action bar + .metadata { + + } +} + +// layout - basic page content .wrapper-content { margin: 0; padding: 0 $baseline; @@ -89,8 +224,39 @@ h1 { } .introduction { + @include box-sizing(border-box); @include font-size(14); + width: flex-grid(12); margin: 0 0 $baseline 0; + + .copy strong { + font-weight: 600; + } + + &.has-links { + @include clearfix(); + + .copy { + float: left; + width: flex-grid(8,12); + margin-right: flex-gutter(); + } + + .nav-introduction-supplementary { + @include font-size(13); + float: right; + width: flex-grid(4,12); + display: block; + text-align: right; + + .icon { + @include font-size(14); + display: inline-block; + vertical-align: middle; + margin-right: ($baseline/4); + } + } + } } } @@ -98,6 +264,7 @@ h1 { @include box-sizing(border-box); } +// layout - primary content .content-primary { .title-1, .title-2, .title-3, .title-4, .title-5, .title-5 { @@ -129,6 +296,7 @@ h1 { } } +// layout - supplemental content .content-supplementary { .bit { @@ -494,22 +662,49 @@ hr.divide { .new-button { @include green-button; - font-size: 13px; + @include font-size(13); padding: 8px 20px 10px; text-align: center; &.big { display: block; } + + .icon-create { + display: inline-block; + vertical-align: middle; + margin-right: ($baseline/4); + margin-top: ($baseline/10); + line-height: 0; + } +} + +.view-button { + @include blue-button; + @include font-size(13); + text-align: center; + + &.big { + display: block; + } + + .icon-view { + @include font-size(15); + display: inline-block; + vertical-align: middle; + margin-right: ($baseline/2); + margin-top: ($baseline/5); + line-height: 0; + } } .edit-button.standard, .delete-button.standard { - float: left; + @include font-size(12); @include white-button; + float: left; padding: 3px 10px 4px; margin-left: 7px; - font-size: 12px; font-weight: 400; .edit-icon, @@ -579,6 +774,72 @@ hr.divide { // ==================== +// js dependant +body.js { + + // lean/simple modal window + .content-modal { + @include border-bottom-radius(2px); + @include box-sizing(border-box); + @include box-shadow(0 2px 4px $shadow-d1); + position: relative; + display: none; + width: 700px; + overflow: hidden; + border: 1px solid $gray-d1; + padding: ($baseline); + background: $white; + + .action-modal-close { + @include transition(top .25s ease-in-out); + @include border-bottom-radius(3px); + position: absolute; + top: -3px; + right: $baseline; + padding: ($baseline/4) ($baseline/2) 0 ($baseline/2); + background: $gray-l3; + text-align: center; + + .label { + @include text-sr(); + } + + .ss-icon { + @include font-size(18); + color: $white; + } + + &:hover { + background: $blue; + top: 0; + } + } + + img { + @include box-sizing(border-box); + width: 100%; + overflow-y: scroll; + padding: ($baseline/10); + border: 1px solid $gray-l4; + } + + .title { + @include font-size(18); + margin: 0 0 ($baseline/2) 0; + font-weight: 600; + color: $gray-d3; + } + + .description { + @include font-size(13); + margin-top: ($baseline/2); + color: $gray-l1; + } + } +} + +// ==================== + // works in progress body.hide-wip { diff --git a/cms/static/sass/_course-info.scss b/cms/static/sass/_course-info.scss index f36172c4df..5a2a5a9432 100644 --- a/cms/static/sass/_course-info.scss +++ b/cms/static/sass/_course-info.scss @@ -37,6 +37,11 @@ padding: 34px 0 42px; border-top: 1px solid #cbd1db; + &:first-child { + padding-top: 0; + border: none; + } + &.editing { position: relative; z-index: 1001; diff --git a/cms/static/sass/_dashboard.scss b/cms/static/sass/_dashboard.scss index 0a9e992650..0d4d046e57 100644 --- a/cms/static/sass/_dashboard.scss +++ b/cms/static/sass/_dashboard.scss @@ -6,19 +6,27 @@ @include box-shadow(0 1px 2px rgba(0, 0, 0, .1)); li { + position: relative; border-bottom: 1px solid $mediumGrey; &:last-child { border-bottom: none; } - } - a { - padding: 20px 25px; - line-height: 1.3; - - &:hover { - background: $paleYellow; + .class-link { + z-index: 100; + display: block; + padding: 20px 25px; + line-height: 1.3; + + &:hover { + background: $paleYellow; + + + .view-live-button { + opacity: 1.0; + pointer-events: auto; + } + } } } @@ -34,6 +42,22 @@ margin-right: 20px; color: #3c3c3c; } + + // view live button + .view-live-button { + z-index: 10000; + position: absolute; + top: 15px; + right: $baseline; + padding: ($baseline/4) ($baseline/2); + opacity: 0; + pointer-events: none; + + &:hover { + opacity: 1.0; + pointer-events: auto; + } + } } .new-course { diff --git a/cms/static/sass/_index.scss b/cms/static/sass/_index.scss index b5d042b5cc..e0f6d0f2b7 100644 --- a/cms/static/sass/_index.scss +++ b/cms/static/sass/_index.scss @@ -350,67 +350,4 @@ } } } - - // js dependant - &.js { - - .content-modal { - @include border-bottom-radius(2px); - @include box-sizing(border-box); - @include box-shadow(0 2px 4px $shadow-d1); - position: relative; - display: none; - width: 700px; - overflow: hidden; - border: 1px solid $gray-d1; - padding: ($baseline); - background: $white; - - .action-modal-close { - @include transition(top .25s ease-in-out); - @include border-bottom-radius(3px); - position: absolute; - top: -3px; - right: $baseline; - padding: ($baseline/4) ($baseline/2) 0 ($baseline/2); - background: $gray-l3; - text-align: center; - - .label { - @include text-sr(); - } - - .ss-icon { - @include font-size(18); - color: $white; - } - - &:hover { - background: $blue; - top: 0; - } - } - - img { - @include box-sizing(border-box); - width: 100%; - overflow-y: scroll; - padding: ($baseline/10); - border: 1px solid $gray-l4; - } - - .title { - @include font-size(18); - margin: 0 0 ($baseline/2) 0; - font-weight: 600; - color: $gray-d3; - } - - .description { - @include font-size(13); - margin-top: ($baseline/2); - color: $gray-l1; - } - } - } -} +} \ No newline at end of file diff --git a/cms/static/sass/_static-pages.scss b/cms/static/sass/_static-pages.scss index 4838fb8a87..138e817769 100644 --- a/cms/static/sass/_static-pages.scss +++ b/cms/static/sass/_static-pages.scss @@ -28,8 +28,9 @@ border-radius: 0; &.new-component-item { - margin-top: 20px; background: transparent; + border: none; + @include box-shadow(none); } } diff --git a/cms/templates/asset_index.html b/cms/templates/asset_index.html index 5213fd25c9..5ace98df56 100644 --- a/cms/templates/asset_index.html +++ b/cms/templates/asset_index.html @@ -33,12 +33,27 @@ +
+
+
+ Course Content +

Files & Uploads

+
+ + +
+
+
- - Upload New Asset -
diff --git a/cms/templates/course_info.html b/cms/templates/course_info.html index 32a343c49c..a68a0da76a 100644 --- a/cms/templates/course_info.html +++ b/cms/templates/course_info.html @@ -42,16 +42,38 @@ <%block name="content"> +
+
+
+ Course Content +

Course Updates

+
+ + +
+
+ +
+
+
+

Course updates are announcements or notifications you want to share with your class. Other course authors have used them for important exam/date reminders, change in schedules, and to call out any important steps students need to be aware of.

+
+
+
+
-

Course Info

diff --git a/cms/templates/edit-tabs.html b/cms/templates/edit-tabs.html index b8a7f6679e..1a44de60c1 100644 --- a/cms/templates/edit-tabs.html +++ b/cms/templates/edit-tabs.html @@ -9,25 +9,49 @@ el: $('.main-wrapper'), model: new CMS.Models.Module({ id: '${context_course.location}' - }) + }), + mast: $('.wrapper-mast') }); <%block name="content"> +
+
+
+ Course Content +

Static Pages

+
+ + +
+
+ +
+
+
+

Static Pages are additional pages that supplement your Courseware. Other course authors have used them to share a syllabus, calendar, handouts, and more.

+ +
+
+
+
-
-

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.

-
- -
- - New Page - -
    @@ -43,4 +67,17 @@
+ +
+

How Static Pages are Used in Your Course

+
+ Preview of how Static Pages are used in your course +
These pages will be presented in your course's main navigation alongside Courseware, Course Info, Discussion, etc.
+
+ + + ␡ + close modal + +
\ No newline at end of file diff --git a/cms/templates/export.html b/cms/templates/export.html index 0f68548a84..27045d82ce 100644 --- a/cms/templates/export.html +++ b/cms/templates/export.html @@ -6,6 +6,15 @@ <%block name="bodyclass">is-signedin course tools export <%block name="content"> +
+
+
+ Tools +

Course Export

+
+
+
+
diff --git a/cms/templates/howitworks.html b/cms/templates/howitworks.html index b3e3f70eda..1cf9b17710 100644 --- a/cms/templates/howitworks.html +++ b/cms/templates/howitworks.html @@ -28,7 +28,7 @@ Studio Helps You Keep Your Courses Organized
Studio Helps You Keep Your Courses Organized
- + @@ -62,7 +62,7 @@ Learning is More than Just Lectures
Learning is More than Just Lectures
- + @@ -96,7 +96,7 @@ Studio Gives You Simple, Fast, and Incremental Publishing. With Friends.
Studio Gives You Simple, Fast, and Incremental Publishing. With Friends.
- + @@ -152,7 +152,7 @@ - ␡ + ␡ close modal
@@ -165,7 +165,7 @@ - ␡ + ␡ close modal
@@ -178,22 +178,8 @@ - ␡ + ␡ close modal
- - -<%block name="jsextra"> - \ No newline at end of file diff --git a/cms/templates/import.html b/cms/templates/import.html index ab06f17787..b0a9f04903 100644 --- a/cms/templates/import.html +++ b/cms/templates/import.html @@ -6,6 +6,15 @@ <%block name="bodyclass">is-signedin course tools import <%block name="content"> +
+
+
+ Tools +

Course Import

+
+
+
+
diff --git a/cms/templates/index.html b/cms/templates/index.html index ed50b8ccb3..fdb46612a0 100644 --- a/cms/templates/index.html +++ b/cms/templates/index.html @@ -33,35 +33,57 @@ <%block name="content"> -
-
-

My Courses

-
- % if user.is_active: - % if not disable_course_creation: - New Course - %endif - - % else: -
-

- In order to start authoring courses using edX studio, please click on the activation link in your email. -

-
- % endif -
-
-
- +
+
+
+

My Courses

+
+ + % if user.is_active: + + % endif +
+
+ +
+
+
+

Welcome, ${ user.username }. Here are all of the courses you are currently authoring in Studio:

+
+
+
+ +
+
+
+ % if user.is_active: + + % else: +
+

+ In order to start authoring courses using edX Studio, please click on the activation link in your email. +

+
+ % endif +
+
+
+ \ No newline at end of file diff --git a/cms/templates/manage_users.html b/cms/templates/manage_users.html index b424f030ca..722e756203 100644 --- a/cms/templates/manage_users.html +++ b/cms/templates/manage_users.html @@ -4,15 +4,28 @@ <%block name="content"> +
+
+
+ Course Settings +

Course Team

+
+ + +
+
+
-
- %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.

diff --git a/cms/templates/overview.html b/cms/templates/overview.html index ca53c456a2..91a1107726 100644 --- a/cms/templates/overview.html +++ b/cms/templates/overview.html @@ -120,12 +120,32 @@
+
+
+
+ Course Content +

Course Outline

+
+ + +
+
+
-
- New Section - up Collapse All Sections -
% for section in sections:
diff --git a/cms/templates/settings.html b/cms/templates/settings.html index 3b10f76afd..32d24b77e6 100644 --- a/cms/templates/settings.html +++ b/cms/templates/settings.html @@ -42,17 +42,17 @@ from contentstore import utils <%block name="content"> -
-
-
+
+
+
Settings

Schedule & Details

-
- - +
+
+
+
+
diff --git a/cms/templates/settings_graders.html b/cms/templates/settings_graders.html index 9094676898..61cb59e995 100644 --- a/cms/templates/settings_graders.html +++ b/cms/templates/settings_graders.html @@ -39,17 +39,17 @@ from contentstore import utils <%block name="content"> -
-
-
+
+
+
Settings

Grading

-
- - +
+
+
+
+
diff --git a/cms/templates/widgets/header.html b/cms/templates/widgets/header.html index 53c5193f3d..7b516ececd 100644 --- a/cms/templates/widgets/header.html +++ b/cms/templates/widgets/header.html @@ -17,7 +17,7 @@