Skip to content

E
edx-platform
Commit 5aea4660 by Frances Botsford Committed by Julia Hansbrough
Options

styling complete on reverify dash

parent 0b759417
Showing with 116 additions and 28 deletions
lms/static/sass/views/_verification.scss
...@@ -1800,6 +1800,8 @@ ...@@ -1800,6 +1800,8 @@
// step-dash // step-dash
&.step-dash {
.content-main > .title { .content-main > .title {
@extend %t-title7; @extend %t-title7;
display: block; display: block;
...@@ -1807,27 +1809,57 @@ ...@@ -1807,27 +1809,57 @@
color: $m-gray; color: $m-gray;
} }
.wrapper-reverify-open,
.wrapper-reverify-status {
display: inline-block;
vertical-align: top;
width: 48%;
}
.copy .title {
@extend %t-title6;
font-weight: 600;
}
.wrapper-reverify-status .title {
@extend %t-title6;
font-weight: normal;
color: $m-gray;
}
.action-reverify { .action-reverify {
//@extend %btn-verify-primary;
padding: ($baseline/2) ($baseline*0.75); padding: ($baseline/2) ($baseline*0.75);
} }
.reverification-list { .reverification-list {
list-style-type: none; list-style-type: none;
padding: 0 $baseline;
.item { .item {
display: inline-block; box-shadow: 0 2px 5px 0 $shadow-l1 inset;
width: 48%;
box-shadow: 0 2px 5px 2px $shadow-l1;
margin: ($baseline*.75) ($baseline*.75) ($baseline*.75) 0; margin: ($baseline*.75) ($baseline*.75) ($baseline*.75) 0;
border: 1px solid $m-gray-t2; border: 1px solid $m-gray-t2;
&.complete { &.complete {
border: 1px solid $verified-color-lvl1; 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 { &.failed {
border: 1px solid $error-color; border: 1px solid $danger-red;
.reverify-status {
border-top: 1px solid $light-gray;
background-color: $m-gray-l4;
color: $danger-red;
font-weight: 600;
}
} }
} }
...@@ -1836,11 +1868,6 @@ ...@@ -1836,11 +1868,6 @@
padding: ($baseline/2) ($baseline*.75); padding: ($baseline/2) ($baseline*.75);
} }
.reverify-status {
background-color: $light-gray;
padding: ($baseline/2) ($baseline*.75);
}
.course-name { .course-name {
@extend %t-title5; @extend %t-title5;
display: block; display: block;
...@@ -1852,8 +1879,17 @@ ...@@ -1852,8 +1879,17 @@
display: block; display: block;
margin-top: ($baseline/4); 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 { .wrapper-reverification-help {
margin-top: $baseline; margin-top: $baseline;
...@@ -1875,6 +1911,7 @@ ...@@ -1875,6 +1911,7 @@
} }
} }
} }
}
// step-photos // step-photos
.wrapper-task { .wrapper-task {
......
lms/templates/dashboard.html
...@@ -155,9 +155,7 @@ ...@@ -155,9 +155,7 @@
<!-- TODO later will need to make this ping for all courses on the dash --> <!-- TODO later will need to make this ping for all courses on the dash -->
% if reverifications_must_reverify or reverifications_denied: % if reverifications_must_reverify or reverifications_denied:
<section class="dashboard-banner"> <section class="dashboard-banner">
<div class="wrapper-msg">
<%include file='dashboard/_dashboard_prompt_midcourse_reverify.html' /> <%include file='dashboard/_dashboard_prompt_midcourse_reverify.html' />
</div>
</section> </section>
% endif % endif
......
lms/templates/dashboard/_dashboard_prompt_midcourse_reverify.html
...@@ -3,7 +3,8 @@ ...@@ -3,7 +3,8 @@
<!--TODO replace this with something a clever deisgn person approves of--> <!--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--> <!--TODO replace this with a shiny loopy thing to actually print out all courses-->
% if reverifications_must_reverify: % if reverifications_must_reverify:
<div class="msg msg-reverify has-actions"> <div class="wrapper-msg">
<div class="msg msg-reverify has-actions">
<div class="msg-content"> <div class="msg-content">
<h2 class="title">${_("You need to re-verify to continue")}</h2> <h2 class="title">${_("You need to re-verify to continue")}</h2>
% for course_id, course_name, course_number, date, status in reverifications_must_reverify: % for course_id, course_name, course_number, date, status in reverifications_must_reverify:
...@@ -20,22 +21,25 @@ ...@@ -20,22 +21,25 @@
</ul> </ul>
</nav> </nav>
</div> </div>
</div>
</div> </div>
% endfor % endfor
%endif %endif
%if reverifications_denied: %if reverifications_denied:
<div class="msg msg-reverify has-actions"> <div class="wrapper-msg">
<div class="msg msg-reverify has-actions">
<div class="msg-content"> <div class="msg-content">
<h2 class="title">${_("Your re-verification failed")}</h2> <h2 class="title">${_("Your re-verification failed")}</h2>
% for course_id, course_name, course_number, date, status in reverifications_denied: % for course_id, course_name, course_number, date, status in reverifications_denied:
<div class="copy"> <div class="copy">
<p class='activation-message'> <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.')} ${_('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> </p>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
% endfor % endfor
%endif %endif
lms/templates/verify_student/midcourse_photo_reverification.html
...@@ -155,7 +155,7 @@ ...@@ -155,7 +155,7 @@
<!-- TODO janky --> <!-- 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"> <nav class="nav-wizard" id="face_id_next_button_nav">
<div class="prompt-verify"> <div class="prompt-verify">
......
lms/templates/verify_student/midcourse_reverify_dash.html
...@@ -17,15 +17,27 @@ ...@@ -17,15 +17,27 @@
<h2 class="title">You are in the Verified track</h2> <h2 class="title">You are in the Verified track</h2>
<div class="copy"> <div class="copy">
% if reverifications_must_reverify:
% if len(reverifications_must_reverify) > 1: % if len(reverifications_must_reverify) > 1:
<p>You currently need to re-verify for the following courses:</p> <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: % elif reverifications_must_reverify:
<p>You currently need to re-verify for the following course:</p> <div class="wrapper-reverify-open">
% elif reverifications_pending or reverifications_approved or reverifications_denied: <h3 class="title">You currently need to re-verify for the following course:</h3>
<p>The status of your re-verifications is as follows:</p>
% else:
<p>You have no re-verifications at present.
% endif
<ul class="reverification-list"> <ul class="reverification-list">
% for course_id, course_name, course_number, date, status in reverifications_must_reverify: % for course_id, course_name, course_number, date, status in reverifications_must_reverify:
...@@ -34,23 +46,60 @@ ...@@ -34,23 +46,60 @@
<h3 class="course-name">${course_name} (${course_number})</h3> <h3 class="course-name">${course_name} (${course_number})</h3>
<p class="deadline">Re-verify by <strong>${date}</strong></p> <p class="deadline">Re-verify by <strong>${date}</strong></p>
</div> </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>
<p class="reverify-status"><a class="btn action-primary action-reverify" href="${reverse('verify_student_midcourse_reverify', kwargs={'course_id': course_id})}"
</li> </li>
% endfor % endfor
</ul> </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: % for course_id, course_name, course_number, date, status in reverifications_pending:
<br/>Pending: ${course_name} <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 % endfor
% for course_id, course_name, course_number, date, status in reverifications_approved: % for course_id, course_name, course_number, date, status in reverifications_approved:
<br/>Approved: ${course_name} <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 % endfor
% for course_id, course_name, course_number, date, status in reverifications_denied: % for course_id, course_name, course_number, date, status in reverifications_denied:
<br/>Denied: ${course_name} <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 % endfor
</ul>
</div>
% endif
% else:
<p class="title">You have no re-verifications at present.</p>
% endif
% 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
</div> </div>
<div class="wrapper-reverification-help list-faq"> <div class="wrapper-reverification-help list-faq">
......
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