styling complete on reverify dash
This commit is contained in:
Frances Botsford
committed by
Julia Hansbrough
Julia Hansbrough
parent
0b7594178b
commit
5aea466093
@@ -1800,78 +1800,115 @@
|
||||
|
||||
// step-dash
|
||||
|
||||
.content-main > .title {
|
||||
@extend %t-title7;
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
color: $m-gray;
|
||||
}
|
||||
&.step-dash {
|
||||
|
||||
.action-reverify {
|
||||
//@extend %btn-verify-primary;
|
||||
padding: ($baseline/2) ($baseline*0.75);
|
||||
}
|
||||
|
||||
.reverification-list {
|
||||
list-style-type: none;
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
width: 48%;
|
||||
box-shadow: 0 2px 5px 2px $shadow-l1;
|
||||
margin: ($baseline*.75) ($baseline*.75) ($baseline*.75) 0;
|
||||
border: 1px solid $m-gray-t2;
|
||||
|
||||
&.complete {
|
||||
border: 1px solid $verified-color-lvl1;
|
||||
}
|
||||
|
||||
&.failed {
|
||||
border: 1px solid $error-color;
|
||||
}
|
||||
}
|
||||
|
||||
.course-info {
|
||||
margin-bottom: ($baseline/2);
|
||||
padding: ($baseline/2) ($baseline*.75);
|
||||
}
|
||||
|
||||
.reverify-status {
|
||||
background-color: $light-gray;
|
||||
padding: ($baseline/2) ($baseline*.75);
|
||||
}
|
||||
|
||||
.course-name {
|
||||
@extend %t-title5;
|
||||
.content-main > .title {
|
||||
@extend %t-title7;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
font-weight: 600;
|
||||
color: $m-gray;
|
||||
}
|
||||
|
||||
.deadline {
|
||||
@extend %copy-detail;
|
||||
display: block;
|
||||
margin-top: ($baseline/4);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.wrapper-reverification-help {
|
||||
margin-top: $baseline;
|
||||
border-top: 1px solid $light-gray;
|
||||
padding-top: ($baseline*1.5);
|
||||
|
||||
.faq-item {
|
||||
.wrapper-reverify-open,
|
||||
.wrapper-reverify-status {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: flex-grid(4,12);
|
||||
padding-right: $baseline;
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
.copy .title {
|
||||
@extend %t-title6;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wrapper-reverify-status .title {
|
||||
@extend %t-title6;
|
||||
font-weight: normal;
|
||||
color: $m-gray;
|
||||
}
|
||||
|
||||
.action-reverify {
|
||||
padding: ($baseline/2) ($baseline*0.75);
|
||||
}
|
||||
|
||||
.reverification-list {
|
||||
list-style-type: none;
|
||||
padding: 0 $baseline;
|
||||
|
||||
.item {
|
||||
box-shadow: 0 2px 5px 0 $shadow-l1 inset;
|
||||
margin: ($baseline*.75) ($baseline*.75) ($baseline*.75) 0;
|
||||
border: 1px solid $m-gray-t2;
|
||||
|
||||
&.complete {
|
||||
border: 1px solid $verified-color-lvl1;
|
||||
|
||||
.reverify-status {
|
||||
border-top: 1px solid $light-gray;
|
||||
background-color: $m-gray-l4;
|
||||
color: $verified-color-lvl1;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&.failed {
|
||||
border: 1px solid $danger-red;
|
||||
|
||||
.reverify-status {
|
||||
border-top: 1px solid $light-gray;
|
||||
background-color: $m-gray-l4;
|
||||
color: $danger-red;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.faq-answer {
|
||||
@extend %t-copy-sub1;
|
||||
.course-info {
|
||||
margin-bottom: ($baseline/2);
|
||||
padding: ($baseline/2) ($baseline*.75);
|
||||
}
|
||||
|
||||
.course-name {
|
||||
@extend %t-title5;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.deadline {
|
||||
@extend %copy-detail;
|
||||
display: block;
|
||||
margin-top: ($baseline/4);
|
||||
}
|
||||
|
||||
.reverify-status {
|
||||
background-color: $light-gray;
|
||||
padding: ($baseline/2) ($baseline*.75);
|
||||
}
|
||||
}
|
||||
|
||||
.support {
|
||||
margin-top: $baseline;
|
||||
@extend %t-copy-sub1;
|
||||
}
|
||||
|
||||
.wrapper-reverification-help {
|
||||
margin-top: $baseline;
|
||||
border-top: 1px solid $light-gray;
|
||||
padding-top: ($baseline*1.5);
|
||||
|
||||
.faq-item {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: flex-grid(4,12);
|
||||
padding-right: $baseline;
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.faq-answer {
|
||||
@extend %t-copy-sub1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -155,9 +155,7 @@
|
||||
<!-- TODO later will need to make this ping for all courses on the dash -->
|
||||
% if reverifications_must_reverify or reverifications_denied:
|
||||
<section class="dashboard-banner">
|
||||
<div class="wrapper-msg">
|
||||
<%include file='dashboard/_dashboard_prompt_midcourse_reverify.html' />
|
||||
</div>
|
||||
<%include file='dashboard/_dashboard_prompt_midcourse_reverify.html' />
|
||||
</section>
|
||||
% endif
|
||||
|
||||
|
||||
@@ -3,39 +3,43 @@
|
||||
<!--TODO replace this with something a clever deisgn person approves of-->
|
||||
<!--TODO replace this with a shiny loopy thing to actually print out all courses-->
|
||||
% if reverifications_must_reverify:
|
||||
<div class="msg msg-reverify has-actions">
|
||||
<div class="msg-content">
|
||||
<h2 class="title">${_("You need to re-verify to continue")}</h2>
|
||||
% for course_id, course_name, course_number, date, status in reverifications_must_reverify:
|
||||
<div class="copy">
|
||||
<p class='activation-message'>
|
||||
${_('To continue in the verified track in <strong>{course_name}</strong>, you need to re-verify your identity by {date}.').format(course_name=course_name, date=date)}
|
||||
</p>
|
||||
<div class="wrapper-msg">
|
||||
<div class="msg msg-reverify has-actions">
|
||||
<div class="msg-content">
|
||||
<h2 class="title">${_("You need to re-verify to continue")}</h2>
|
||||
% for course_id, course_name, course_number, date, status in reverifications_must_reverify:
|
||||
<div class="copy">
|
||||
<p class='activation-message'>
|
||||
${_('To continue in the verified track in <strong>{course_name}</strong>, you need to re-verify your identity by {date}.').format(course_name=course_name, date=date)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="nav-actions">
|
||||
<h3 class="sr">Notification Actions</h3>
|
||||
<ul>
|
||||
<li class="nav-item"><a class="btn action-primary action-reverify" href="${reverse('verify_student_midcourse_reverify_dash')}">Re-verify</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<nav class="nav-actions">
|
||||
<h3 class="sr">Notification Actions</h3>
|
||||
<ul>
|
||||
<li class="nav-item"><a class="btn action-primary action-reverify" href="${reverse('verify_student_midcourse_reverify_dash')}">Re-verify</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
% endfor
|
||||
%endif
|
||||
|
||||
%if reverifications_denied:
|
||||
<div class="msg msg-reverify has-actions">
|
||||
<div class="msg-content">
|
||||
<h2 class="title">${_("Your re-verification failed")}</h2>
|
||||
% for course_id, course_name, course_number, date, status in reverifications_denied:
|
||||
<div class="copy">
|
||||
<p class='activation-message'>
|
||||
${_('Your re-verification for <strong>{course_name}</strong> failed and you are no longer eligible for a Verified Certificate. If you think this is in error, please contact us at billing@edx.org.')}
|
||||
</p>
|
||||
<div class="wrapper-msg">
|
||||
<div class="msg msg-reverify has-actions">
|
||||
<div class="msg-content">
|
||||
<h2 class="title">${_("Your re-verification failed")}</h2>
|
||||
% for course_id, course_name, course_number, date, status in reverifications_denied:
|
||||
<div class="copy">
|
||||
<p class='activation-message'>
|
||||
${_('Your re-verification for <strong>{course_name}</strong> failed and you are no longer eligible for a Verified Certificate. If you think this is in error, please contact us at support@edx.org.')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
% endfor
|
||||
%endif
|
||||
%endif
|
||||
|
||||
@@ -155,7 +155,7 @@
|
||||
|
||||
|
||||
<!-- TODO janky -->
|
||||
<img id="face_image" src="" style="visibility:hidden;"/>
|
||||
<img id="face_image" src="" style="display: none;"/>
|
||||
|
||||
<nav class="nav-wizard" id="face_id_next_button_nav">
|
||||
<div class="prompt-verify">
|
||||
|
||||
@@ -17,40 +17,89 @@
|
||||
<h2 class="title">You are in the Verified track</h2>
|
||||
|
||||
<div class="copy">
|
||||
% if len(reverifications_must_reverify) > 1:
|
||||
<p>You currently need to re-verify for the following courses:</p>
|
||||
% elif reverifications_must_reverify:
|
||||
<p>You currently need to re-verify for the following course:</p>
|
||||
% elif reverifications_pending or reverifications_approved or reverifications_denied:
|
||||
<p>The status of your re-verifications is as follows:</p>
|
||||
% else:
|
||||
<p>You have no re-verifications at present.
|
||||
|
||||
% if reverifications_must_reverify:
|
||||
% if len(reverifications_must_reverify) > 1:
|
||||
<div class="wrapper-reverify-open">
|
||||
<h3 class="title">You currently need to re-verify for the following courses:</h3>
|
||||
<ul class="reverification-list">
|
||||
% for course_id, course_name, course_number, date, status in reverifications_must_reverify:
|
||||
<li class="item">
|
||||
<div class="course-info">
|
||||
<h3 class="course-name">${course_name} (${course_number})</h3>
|
||||
<p class="deadline">Re-verify by <strong>${date}</strong></p>
|
||||
</div>
|
||||
<p class="reverify-status"><a class="btn action-primary action-reverify" href="${reverse('verify_student_midcourse_reverify', kwargs={'course_id': course_id})}">Re-verify for ${course_number}</a></p>
|
||||
</li>
|
||||
% endfor
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
% elif reverifications_must_reverify:
|
||||
<div class="wrapper-reverify-open">
|
||||
<h3 class="title">You currently need to re-verify for the following course:</h3>
|
||||
|
||||
<ul class="reverification-list">
|
||||
% for course_id, course_name, course_number, date, status in reverifications_must_reverify:
|
||||
<li class="item">
|
||||
<div class="course-info">
|
||||
<h3 class="course-name">${course_name} (${course_number})</h3>
|
||||
<p class="deadline">Re-verify by <strong>${date}</strong></p>
|
||||
</div>
|
||||
<p class="reverify-status"><a class="btn action-primary action-reverify" href="${reverse('verify_student_midcourse_reverify', kwargs={'course_id': course_id})}">Re-verify for ${course_number}</a></p>
|
||||
</li>
|
||||
% endfor
|
||||
</ul>
|
||||
</div>
|
||||
%endif
|
||||
|
||||
% if reverifications_pending or reverifications_approved or reverifications_denied:
|
||||
<div class="wrapper-reverify-status">
|
||||
<h3 class="title">The status of your submitted re-verifications:</h3>
|
||||
<ul class="reverification-list reverification-status">
|
||||
|
||||
% for course_id, course_name, course_number, date, status in reverifications_pending:
|
||||
<li class="item pending">
|
||||
<div class="course-info">
|
||||
<h3 class="course-name">${course_name} (${course_number})</h3>
|
||||
<p class="deadline">Re-verify by <strong>${date}</strong></p>
|
||||
</div>
|
||||
<p class="reverify-status pending">Pending</p>
|
||||
</li>
|
||||
% endfor
|
||||
|
||||
% for course_id, course_name, course_number, date, status in reverifications_approved:
|
||||
<li class="item complete">
|
||||
<div class="course-info">
|
||||
<h3 class="course-name">${course_name} (${course_number})</h3>
|
||||
<p class="deadline">Re-verify by <strong>${date}</strong></p>
|
||||
</div>
|
||||
<p class="reverify-status complete">Complete</p>
|
||||
</li>
|
||||
% endfor
|
||||
|
||||
% for course_id, course_name, course_number, date, status in reverifications_denied:
|
||||
<li class="item failed">
|
||||
<div class="course-info">
|
||||
<h3 class="course-name">${course_name} (${course_number})</h3>
|
||||
<p class="deadline">Re-verify by <strong>${date}</strong></p>
|
||||
</div>
|
||||
<p class="reverify-status">Failed</p>
|
||||
</li>
|
||||
% endfor
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
% endif
|
||||
|
||||
<ul class="reverification-list">
|
||||
% for course_id, course_name, course_number, date, status in reverifications_must_reverify:
|
||||
<li class="item">
|
||||
<div class="course-info">
|
||||
<h3 class="course-name">${course_name} (${course_number})</h3>
|
||||
<p class="deadline">Re-verify by <strong>${date}</strong></p>
|
||||
</div>
|
||||
% else:
|
||||
<p class="title">You have no re-verifications at present.</p>
|
||||
% endif
|
||||
|
||||
<p class="reverify-status"><a class="btn action-primary action-reverify" href="${reverse('verify_student_midcourse_reverify', kwargs={'course_id': course_id})}"
|
||||
</li>
|
||||
% endfor
|
||||
</ul>
|
||||
% if reverifications_must_reverify:
|
||||
<p class="support">Don't want to re-verify right now? <a href="">Return to where you left off <i class="icon-angle-right"></i></a></p>
|
||||
% endif
|
||||
|
||||
% for course_id, course_name, course_number, date, status in reverifications_pending:
|
||||
<br/>Pending: ${course_name}
|
||||
% endfor
|
||||
|
||||
% for course_id, course_name, course_number, date, status in reverifications_approved:
|
||||
<br/>Approved: ${course_name}
|
||||
% endfor
|
||||
|
||||
% for course_id, course_name, course_number, date, status in reverifications_denied:
|
||||
<br/>Denied: ${course_name}
|
||||
% endfor
|
||||
</div>
|
||||
|
||||
<div class="wrapper-reverification-help list-faq">
|
||||
|
||||
Reference in New Issue
Block a user