Skip to content

E
edx-platform
Commit bf08c6ed by Matthew Piatetsky Committed by GitHub
Options

Merge pull request #14698 from edx/ECOM-6601 

ECOM-6601 Update display of progress on programs dashboard
parents 9330cca5 f9f51192
Showing with 105 additions and 80 deletions
lms/static/js/learner_dashboard/views/program_card_view.js
......@@ -54,11 +54,6 @@
},
postRender: function() {
// Add describedby to parent only if progess is present
if (this.progressModel) {
this.$el.attr('aria-describedby', 'status-' + this.model.get('uuid'));
}
if (navigator.userAgent.indexOf('MSIE') !== -1 ||
navigator.appVersion.indexOf('Trident/') > 0) {
/* Microsoft Internet Explorer detected in. */
......
lms/static/js/spec/learner_dashboard/program_card_view_spec.js
......@@ -114,18 +114,13 @@ define([
expect(view.reLoadBannerImage).not.toThrow(message);
});
it('should calculate the correct percentages for progress bars', function() {
expect(view.$('.complete').css('width')).toEqual('40%');
expect(view.$('.in-progress').css('width')).toEqual('20%');
it('should show the right number of progress bar segments', function() {
expect(view.$('.progress-bar .completed').length).toEqual(4);
expect(view.$('.progress-bar .enrolled').length).toEqual(2);
});
it('should display the correct completed courses message', function() {
var programProgress = _.findWhere(userProgress, {uuid: 'a87e5eac-3c93-45a1-a8e1-4c79ca8401c8'}),
completed = programProgress.completed,
total = completed + programProgress.in_progress + programProgress.not_started;
expect(view.$('.certificate-status .status-text').not('.secondary').html())
.toEqual('You have earned certificates in ' + completed + ' of the ' + total + ' courses so far.');
it('should display the correct course status numbers', function() {
expect(view.$('.number-circle').text()).toEqual('424');
});
it('should render cards if there is no progressData', function() {
......
lms/static/sass/elements/_program-card.scss
......@@ -105,55 +105,81 @@
.hd-3 {
color: palette(grayscale, dark);
min-height: ($baseline*3);
line-height: 1;
line-height: 1.15;
}
.certificate-status {
margin-bottom: 0;
.status-text {
display: flex;
margin-bottom: 5px;
.number-status {
text-align: center;
width: 100%;
float: left;
padding: {
left: 5px;
right: 5px;
bottom: 8px;
}
margin-top: -8px;
font-size: 1em;
font-family: $f-sans-serif;
}
.status-text {
font-size: font-size(x-small);
color: palette(grayscale, dark);
line-height: 1;
.number-circle {
padding-top: 1px;
border-radius: 50%;
margin-left: auto;
margin-right: auto;
width: 23px;
height: 23px;
color: white;
text-align: center;
font-size: 0.9375em;
font-family: $f-sans-serif;
font-weight: bold;
}
.secondary {
@extend %hide-until-focus;
.completed {
background: $blue;
}
.status-text {
&:focus,
&:active {
position: relative;
top: 4px;
width: auto;
height: auto;
margin: 0;
text-decoration: none;
& ~ .status-text {
@extend %hide-until-focus;
}
}
.enrolled {
background: $green;
}
.not-enrolled {
background: palette(grayscale, dark);
}
}
.progress {
height: 5px;
background: palette(grayscale, back);
.progress-container {
max-width: inherit;
.bar {
@include float(left);
height: 100%;
position: relative;
.progress-bar {
height: 5px;
display: flex;
width: 100%;
&.complete {
background: palette(success, accent);
}
.item {
width: 100%;
margin-right: 2px;
height: 5px;
&.in-progress {
background: palette(warning, accent);
&.completed {
background: $blue;
}
&.enrolled {
background: $green;
}
&.not-enrolled {
background: lightgray;
}
&.not-enrolled:last-of-type {
margin-right: 0;
}
}
}
}
}
lms/templates/learner_dashboard/program_card.underscore
......@@ -7,39 +7,48 @@
<span class="category-icon <%- type.toLowerCase() %>-icon" aria-hidden="true"></span>
</div>
</div>
<% if (progress) { %>
<p class="certificate-status">
<a href="<%- detailUrl %>" class="status-text secondary" aria-describedby="program-<%- uuid %>"><%= interpolate(
ngettext(
'%(count)s course is in progress.',
'%(count)s courses are in progress.',
progress.in_progress
),
{count: progress.in_progress}, true
) %></a>
</div>
<% if (progress) { %>
<div class="status-text">
<div class="number-status">
<div class="number-circle completed"><%- progress.completed %></div>
<span class="sr-only">
<%- ngettext('Course', 'Courses', progress.completed) %>
</span>
<%- gettext('Completed') %>
</div>
<a href="<%- detailUrl %>" class="status-text secondary" aria-describedby="program-<%- uuid %>"><%= interpolate(
ngettext(
'%(count)s course has not been started.',
'%(count)s courses have not been started.',
progress.not_started
),
{count: progress.not_started}, true
) %></a>
<div class="number-status">
<div class="number-circle enrolled"><%- progress.in_progress %></div>
<span class="sr-only">
<%- ngettext('Course', 'Courses', progress.in_progress) %>
</span>
<%- gettext('Enrolled') %>
</div>
<span id="status-<%- uuid %>" class="status-text"><%= interpolate(
gettext('You have earned certificates in %(completed_courses)s of the %(total_courses)s courses so far.'),
{completed_courses: progress.completed, total_courses: progress.total}, true
) %></span>
</p>
<% } %>
</div>
<div class="number-status">
<div class="number-circle not-enrolled"><%- progress.not_started %></div>
<span class="sr-only">
<%- ngettext('Course', 'Courses', progress.not_started) %>
</span>
<%- gettext('Not Enrolled') %>
</div>
</div>
<% } %>
<% if (progress) { %>
<div class="progress">
<div class="bar complete" style="width:<%- progress.percentage.completed %>;"></div>
<div class="bar in-progress" style="width:<%- progress.percentage.in_progress %>;"></div>
<div class="bar not-started"></div>
</div>
<div class="progress-container">
<div class="progress-bar">
<% _.times(progress.completed, function() { %>
<div class="item completed"></div>
<% }) %>
<% _.times(progress.in_progress, function() { %>
<div class="item enrolled"></div>
<% }) %>
<% _.times(progress.not_started, function() { %>
<div class="item not-enrolled"></div>
<% }) %>
</div>
</div>
<% } %>
<a href="<%- detailUrl %>" class="card-link">
<div class="banner-image-container">
......
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