diff --git a/common/djangoapps/student/tests/tests.py b/common/djangoapps/student/tests/tests.py index d93bb56a4e..edbe5b0d39 100644 --- a/common/djangoapps/student/tests/tests.py +++ b/common/djangoapps/student/tests/tests.py @@ -499,11 +499,11 @@ class DashboardTest(ModuleStoreTestCase): self.client.login(username="jack", password="test") response = self.client.get(reverse("dashboard")) - # "Find courses" is shown in the side panel - self.assertContains(response, "Find courses") + # "Explore courses" is shown in the side panel + self.assertContains(response, "Explore courses") # But other links are hidden in the navigation - self.assertNotContains(response, "How it Works") + self.assertNotContains(response, "How it works") self.assertNotContains(response, "Schools & Partners") def test_course_mode_info_with_honor_enrollment(self): diff --git a/lms/static/js/learner_dashboard/program_list_factory.js b/lms/static/js/learner_dashboard/program_list_factory.js index 8384ed9a94..d204b7ff99 100644 --- a/lms/static/js/learner_dashboard/program_list_factory.js +++ b/lms/static/js/learner_dashboard/program_list_factory.js @@ -12,6 +12,7 @@ new CollectionListView({ el: '.program-cards-container', childView: ProgramCardView, + context: options, collection: new ProgramCollection(options.programsData) }).render(); diff --git a/lms/static/js/learner_dashboard/views/collection_list_view.js b/lms/static/js/learner_dashboard/views/collection_list_view.js index ab9fd18a5c..1f8e7a4438 100644 --- a/lms/static/js/learner_dashboard/views/collection_list_view.js +++ b/lms/static/js/learner_dashboard/views/collection_list_view.js @@ -1,22 +1,40 @@ ;(function (define) { 'use strict'; - define(['backbone'], - function( - Backbone - ) { + define(['backbone', + 'jquery', + 'underscore', + 'gettext', + 'text!../../../templates/learner_dashboard/empty_programs_list.underscore' + ], + function (Backbone, + $, + _, + gettext, + emptyProgramsListTpl) { return Backbone.View.extend({ initialize: function(data) { this.childView = data.childView; + this.context = data.context; }, render: function() { - var childList = []; - this.collection.each(function(program){ - var child = new this.childView({model:program}); - childList.push(child.el); - }, this); - this.$el.html(childList); + var childList, tpl; + + if (!this.collection.length) { + if (this.context.xseriesUrl) { + //Only show the xseries advertising panel if the link is passed in + tpl = _.template(emptyProgramsListTpl); + this.$el.html(tpl(this.context)); + } + } else { + childList = []; + this.collection.each(function (program) { + var child = new this.childView({model: program}); + childList.push(child.el); + }, this); + this.$el.html(childList); + } } }); } diff --git a/lms/static/js/spec/learner_dashboard/collection_list_view_spec.js b/lms/static/js/spec/learner_dashboard/collection_list_view_spec.js index 1499fce40b..fcfaf1ffbd 100644 --- a/lms/static/js/spec/learner_dashboard/collection_list_view_spec.js +++ b/lms/static/js/spec/learner_dashboard/collection_list_view_spec.js @@ -95,6 +95,7 @@ define([ view = new CollectionListView({ el: '.program-cards-container', childView: ProgramCardView, + context: {'xseriesUrl': '/programs'}, collection: programCollection }); view.render(); diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss index d181151b44..b502bb3712 100644 --- a/lms/static/sass/multicourse/_dashboard.scss +++ b/lms/static/sass/multicourse/_dashboard.scss @@ -212,9 +212,44 @@ } } +// CASE: empty dashboard + .empty-dashboard-message { + border: 3px solid $gray-l4; + background: $gray-l6; + padding: ($baseline*2) 0; + text-align: center; + + p { + @include font-size(24); + color: $lighter-base-font-color; + margin-bottom: $baseline; + text-shadow: 0 1px rgba(255,255,255, 0.6); + } + + a { + background-color: $blue; + border: 1px solid $blue; + box-shadow: 0 1px 8px 0 $shadow-l1; + @include box-sizing(border-box); + color: $white; + font-family: $sans-serif; + display: inline-block; + letter-spacing: 1px; + margin-top: ($baseline/4); + margin-left: ($baseline/4); + padding: 15px 20px; + + &:hover, &:focus { + background: $blue-l2; + text-decoration: none; + } + } + } + // +Dashboard - Course Listing // ==================== .dashboard { + .my-courses { @include float(left); margin: 0; @@ -231,43 +266,6 @@ } } - // CASE: empty dashboard - .empty-dashboard-message { - padding: ($baseline*2) 0; - text-align: center; - - p { - color: $lighter-base-font-color; - font-style: italic; - margin-bottom: $baseline; - text-shadow: 0 1px rgba(255,255,255, 0.6); - } - - a { - background: rgb(240,240,240); - @include background-image($button-bg-image); - background-color: $button-bg-color; - border: 1px solid $border-color-2; - border-radius: 4px; - box-shadow: 0 1px 8px 0 $shadow-l1; - @include box-sizing(border-box); - color: $base-font-color; - font-family: $sans-serif; - display: inline-block; - letter-spacing: 1px; - @include margin-left($baseline/4); - padding: 5px 10px; - text-shadow: 0 1px rgba(255,255,255, 0.6); - - &:hover, &:focus { - color: $link-color; - text-decoration: none; - } - } - } - - // ==================== - // UI: course list .listing-courses { @extend %ui-no-list; diff --git a/lms/static/sass/views/_program-list.scss b/lms/static/sass/views/_program-list.scss index b555e13ca8..f20dee0a73 100644 --- a/lms/static/sass/views/_program-list.scss +++ b/lms/static/sass/views/_program-list.scss @@ -86,3 +86,67 @@ $pl-button-color: #0079bc; @include span-columns(3); } } + +// CASE: empty list of programs + .empty-programs-message { + border: 3px solid $gray-l4; + background: $gray-l6; + padding: ($baseline*2) 0; + text-align: center; + + p { + @include font-size(24); + color: $lighter-base-font-color; + margin-bottom: $baseline; + text-shadow: 0 1px rgba(255,255,255, 0.6); + } + + a { + @include box-sizing(border-box); + background-color: $blue; + border: 1px solid $blue; + box-shadow: 0 1px 8px 0 $shadow-l1; + color: $white; + font-family: $sans-serif; + display: inline-block; + letter-spacing: 1px; + margin-top: ($baseline/4); + margin-left: ($baseline/4); + padding: 15px 20px; + + &:hover, &:focus { + background: $blue-l2; + text-decoration: none; + } + } + + .find-xseries-programs { + @extend %btn-pl-black-base; + .action-xseries-icon { + @include float(left); + @include margin-right($baseline*0.4); + + display: inline; + background: url('#{$static-path}/images/icon-sm-xseries-white.png') no-repeat; + background-color: transparent; + + width: ($baseline*1.1); + height: ($baseline*1.1); + } + &:hover, + &:focus { + + .action-xseries-icon { + @include float(left); + @include margin-right($baseline*0.4); + + display: inline; + background: url('#{$static-path}/images/icon-sm-xseries-black.png') no-repeat; + background-color: transparent; + + width: ($baseline*1.1); + height: ($baseline*1.1); + } + } + } + } diff --git a/lms/templates/dashboard.html b/lms/templates/dashboard.html index 0550c5c0d5..87a36932b3 100644 --- a/lms/templates/dashboard.html +++ b/lms/templates/dashboard.html @@ -103,12 +103,13 @@ from openedx.core.djangolib.js_utils import dump_js_escaped_json, js_escaped_str % else:
-

${_("Looks like you haven't enrolled in any courses yet.")}

+

${_("You are not enrolled in any courses yet.")}

% if settings.FEATURES.get('COURSES_ARE_BROWSABLE'): - ${_("Find courses now!")} + ${_("Explore courses")} + %endif
% endif diff --git a/lms/templates/learner_dashboard/empty_programs_list.underscore b/lms/templates/learner_dashboard/empty_programs_list.underscore new file mode 100644 index 0000000000..0fa80cf0f2 --- /dev/null +++ b/lms/templates/learner_dashboard/empty_programs_list.underscore @@ -0,0 +1,9 @@ + +
+

<%- gettext('You are not enrolled in any XSeries Programs yet.') %>

+ + + <%- gettext('Explore XSeries Programs') %> + +
+