Skip to content

E
edx-platform
Commit b4e1e971 by tasawernawaz
Options

ECOM-3201 

Updated dashboard UI for empty list of courses and programs
parent 717c36bd
Showing with 142 additions and 50 deletions
common/djangoapps/student/tests/tests.py
......@@ -501,8 +501,8 @@ 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")
......
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();
......
lms/static/js/learner_dashboard/views/collection_list_view.js
;(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);
}
}
});
}
......
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();
......
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 {
......
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);
}
}
}
}
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
......
lms/templates/learner_dashboard/empty_programs_list.underscore 0 → 100644
<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>
lms/templates/navigation.html
......@@ -67,7 +67,7 @@ site_status_msg = get_site_status_msg(course_id)
<%block name="navigation_global_links_authenticated">
% if settings.FEATURES.get('COURSES_ARE_BROWSABLE') and not show_program_listing:
<li class="nav-global-01">
<a href="${marketing_link('COURSES')}">${_('Find Courses')}</a>
<a href="${marketing_link('COURSES')}">${_('Explore courses')}</a>
</li>
% endif
% if show_program_listing:
......@@ -145,7 +145,7 @@ site_status_msg = get_site_status_msg(course_id)
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
% if settings.FEATURES.get('ENABLE_COURSE_DISCOVERY'):
<li class="nav-global-05">
<a class="cta cta-discovery" href="/courses">${_("Find Courses")}</a>
<a class="cta cta-discovery" href="/courses">${_("Explore courses")}</a>
</li>
%endif
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
......
themes/edx.org/lms/templates/dashboard.html
......@@ -105,11 +105,11 @@ from openedx.core.djangolib.js_utils import dump_js_escaped_json, js_escaped_str
</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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment