diff --git a/lms/djangoapps/courseware/tests/test_views.py b/lms/djangoapps/courseware/tests/test_views.py
index 0182719..a4a444b 100644
--- a/lms/djangoapps/courseware/tests/test_views.py
+++ b/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):
diff --git a/lms/static/sass/application-extend2.scss.mako b/lms/static/sass/application-extend2.scss.mako
index b1ff2a6..5969c25 100644
--- a/lms/static/sass/application-extend2.scss.mako
+++ b/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";
diff --git a/lms/static/sass/course/_auto-cert.scss b/lms/static/sass/course/_auto-cert.scss
new file mode 100644
index 0000000..1ab3938
--- /dev/null
+++ b/lms/static/sass/course/_auto-cert.scss
@@ -0,0 +1,38 @@
+.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;
+ }
+ }
+ }
+ }
+}
diff --git a/lms/static/sass/course/_profile.scss b/lms/static/sass/course/_profile.scss
index 1a17469..783e2dc 100644
--- a/lms/static/sass/course/_profile.scss
+++ b/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 {
diff --git a/lms/static/sass/elements/_system-feedback.scss b/lms/static/sass/elements/_system-feedback.scss
index ec4e641..fb1d04b 100644
--- a/lms/static/sass/elements/_system-feedback.scss
+++ b/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;
diff --git a/lms/templates/courseware/progress.html b/lms/templates/courseware/progress.html
index d01eb22..e0e2795 100644
--- a/lms/templates/courseware/progress.html
+++ b/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">