LMS: revises verified track upgrade UI on dashboard
This commit is contained in:
Brian Talbot
@@ -500,6 +500,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
@include clearfix;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.message-title,
|
||||
.message-copy .title {
|
||||
@extend %t-title5;
|
||||
@@ -513,47 +520,97 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// CASE: has actions
|
||||
&.has-actions {
|
||||
@include clearfix();
|
||||
// CASE: expandable
|
||||
&.is-expandable {
|
||||
|
||||
.message-copy {
|
||||
float: left;
|
||||
width: 50%;
|
||||
margin-right: 5%;
|
||||
.wrapper-tip {
|
||||
|
||||
.message-title, .message-copy {
|
||||
@include transition(color 0.25s ease-in-out 0);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// STATE: hover
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
.message-title, .message-copy {
|
||||
color: $link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-actions {
|
||||
@extend %ui-no-list;
|
||||
float: right;
|
||||
width: 40%;
|
||||
text-align: right;
|
||||
.wrapper-extended {
|
||||
@include transition(opacity 0.25s ease-in-out 0);
|
||||
display: none;
|
||||
opacity: 0.0;
|
||||
}
|
||||
|
||||
// STATE: is expanded
|
||||
&.is-expanded {
|
||||
|
||||
.wrapper-extended {
|
||||
display: block;
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TYPE: upsell
|
||||
.message-upsell {
|
||||
background: $verified-color-lvl5;
|
||||
|
||||
.wrapper-tip {
|
||||
@include clearfix();
|
||||
|
||||
.message-title {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.message-copy {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-extended {
|
||||
padding: ($baseline/2) 0;
|
||||
|
||||
.message-copy {
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
}
|
||||
|
||||
.action-upgrade {
|
||||
@extend %btn-primary-green;
|
||||
@include clearfix();
|
||||
position: relative;
|
||||
left: ($baseline/2);
|
||||
padding: 8px $baseline 8px ($baseline*2);
|
||||
|
||||
.deco-graphic {
|
||||
position: absolute;
|
||||
top: -($baseline/4);
|
||||
left: -($baseline*0.75);
|
||||
width: ($baseline*2);
|
||||
}
|
||||
|
||||
span {
|
||||
color: $white; // nasty but needed override for poor <span> styling
|
||||
}
|
||||
|
||||
.copy, .copy-sub {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.copy {
|
||||
@extend %t-action3;
|
||||
@extend %t-weight4;
|
||||
display: block;
|
||||
margin-bottom: ($baseline/4);
|
||||
margin-right: $baseline;
|
||||
}
|
||||
|
||||
.copy-sub {
|
||||
@extend %t-action4;
|
||||
display: block;
|
||||
opacity: 0.875;
|
||||
}
|
||||
}
|
||||
@@ -565,8 +622,7 @@
|
||||
border-color: #ccc;
|
||||
|
||||
.message-copy {
|
||||
font-family: $sans-serif;
|
||||
font-size: 13px;
|
||||
@extend %t-copy-sub1;
|
||||
margin: 0;
|
||||
|
||||
.grade-value {
|
||||
@@ -576,10 +632,6 @@
|
||||
}
|
||||
|
||||
.actions {
|
||||
@include clearfix;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.action {
|
||||
float: left;
|
||||
|
||||
@@ -14,6 +14,14 @@
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
|
||||
$('.message.is-expandable .wrapper-tip').bind('click', toggleExpandMessage);
|
||||
|
||||
function toggleExpandMessage(e) {
|
||||
(e).preventDefault();
|
||||
|
||||
$(this).closest('.message.is-expandable').toggleClass('is-expanded');
|
||||
}
|
||||
|
||||
$(".email-settings").click(function(event) {
|
||||
$("#email_settings_course_id").val( $(event.target).data("course-id") );
|
||||
$("#email_settings_course_number").text( $(event.target).data("course-number") );
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
% if enrollment.mode == "verified":
|
||||
<span class="sts-enrollment">
|
||||
<span class="label">${_("Enrolled as: ")}</span>
|
||||
<img class="deco-graphic" src="${static.url('images/vcert-ribbon-s.png')}" alt="ID Verified Ribbon/Badge">
|
||||
<img class="deco-graphic" src="${static.url('images/vcert-ribbon-s.png')}" alt="ID Verified Ribbon/Badge" />
|
||||
<span class="sts-enrollment-value">${_("ID Verified")}</span>
|
||||
</span>
|
||||
% endif
|
||||
@@ -109,21 +109,26 @@
|
||||
% endif
|
||||
|
||||
%if course_mode_info['show_upsell']:
|
||||
<div class="message message-upsell has-actions is-shown">
|
||||
<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="{}">'.format(marketing_link('WHAT_IS_VERIFIED_CERT')), a_end="</a>")}</p>
|
||||
<div class="message message-upsell has-actions is-expandable is-shown">
|
||||
|
||||
<div class="wrapper-tip">
|
||||
<h4 class="message-title">${_("Challenge Yourself!")}</h4>
|
||||
<p class="message-copy">${_("Take this course as an ID-verified student.")}</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>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="wrapper-extended">
|
||||
<p class="message-copy">${_("Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Learn more about the {a_start} verified certificate {a_end} track").format(a_start='<a href="{}">'.format(marketing_link('WHAT_IS_VERIFIED_CERT')), a_end="</a>")}</p>
|
||||
|
||||
<ul class="actions 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>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
%endif
|
||||
|
||||
|
||||
Reference in New Issue
Block a user