Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Program details front end for certificates

Browse Source 
Part of ECOM-4224.
This commit is contained in:
AlasdairSwan
2016-06-15 15:10:06 -04:00
committed by Renzo Lucioni
parent 142eb42e6b
commit 619829d5b5
10 changed files with 176 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
lms/static/js/learner_dashboard/models/course_card_model.js
View File

@@ -33,18 +33,19 @@
setActiveRunMode: function(runMode){
if (runMode){
this.set({
certificate_url: runMode.certificate_url,
course_image_url: runMode.course_image_url || '',
course_key: runMode.course_key,
course_url: runMode.course_url || '',
display_name: this.context.display_name,
key: this.context.key,
marketing_url: runMode.marketing_url || '',
start_date: runMode.start_date,
end_date: runMode.end_date,
is_enrolled: runMode.is_enrolled,
is_enrollment_open: runMode.is_enrollment_open,
course_key: runMode.course_key,
course_url: runMode.course_url || '',
course_image_url: runMode.course_image_url || '',
key: this.context.key,
marketing_url: runMode.marketing_url || '',
mode_slug: runMode.mode_slug,
run_key: runMode.run_key
run_key: runMode.run_key,
start_date: runMode.start_date
});
}
},

33
lms/static/js/learner_dashboard/views/certificate_status_view.js Normal file
View File

@@ -0,0 +1,33 @@
;(function (define) {
'use strict';
define(['backbone',
'jquery',
'underscore',
'gettext',
'edx-ui-toolkit/js/utils/html-utils',
'text!../../../templates/learner_dashboard/certificate_status.underscore'
],
function(
Backbone,
$,
_,
gettext,
HtmlUtils,
certificateStatusTpl
) {
return Backbone.View.extend({
tpl: HtmlUtils.template(certificateStatusTpl),
initialize: function(options) {
this.$el = options.$el;
this.render();
},
render: function() {
var data = this.model.toJSON();
HtmlUtils.setHtml(this.$el, this.tpl(data));
}
});
}
);
}).call(this, define || RequireJS.define);

14
lms/static/js/learner_dashboard/views/course_card_view.js
View File

@@ -7,6 +7,7 @@
'gettext',
'edx-ui-toolkit/js/utils/html-utils',
'js/learner_dashboard/models/course_enroll_model',
'js/learner_dashboard/views/certificate_status_view',
'js/learner_dashboard/views/course_enroll_view',
'text!../../../templates/learner_dashboard/course_card.underscore'
],
@@ -17,6 +18,7 @@
gettext,
HtmlUtils,
EnrollModel,
CertificateStatusView,
CourseEnrollView,
pageTpl
) {
@@ -42,12 +44,24 @@
},
postRender: function(){
var $certStatus = this.$('.certificate-status');
this.enrollView = new CourseEnrollView({
$parentEl: this.$('.course-actions'),
model: this.model,
urlModel: this.urlModel,
enrollModel: this.enrollModel
});
if ( this.model.get('certificate_url') ) {
this.certificateStatus = new CertificateStatusView({
$el: $certStatus,
model: this.model
});
} else {
// Styles are applied to the element that show if it's empty
$certStatus.remove();
}
}
});
}

25
lms/static/js/spec/learner_dashboard/course_card_view_spec.js
View File

@@ -29,14 +29,14 @@ define([
run_key: '2T2016',
course_started: true,
is_enrolled: true,
certificate_url: '',
certificate_url: ''
}]
},
setupView = function(isEnrolled){
setupView = function(data, isEnrolled){
context.run_modes[0].is_enrolled = isEnrolled;
setFixtures('<div class="course-card card"></div>');
courseCardModel = new CourseCardModel(context);
courseCardModel = new CourseCardModel(data);
view = new CourseCardView({
model: courseCardModel
});
@@ -54,7 +54,7 @@ define([
};
beforeEach(function() {
setupView(false);
setupView(context, false);
});
afterEach(function() {
@@ -67,7 +67,7 @@ define([
it('should render the course card based on the data enrolled', function() {
view.remove();
setupView(true);
setupView(context, true);
validateCourseInfoDisplay();
});
@@ -75,12 +75,25 @@ define([
validateCourseInfoDisplay();
});
it('should update render if the course card is_enrolled updated', function(){
it('should update render if the course card is_enrolled updated', function() {
courseCardModel.set({
is_enrolled: true
});
validateCourseInfoDisplay();
});
it('should only show certificate status section if a certificate has been earned', function() {
var data = context,
certUrl = 'sample-certificate';
setupView(context, false);
expect(view.$('certificate-status').length).toEqual(0);
view.remove();
data.run_modes[0].certificate_url = certUrl;
setupView(data, false);
expect(view.$('.certificate-status').length).toEqual(1);
expect(view.$('.certificate-status .cta-secondary').attr('href')).toEqual(certUrl);
});
});
}
);

1
lms/static/sass/_build-learner-dashboard.scss
View File

@@ -5,5 +5,6 @@
@import 'elements/banners';
@import 'elements/program-card';
@import 'elements/course-card';
@import 'elements/icons';
@import 'views/program-list';
@import 'views/program-details';

97
lms/static/sass/elements/_course-card.scss
View File

@@ -1,62 +1,117 @@
.course-card{
.course-card {
@include span(10);
margin-left: $baseline*2;
margin-bottom: $baseline;
.course-image-link{
padding: $baseline/2 0;
.section {
@extend .grid-container;
@extend .grid-manual;
padding: $baseline/2 $baseline;
}
.course-image-link {
@include float(left);
.header-img{
.header-img {
max-width: 191px;
}
}
.course-details{
.course-details {
@include float(right);
width: 100%;
@include susy-media($bp-screen-sm) { width: calc(100% - 191px); }
padding-left: $baseline*1.5;
.course-title{
.course-title {
font-size: font-size(x-large);
font-weight: font-weight(normal);
margin-bottom: $baseline/4;
}
.course-text{
.course-text {
color: palette(grayscale, dark);
.run-period{
.run-period {
color: palette(grayscale, black);
}
}
}
.course-actions{
.enrollment-info{
.course-actions {
.enrollment-info {
width: $baseline*10;
text-align: center;
margin-bottom: $baseline/2;
text-transform: uppercase;
}
.run-select-container{
.run-select-container {
margin-bottom: $baseline;
.run-select{
.run-select {
width: $baseline*10;
}
}
.enroll-button{
.enroll-button {
width: $baseline*10;
text-align: center;
background-color: palette(success, dark);
border-color: palette(success, dark);
&:hover,
&:focus{
background-color: palette(success, base);
border-color: palette(success, base);
}
}
.view-course-link{
.view-course-link {
width: $baseline*10;
text-align: center;
}
}
.action-msg-view{
.cta-primary {
display: inline-block;
background-color: palette(success, dark);
border-color: palette(success, dark);
&:active,
&:focus,
&:hover {
background-color: palette(success, base);
border-color: palette(success, base);
}
}
.cta-secondary {
display: inline-block;
background-color: palette(primary, dark);
border-color: palette(primary, dark);
&:active,
&:focus,
&:hover {
background-color: palette(primary, base);
border-color: palette(primary, base);
}
}
.action-msg-view {
clear: both;
}
.message {
margin-bottom: $baseline;
@include susy-media($bp-screen-md) {
margin-bottom: 0;
}
}
.certificate-status {
border-top: 1px solid palette(grayscale, x-trans);
padding-top: $baseline;
@include susy-media($bp-screen-md) {
display: flex;
align-items: center;
}
}
}

11
lms/static/sass/elements/_icons.scss Normal file
View File

@@ -0,0 +1,11 @@
.verified-cert-icon {
@include float(left);
@include margin-right($baseline*0.4);
margin-top: ($baseline/4);
background: url('#{$static-path}/images/icon-sm-verified.png') no-repeat;
background-position: -4px -5px;
background-color: palette(grayscale, white-t);
width: 20px;
height: 18px;
}

10
lms/templates/learner_dashboard/certificate_status.underscore Normal file
View File

@@ -0,0 +1,10 @@
<div class="message col-12 md-col-8">
<span class="verified-cert-icon" aria-hidden="true"></span>
<span class="card-msg"><%- gettext('Congratulations! You have earned a certificate for this course.') %></span>
</div>
<div class="action col-12 md-col-4">
<a href="<%- certificate_url %>" class="btn-brand cta-secondary">
<span class="verified-cert-icon" aria-hidden="true"></span>
<%- gettext('View/Share Certificate') %>
</a>
</div>

5
lms/templates/learner_dashboard/course_card.underscore
View File

@@ -1,4 +1,4 @@
<div class="grid-container grid-manual">
<div class="section">
<div class="course-meta-container col-12 md-col-8 sm-col-12">
<a href="<%- course_url %>" class="course-image-link">
<img
@@ -22,4 +22,5 @@
<div class="course-actions col-12 md-col-4 sm-col-12">
</div>
</div>
<div class="action-msg-view"></div>
<div class="section action-msg-view"></div>
<div class="section certificate-status"></div>

2
lms/templates/learner_dashboard/course_enroll.underscore
View File

@@ -26,7 +26,7 @@
</select>
</div>
<% } %>
<button type="button" class="btn-brand btn enroll-button">
<button type="button" class="btn-brand btn cta-primary enroll-button">
<%- gettext('Enroll Now') %>
</button>
<% } %>