Skip to content

E
edx-platform
Commit e78654f9 by Brian Talbot
Options

LMS: revises verified track upgrade UI on dashboard

parent e9a2787b
Showing with 101 additions and 36 deletions
lms/static/sass/multicourse/_dashboard.scss
...@@ -500,6 +500,13 @@ ...@@ -500,6 +500,13 @@
} }
} }
.actions {
@include clearfix;
list-style: none;
margin: 0;
padding: 0;
}
.message-title, .message-title,
.message-copy .title { .message-copy .title {
@extend %t-title5; @extend %t-title5;
...@@ -513,47 +520,97 @@ ...@@ -513,47 +520,97 @@
margin: 0; margin: 0;
} }
// CASE: has actions // CASE: expandable
&.has-actions { &.is-expandable {
@include clearfix();
.message-copy { .wrapper-tip {
float: left;
width: 50%; .message-title, .message-copy {
margin-right: 5%; @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 { .wrapper-extended {
@extend %ui-no-list; @include transition(opacity 0.25s ease-in-out 0);
float: right; display: none;
width: 40%; opacity: 0.0;
text-align: right; }
// STATE: is expanded
&.is-expanded {
.wrapper-extended {
display: block;
opacity: 1.0;
}
} }
} }
} }
// TYPE: upsell // TYPE: upsell
.message-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 { .action-upgrade {
@extend %btn-primary-green; @extend %btn-primary-green;
@include clearfix(); @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 { span {
color: $white; // nasty but needed override for poor <span> styling color: $white; // nasty but needed override for poor <span> styling
} }
.copy, .copy-sub {
display: inline-block;
vertical-align: middle;
}
.copy { .copy {
@extend %t-action3; @extend %t-action3;
@extend %t-weight4; @extend %t-weight4;
display: block; margin-right: $baseline;
margin-bottom: ($baseline/4);
} }
.copy-sub { .copy-sub {
@extend %t-action4; @extend %t-action4;
display: block;
opacity: 0.875; opacity: 0.875;
} }
} }
...@@ -565,8 +622,7 @@ ...@@ -565,8 +622,7 @@
border-color: #ccc; border-color: #ccc;
.message-copy { .message-copy {
font-family: $sans-serif; @extend %t-copy-sub1;
font-size: 13px;
margin: 0; margin: 0;
.grade-value { .grade-value {
...@@ -576,10 +632,6 @@ ...@@ -576,10 +632,6 @@
} }
.actions { .actions {
@include clearfix;
list-style: none;
margin: 0;
padding: 0;
.action { .action {
float: left; float: left;
......
lms/templates/dashboard.html
...@@ -14,6 +14,14 @@ ...@@ -14,6 +14,14 @@
<script type="text/javascript"> <script type="text/javascript">
(function() { (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").click(function(event) {
$("#email_settings_course_id").val( $(event.target).data("course-id") ); $("#email_settings_course_id").val( $(event.target).data("course-id") );
$("#email_settings_course_number").text( $(event.target).data("course-number") ); $("#email_settings_course_number").text( $(event.target).data("course-number") );
......
lms/templates/dashboard/dashboard_course_listing.html
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
% if enrollment.mode == "verified": % if enrollment.mode == "verified":
<span class="sts-enrollment"> <span class="sts-enrollment">
<span class="label">${_("Enrolled as: ")}</span> <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 class="sts-enrollment-value">${_("ID Verified")}</span>
</span> </span>
% endif % endif
...@@ -109,21 +109,26 @@ ...@@ -109,21 +109,26 @@
% endif % endif
%if course_mode_info['show_upsell']: %if course_mode_info['show_upsell']:
<div class="message message-upsell has-actions is-shown"> <div class="message message-upsell has-actions is-expandable is-shown">
<div class="message-copy">
<h4 class="title">${_("Challenge Yourself!")}</h4> <div class="wrapper-tip">
<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> <h4 class="message-title">${_("Challenge Yourself!")}</h4>
<p class="message-copy">${_("Take this course as an ID-verified student.")}</p>
</div> </div>
<ul class="message-actions"> <div class="wrapper-extended">
<li class="action-item"> <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>
<a class="action action-upgrade" href="${reverse('course_modes_choose', kwargs={'course_id': course.id})}?upgrade=True">
<span class="wrapper-copy"> <ul class="actions message-actions">
<span class="copy">${_("Upgrade to Verified Track")}</span> <li class="action-item">
</span> <a class="action action-upgrade" href="${reverse('course_modes_choose', kwargs={'course_id': course.id})}?upgrade=True">
</a> <span class="wrapper-copy">
</li> <span class="copy">${_("Upgrade to Verified Track")}</span>
</ul> </span>
</a>
</li>
</ul>
</div>
</div> </div>
%endif %endif
......
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