Skip to content

E
edx-platform
Commit 30058b91 by Will Daly
Options

Merge pull request #7425 from edx/clrux/ux-1784-generate-certificates 

Styling for automatic cert generation on Progress page
parents 8710c638 f8da29b9
Showing with 93 additions and 27 deletions
lms/djangoapps/courseware/tests/test_views.py
......@@ -763,17 +763,17 @@ class ProgressPageTests(ModuleStoreTestCase):
def test_generate_cert_config(self):
resp = views.progress(self.request, course_id=unicode(self.course.id))
self.assertNotContains(resp, 'Create Your Certificate')
self.assertNotContains(resp, 'Request Certificate')
# Enable the feature, but do not enable it for this course
CertificateGenerationConfiguration(enabled=True).save()
resp = views.progress(self.request, course_id=unicode(self.course.id))
self.assertNotContains(resp, 'Create Your Certificate')
self.assertNotContains(resp, 'Request Certificate')
# Enable certificate generation for this course
certs_api.set_cert_generation_enabled(self.course.id, True)
resp = views.progress(self.request, course_id=unicode(self.course.id))
self.assertContains(resp, 'Create Your Certificate')
self.assertNotContains(resp, 'Request Certificate')
class VerifyCourseKeyDecoratorTests(TestCase):
......
lms/static/sass/application-extend2.scss.mako
......@@ -49,6 +49,7 @@
@import 'views/verification';
@import 'views/decoupled-verification';
@import 'views/shoppingcart';
@import 'course/auto-cert';
// applications
@import "discussion/utilities/variables";
......
lms/static/sass/course/_auto-cert.scss 0 → 100644
.wrapper-auto-cert {
@include margin(0, 0, 0, 0); // Overrides .wrapper-msg
@include padding(0, 0, 0, 0); // Overrides .wrapper-msg
background: none; // Overrides .wrapper-msg
.errors-info {
margin-top: $baseline;
margin-bottom: $baseline;
color: $error-color;
}
.auto-cert-message {
margin: $baseline 0;
padding: $baseline;
border: 1px solid $m-blue-d1;
border-radius: 3px;
background: $m-blue-l4;
.has-actions {
.msg-content {
width: flex-grid(9,12);
}
.msg-actions {
@extend %t-copy-base;
display: inline-block;
width: flex-grid(3,12);
.btn {
@extend %btn-primary-blue;
@extend %t-weight4;
text-shadow: none;
}
}
}
}
}
lms/static/sass/course/_profile.scss
......@@ -144,6 +144,16 @@
font-weight: 100;
margin: 0;
}
&.progress-certificates {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
.progress-certificates-title {
float: none;
}
}
}
#course-success {
......
lms/static/sass/elements/_system-feedback.scss
......@@ -52,7 +52,8 @@
width: flex-grid(10,12);
}
.nav-actions {
.nav-actions,
.msg-actions {
width: flex-grid(2,12);
display: inline-block;
vertical-align: middle;
......
lms/templates/courseware/progress.html
......@@ -48,34 +48,50 @@ from django.utils.http import urlquote_plus
</div>
% endif
<header>
<h1>${_("Course Progress for Student '{username}' ({email})").format(username=student.username, email=student.email)}</h1>
<header class="progress-certificates">
<h1 class="progress-certificates-title">${_("Course Progress for Student '{username}' ({email})").format(username=student.username, email=student.email)}</h1>
</header>
%if show_generate_cert_btn:
<div id="course-success">
%if passed:
% if is_downloadable and download_url:
<a class="btn" href="${download_url}" target="_blank"
title="${_('You can download your certificate as a PDF. You can then print your certificate or share it with others.')}">
${_("Download Your Certificate")}
</a>
%elif is_generating:
<button disabled="disabled">${_('Create Your Certificate')}</button>
<p class="text-center">${_("Creating certificate")}</p>
%else:
<button data-endpoint="${reverse('generate_user_cert', args=[unicode(course.id)])}" id="btn_generate_cert">${_('Create Your Certificate')}</button>
%if show_generate_cert_btn:
<div class="wrapper-msg wrapper-auto-cert">
<div id="errors-info" class="errors-info"></div>
<div class="auto-cert-message" id="course-success">
<div class="has-actions">
%if passed:
% if is_downloadable and download_url:
<div class="msg-content">
<h2 class="title">${_("Your certificate is available")}</h2>
<p class="copy">${_("You can now download your certificate as a PDF. If you keep working and receive a higher grade, you can request an updated certificate.")}</p>
</div>
<div class="msg-actions">
<a class="btn" href="${download_url}" target="_blank" title="${_('PDF will open in a new browser window or tab.')}">
${_("Download Your Certificate")}
</a>
</div>
%elif is_generating:
<div class="msg-content">
<h2 class="title">${_("We're working on it...")}</h2>
<p class="copy">${_("We're creating your certificate. You can keep working in your courses and a link to it will appear here and on your Dashboard when it is ready.")}</p>
</div>
<div class="msg-actions"></div>
%else:
<div class="msg-content">
<h2 class="title">${_("Congratulations, you qualified for a certificate!")}</h2>
<p class="copy">${_("You can keep working for a higher grade, or request your certificate now.")}</p>
</div>
<div class="msg-actions">
<button class="btn" data-endpoint="${reverse('generate_user_cert', args=[unicode(course.id)])}" id="btn_generate_cert">${_('Request Certificate')}</button>
</div>
%endif
</div>
%endif
%else:
<button disabled="disabled">${_('Create Your Certificate')}</button>
<p class="text-center">${_("Your certificate will be available when you pass the course.")}</p>
%endif
</div>
<div id="errors-info" class="text-center"></div>
%endif
</div>
</div>
%endif
%if not course.disable_progress_graph:
<div id="grade-detail-graph" aria-hidden="true"></div>
<div class="grade-detail-graph" id="grade-detail-graph" aria-hidden="true"></div>
%endif
<div class="chapters">
......
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