LMS: revises UI states for verification status in dashboard view
This commit is contained in:
Brian Talbot
committed by
Diana Huang
Diana Huang
parent
c64542e10a
commit
74f0e88568
@@ -84,6 +84,23 @@
|
||||
}
|
||||
}
|
||||
|
||||
// blue primary error color
|
||||
%btn-primary-error {
|
||||
@extend %btn-primary;
|
||||
box-shadow: 0 2px 1px 0 shade($error-color, 25%);
|
||||
background: shade($error-color, 25%);
|
||||
color: $white;
|
||||
|
||||
&:hover, &:active {
|
||||
background: $error-color;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.disabled, &[disabled] {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// blue primary button
|
||||
%btn-primary-blue {
|
||||
@extend %btn-primary;
|
||||
|
||||
@@ -271,11 +271,7 @@
|
||||
%copy-link {
|
||||
border-bottom: 1px dotted transparent;
|
||||
|
||||
<<<<<<< HEAD
|
||||
&:hover, &:active, &:focus {
|
||||
=======
|
||||
&:hover, &:active {
|
||||
>>>>>>> LMS: revises semantics and styling for dashboard messages
|
||||
border-color: $link-color-d1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -786,6 +786,111 @@
|
||||
}
|
||||
}
|
||||
|
||||
// status - verification
|
||||
.status-verification {
|
||||
|
||||
.status-title {
|
||||
margin: 0 0 ($baseline/4) 26px;
|
||||
}
|
||||
|
||||
.status-data {
|
||||
margin: 0 0 ($baseline/2) 26px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.status-data-message {
|
||||
@extend %t-copy-sub1;
|
||||
@extend %t-weight4;
|
||||
margin-bottom: ($baseline/2);
|
||||
}
|
||||
|
||||
.list-actions {
|
||||
@extend %ui-no-list;
|
||||
|
||||
.action {
|
||||
@extend %t-weight4;
|
||||
display: block;
|
||||
@include font-size(14);
|
||||
}
|
||||
}
|
||||
|
||||
.status-note {
|
||||
@extend %t-copy-sub2;
|
||||
position: relative;
|
||||
margin-top: $baseline;
|
||||
border-top: 1px solid $black-t0;
|
||||
padding-top: ($baseline/2);
|
||||
|
||||
p {
|
||||
@extend %t-copy-sub2;
|
||||
}
|
||||
|
||||
.deco-arrow {
|
||||
@include triangle(($baseline/2), $m-gray-d3, up);
|
||||
position: absolute;
|
||||
left: 45%;
|
||||
top: -($baseline/2);
|
||||
}
|
||||
}
|
||||
|
||||
// CASE: is denied
|
||||
&.is-denied {
|
||||
|
||||
.status-data-message {
|
||||
color: $error-color;
|
||||
border-bottom-color: rgba($error-color, 0.25);
|
||||
}
|
||||
|
||||
.status-note {
|
||||
color: desaturate($error-color, 65%);
|
||||
border-top-color: rgba($error-color, 0.25);
|
||||
}
|
||||
|
||||
.action-reverify {
|
||||
@extend %btn-primary-error;
|
||||
@extend %t-weight4;
|
||||
display: block;
|
||||
@include font-size(14);
|
||||
}
|
||||
|
||||
.deco-arrow {
|
||||
@include triangle(($baseline/2), $error-color, up);
|
||||
}
|
||||
}
|
||||
|
||||
// CASE: is accepted
|
||||
&.is-accepted {
|
||||
|
||||
.status-data-message {
|
||||
color: $verified-color-lvl1;
|
||||
border-bottom-color: $verified-color-lvl4;
|
||||
}
|
||||
|
||||
.status-note {
|
||||
color: $m-gray-l1;
|
||||
border-top-color: $verified-color-lvl4;
|
||||
}
|
||||
|
||||
.deco-arrow {
|
||||
@include triangle(($baseline/2), $verified-color-lvl4, up);
|
||||
}
|
||||
}
|
||||
|
||||
// CASE: is pending
|
||||
&.is-pending {
|
||||
|
||||
.status-data-message {
|
||||
color: $m-gray-d3;
|
||||
border-bottom-color: $m-gray-l4;
|
||||
}
|
||||
|
||||
.status-note {
|
||||
color: $m-gray-l1;
|
||||
border-top-color: $m-gray-d3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// status - verification
|
||||
.status--verification {
|
||||
|
||||
|
||||
@@ -8,20 +8,51 @@
|
||||
<%namespace name='static' file='../static_content.html'/>
|
||||
|
||||
%if verification_status == 'denied':
|
||||
<li class="status status--verification is-denied">
|
||||
<span class="title"><div class="icon"></div>${_("Verification Status")}</span><span class="data">${verification_msg}</span>
|
||||
<li class="status status-verification is-denied">
|
||||
<span class="title status-title">${_("ID-Verification Status")}</span>
|
||||
|
||||
<ul class="list--nav">
|
||||
<li class="nav__item nav__item--reverify">
|
||||
<a href="${reverse('verify_student_reverify')}" class="action">${_("Please submit new verification photos.")}</a>
|
||||
<div class="status-data">
|
||||
<span class="status-data-message">${verification_msg}</span>
|
||||
|
||||
<ul class="list-actions">
|
||||
<li class="action-item action-item-reverify">
|
||||
<a href="${reverse('verify_student_reverify')}" class="action action-reverify">${_("Re-verify Yourself")}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<div class="msg msg--warning">
|
||||
<h3 class="msg__title">${_("Please Note:")}</h3>
|
||||
<div class="msg__copy">
|
||||
<p>${_("If you fail to pass a verification attempt before the course ends, you will not receive a verified certificate.")}</p>
|
||||
<div class="status-note">
|
||||
<span class="deco-arrow"></span>
|
||||
|
||||
<p>${_("If you fail to pass a verification attempt before your course ends, you will not receive a verified certificate.")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
%endif
|
||||
|
||||
<li class="status status-verification is-accepted">
|
||||
<span class="title status-title">${_("ID-Verification Status")}</span>
|
||||
|
||||
<div class="status-data">
|
||||
<span class="status-data-message">${_("Reviewed and Verified")}</span>
|
||||
|
||||
<div class="status-note">
|
||||
<span class="deco-arrow"></span>
|
||||
|
||||
<p>${_("Your verification status is good until October 31, 2013")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="status status-verification is-pending">
|
||||
<span class="title status-title">${_("ID-Verification Status")}</span>
|
||||
|
||||
<div class="status-data">
|
||||
<span class="status-data-message">${_("Pending")}</span>
|
||||
|
||||
<div class="status-note">
|
||||
<span class="deco-arrow"></span>
|
||||
|
||||
<p>${_("Your verification, submitted on October 29, 2013, is pending.")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
Reference in New Issue
Block a user