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

Merge pull request #12836 from edx/renzo/switch-cert-icon

Browse Source 
Use SVG cert icon for program detail page certificate section
This commit is contained in:
Renzo Lucioni
2016-06-23 17:28:45 -04:00
committed by GitHub
parent d3128f4d36 c151761e64
commit 157c68506d
4 changed files with 38 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
lms/static/js/learner_dashboard/views/certificate_status_view.js
View File

@@ -5,7 +5,8 @@
'underscore',
'gettext',
'edx-ui-toolkit/js/utils/html-utils',
'text!../../../templates/learner_dashboard/certificate_status.underscore'
'text!../../../templates/learner_dashboard/certificate_status.underscore',
'text!../../../templates/learner_dashboard/certificate_icon.underscore'
],
function(
Backbone,
@@ -13,10 +14,12 @@
_,
gettext,
HtmlUtils,
certificateStatusTpl
certificateStatusTpl,
certificateIconTpl
) {
return Backbone.View.extend({
tpl: HtmlUtils.template(certificateStatusTpl),
statusTpl: HtmlUtils.template(certificateStatusTpl),
iconTpl: HtmlUtils.template(certificateIconTpl),
initialize: function(options) {
this.$el = options.$el;
@@ -24,8 +27,13 @@
},
render: function() {
var data = this.model.toJSON();
HtmlUtils.setHtml(this.$el, this.tpl(data));
var data = this.model.toJSON(),
$icons;
HtmlUtils.setHtml(this.$el, this.statusTpl(data));
$icons = this.$('.certificate-icon');
HtmlUtils.setHtml($icons, this.iconTpl());
}
});
}

23
lms/static/sass/elements/_icons.scss
View File

@@ -1,11 +1,22 @@
.verified-cert-icon {
.certificate-icon .certificate-body {
@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;
margin-top: ($baseline/10);
width: 23px;
height: 20px;
padding: 2px;
background-color: palette(grayscale, white-t);
width: 20px;
height: 18px;
border-style: solid;
border-width: 2px;
}
.green-certificate-icon .certificate-body {
fill: palette(success, dark);
border-color: palette(success, dark);
}
.blue-certificate-icon .certificate-body {
fill: palette(primary, dark);
border-color: palette(primary, dark);
}

6
lms/templates/learner_dashboard/certificate_icon.underscore Normal file
View File

@@ -0,0 +1,6 @@
<svg class="certificate-body" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.9 9.2">
<rect y="5.8" width="12.9" height="1.1" rx="0.5" ry="0.5"/>
<rect y="8.1" width="12.9" height="1.1" rx="0.5" ry="0.5"/>
<rect y="1.5" width="6.3" height="1.1" rx="0.5" ry="0.5"/>
<circle cx="10.5" cy="2" r="2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 316 B

4
lms/templates/learner_dashboard/certificate_status.underscore
View File

@@ -1,10 +1,10 @@
<div class="message col-12 md-col-8">
<span class="verified-cert-icon" aria-hidden="true"></span>
<span class="certificate-icon green-certificate-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>
<span class="certificate-icon blue-certificate-icon" aria-hidden="true"></span>
<%- gettext('View/Share Certificate') %>
</a>
</div>