diff --git a/common/djangoapps/student/tests/tests.py b/common/djangoapps/student/tests/tests.py
index 25c9688ef69947c912a5bc5e4b58ce3a3e5183f9..fa792b52a737cac4a74191de171d859d447d1d77 100644
--- a/common/djangoapps/student/tests/tests.py
+++ b/common/djangoapps/student/tests/tests.py
@@ -501,11 +501,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 8384ed9a944e6f4b00f98e89cfaff8935b14e3b7..d204b7ff99c1865888fe373ed67e0064c5940c9c 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 ab9fd18a5c20c6b76bb3aff883d3d08f2887456f..1f8e7a443856b91227db3277fbe0ded6b870a753 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 1499fce40bf1e907be4468d7ebafd785b4cc0ef1..fcfaf1ffbd90911bd170aa5da5847161cb07cc3c 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 d181151b44997a6d2d766d4a6b6f128390755d28..b502bb3712e9261fce15639410b77cdb11d0bb19 100644
--- a/lms/static/sass/multicourse/_dashboard.scss
+++ b/lms/static/sass/multicourse/_dashboard.scss
@@ -212,61 +212,59 @@
}
}
-// +Dashboard - Course Listing
-// ====================
-.dashboard {
- .my-courses {
- @include float(left);
- margin: 0;
- width: flex-grid(9);
-
-
- .wrapper-header-courses {
- border-bottom: 4px solid $border-color-l4;
- margin-bottom: $baseline;
-
- .header-courses {
- @extend %t-title5;
- @include padding-right($baseline/2);
- }
- }
-
- // CASE: empty dashboard
+// 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;
- 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;
+ background-color: $blue;
+ border: 1px solid $blue;
box-shadow: 0 1px 8px 0 $shadow-l1;
@include box-sizing(border-box);
- color: $base-font-color;
+ color: $white;
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);
+ margin-top: ($baseline/4);
+ margin-left: ($baseline/4);
+ padding: 15px 20px;
&:hover, &:focus {
- color: $link-color;
+ background: $blue-l2;
text-decoration: none;
}
}
}
- // ====================
+// +Dashboard - Course Listing
+// ====================
+.dashboard {
+
+ .my-courses {
+ @include float(left);
+ margin: 0;
+ width: flex-grid(9);
+
+
+ .wrapper-header-courses {
+ border-bottom: 4px solid $border-color-l4;
+ margin-bottom: $baseline;
+
+ .header-courses {
+ @extend %t-title5;
+ @include padding-right($baseline/2);
+ }
+ }
// UI: course list
.listing-courses {
diff --git a/lms/static/sass/views/_program-list.scss b/lms/static/sass/views/_program-list.scss
index b555e13ca82cca4e4d40c642696c6431c55b6605..f20dee0a73c0177ba48248da6cf2aa9f48d53706 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 fa54c3e54058c0bf95aca32ecd14beb591872ed5..be5a13baa966571feeaf1c6ea471c841b362ebc7 100644
--- a/lms/templates/dashboard.html
+++ b/lms/templates/dashboard.html
@@ -104,12 +104,13 @@ from openedx.core.djangolib.markup import Text, HTML
</ul>
% else:
<section class="empty-dashboard-message">
- <p>${_("Looks like you haven't enrolled in any courses yet.")}</p>
+ <p>${_("You are not enrolled in any courses yet.")}</p>
% if settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
<a href="${marketing_link('COURSES')}">
- ${_("Find courses now!")}
+ ${_("Explore courses")}
</a>
+
%endif
</section>
% 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 0000000000000000000000000000000000000000..0fa80cf0f250d7723a3c74ec4f06aef9f1d03340
--- /dev/null
+++ b/lms/templates/learner_dashboard/empty_programs_list.underscore
@@ -0,0 +1,9 @@
+
+ <section class="empty-programs-message">
+ <p><%- gettext('You are not enrolled in any XSeries Programs yet.') %></p>
+ <a class="find-xseries-programs" href="<%- xseriesUrl %>">
+ <i class="action-xseries-icon" aria-hidden="true"></i>
+ <span><%- gettext('Explore XSeries Programs') %></span>
+ </a>
+ </section>
+