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 200 additions and 113 deletions
lms/static/sass/views/_verification.scss
...@@ -1800,78 +1800,115 @@ ...@@ -1800,78 +1800,115 @@
// step-dash // step-dash
.content-main > .title { &.step-dash {
@extend %t-title7;
display: block;
font-weight: 600;
color: $m-gray;
}
.action-reverify {
//@extend %btn-verify-primary;
padding: ($baseline/2) ($baseline*0.75);
}
.reverification-list { .content-main > .title {
list-style-type: none; @extend %t-title7;
display: block;
font-weight: 600;
color: $m-gray;
}
.item { .wrapper-reverify-open,
.wrapper-reverify-status {
display: inline-block; display: inline-block;
vertical-align: top;
width: 48%; 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 { .copy .title {
margin-bottom: ($baseline/2); @extend %t-title6;
padding: ($baseline/2) ($baseline*.75); font-weight: 600;
} }
.reverify-status { .wrapper-reverify-status .title {
background-color: $light-gray; @extend %t-title6;
padding: ($baseline/2) ($baseline*.75); font-weight: normal;
color: $m-gray;
} }
.course-name { .action-reverify {
@extend %t-title5; padding: ($baseline/2) ($baseline*0.75);
display: block;
font-weight: bold;
} }
.deadline { .reverification-list {
@extend %copy-detail; list-style-type: none;
display: block; padding: 0 $baseline;
margin-top: ($baseline/4);
}
}
.item {
box-shadow: 0 2px 5px 0 $shadow-l1 inset;
margin: ($baseline*.75) ($baseline*.75) ($baseline*.75) 0;
border: 1px solid $m-gray-t2;
.wrapper-reverification-help { &.complete {
margin-top: $baseline; border: 1px solid $verified-color-lvl1;
border-top: 1px solid $light-gray;
padding-top: ($baseline*1.5);
.faq-item { .reverify-status {
display: inline-block; border-top: 1px solid $light-gray;
vertical-align: top; background-color: $m-gray-l4;
width: flex-grid(4,12); color: $verified-color-lvl1;
padding-right: $baseline; font-weight: 600;
}
}
&:last-child { &.failed {
padding-right: 0; 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 { .course-info {
@extend %t-copy-sub1; 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;
}
} }
} }
} }
......
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,39 +3,43 @@ ...@@ -3,39 +3,43 @@
<!--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-content"> <div class="msg msg-reverify has-actions">
<h2 class="title">${_("You need to re-verify to continue")}</h2> <div class="msg-content">
% for course_id, course_name, course_number, date, status in reverifications_must_reverify: <h2 class="title">${_("You need to re-verify to continue")}</h2>
<div class="copy"> % for course_id, course_name, course_number, date, status in reverifications_must_reverify:
<p class='activation-message'> <div class="copy">
${_('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 class='activation-message'>
</p> ${_('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> </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>
<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>
</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-content"> <div class="msg msg-reverify has-actions">
<h2 class="title">${_("Your re-verification failed")}</h2> <div class="msg-content">
% for course_id, course_name, course_number, date, status in reverifications_denied: <h2 class="title">${_("Your re-verification failed")}</h2>
<div class="copy"> % for course_id, course_name, course_number, date, status in reverifications_denied:
<p class='activation-message'> <div class="copy">
${_('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 class='activation-message'>
</p> ${_('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>
</div> </div>
</div> </div>
% endfor % endfor
%endif %endif
\ No newline at end of file
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,40 +17,89 @@ ...@@ -17,40 +17,89 @@
<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 len(reverifications_must_reverify) > 1:
<p>You currently need to re-verify for the following courses:</p> % if reverifications_must_reverify:
% elif reverifications_must_reverify: % if len(reverifications_must_reverify) > 1:
<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 courses:</h3>
<p>The status of your re-verifications is as follows:</p> <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
% else: % else:
<p>You have no re-verifications at present. <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 % 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>
<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>
% 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>
<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