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