Skip to content
Snippets Groups Projects
Commit 0050ed0b authored by Brian Talbot's avatar Brian Talbot Committed by Diana Huang
Browse files

LMS: adds in UI and styling for verified track upgrade to dashboard view

parent a76a61a7
No related merge requests found
Hide whitespace changes
Inline Side-by-side
lms/static/sass/base/_extends.scss
+ 13
− 0
View file @ 0050ed0b
......@@ -100,3 +100,16 @@
// outline: thin dotted !important;
}
}
// removes list styling/spacing when using uls, ols for navigation and less content-centric cases
%ui-no-list {
list-style: none;
margin: 0;
padding: 0;
text-indent: 0;
li {
margin: 0;
padding: 0;
}
}
lms/static/sass/multicourse/_dashboard.scss
+ 95
− 21
View file @ 0050ed0b
......@@ -227,6 +227,8 @@
}
}
// ====================
// course listings
.my-courses {
float: left;
......@@ -272,6 +274,8 @@
}
}
// ====================
// UI: course list
.listing-courses {
@extend %ui-no-list;
......@@ -289,6 +293,8 @@
}
}
// ====================
// UI: individual course item
.course {
@include box-sizing(box);
......@@ -416,6 +422,8 @@
}
}
// ====================
// STATE: course mode - verified
&.verified {
@extend %ui-depth2;
......@@ -459,40 +467,111 @@
}
}
}
}
.message-status {
// ====================
// UI: message
.message {
@include clearfix;
border-radius: 3px;
display: none;
z-index: 10;
margin: 20px 0 10px;
padding: 15px 20px;
margin: $baseline 0 ($baseline/2) 0;
padding: ($baseline*0.75) $baseline;
font-family: $sans-serif;
background: tint($yellow,70%);
border: 1px solid #ccc;
.message-copy {
// STATE: shown
&.is-shown {
display: block;
}
a {
font-family: $sans-serif;
font-size: 13px;
margin: 0;
}
strong {
font-weight: 700;
a {
font-family: $sans-serif;
font-weight: 700;
}
}
.grade-value {
font-size: 1.2rem;
font-weight: bold;
.message-title,
.message-copy .title {
@extend %t-title5;
@extend %t-weight4;
margin-bottom: ($baseline/4);
}
.message-copy,
.message-copy .copy {
@extend %t-copy-sub1;
margin: 0;
}
// CASE: has actions
&.has-actions {
@include clearfix();
.message-copy {
float: left;
width: 50%;
margin-right: 5%;
}
strong {
font-weight: 700;
.message-actions {
@extend %ui-no-list;
float: right;
width: 40%;
text-align: right;
}
}
}
a {
font-weight: 700;
}
// TYPE: upsell
.message-upsell {
background: $verified-color-lvl5;
.action-upgrade {
@extend %btn-verify-primary;
@include clearfix();
span {
color: $white; // nasty but needed override for poor <span> styling
}
.copy {
@extend %t-action3;
@extend %t-weight4;
display: block;
margin-bottom: ($baseline/4);
}
.copy-sub {
@extend %t-action4;
display: block;
opacity: 0.875;
}
}
}
// TYPE: status
.message-status {
background: tint($yellow,70%);
border-color: #ccc;
.message-copy {
font-family: $sans-serif;
font-size: 13px;
margin: 0;
.grade-value {
font-size: 1.2rem;
font-weight: bold;
}
}
......@@ -589,10 +668,6 @@
}
}
&.is-shown {
display: block;
}
&.course-status-processing {
}
......@@ -614,7 +689,6 @@
}
}
a.unenroll {
float: right;
display: block;
......
lms/templates/dashboard/dashboard_course_listing.html
+ 29
− 15
View file @ 0050ed0b
......@@ -96,12 +96,12 @@
<li class="action">
<a class="btn" href="${cert_status['download_url']}"
title="${_('This link will open/download a PDF document')}">
Download Your PDF Certificate</a></li>
${_("Download Your PDF Certificate")}</a></li>
% endif
% if cert_status['show_survey_button']:
<li class="action"><a class="cta" href="${cert_status['survey_url']}">
${_('Complete our course feedback survey')}</a></li>
${_("Complete our course feedback survey")}</a></li>
% endif
</ul>
% endif
......@@ -109,6 +109,33 @@
% endif
%if enrollment.mode != 'verified' and 'verified' in course_modes:
<div class="message message-upsell has-actions is-shown">
<!-- <img class="deco-graphic" src="${static.url('images/vcert-ribbon-s.png')}" alt="ID Verified Ribbon/Badge" /> -->
<div class="message-copy">
<h4 class="title">${_("Challenge Yourself!")}</h4>
<p class="copy">${_("Register for the {a_start} verified certificate {a_end} track").format(a_start='<a href="/verified-certificate">', a_end="</a>")}</p>
</div>
<ul class="message-actions">
<li class="action-item">
<a class="action action-upgrade" href="${reverse('course_modes_choose', kwargs={'course_id': course.id})}?upgrade=True">
<span class="wrapper-copy">
<span class="copy">${_("Upgrade to Verified Track")}</span>
%if course_modes['verified'].expiration_date:
<% days_left = (course_modes['verified'].expiration_date - date.today()).days %>
<span class="copy-sub">
${_('{days} days left!').format(days=days_left)}
</span>
%endif
</span>
</a>
</li>
</ul>
</div>
%endif
% if show_courseware_link:
% if course.has_ended():
<a href="${course_target}" class="enter-course archived">${_('View Archived Course')}</a>
......@@ -124,18 +151,5 @@
% endif
</section>
%if enrollment.mode != 'verified' and 'verified' in course_modes:
<div class='verified-upsell'>
<a href="${reverse('course_modes_choose', kwargs={'course_id': course.id})}?upgrade=True">${_("Get a verified certificate for this course!")}</a>
%if course_modes['verified'].expiration_date:
<% days_left = (course_modes['verified'].expiration_date - date.today()).days %>
<p>
${_('Only {days} days left!').format(days=days_left)}
</p>
%endif
</div>
%endif
</article>
</li>
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