Skip to content
Snippets Groups Projects
Commit 5aea4660 authored by Frances Botsford's avatar Frances Botsford Committed by Julia Hansbrough
Browse files

styling complete on reverify dash

parent 0b759417
No related merge requests found
Hide whitespace changes
Inline Side-by-side
lms/static/sass/views/_verification.scss
+ 91
− 54
View file @ 5aea4660
......@@ -1800,78 +1800,115 @@
// step-dash
.content-main > .title {
@extend %t-title7;
display: block;
font-weight: 600;
color: $m-gray;
}
.action-reverify {
//@extend %btn-verify-primary;
padding: ($baseline/2) ($baseline*0.75);
}
&.step-dash {
.reverification-list {
list-style-type: none;
.content-main > .title {
@extend %t-title7;
display: block;
font-weight: 600;
color: $m-gray;
}
.item {
.wrapper-reverify-open,
.wrapper-reverify-status {
display: inline-block;
vertical-align: top;
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);
.copy .title {
@extend %t-title6;
font-weight: 600;
}
.reverify-status {
background-color: $light-gray;
padding: ($baseline/2) ($baseline*.75);
.wrapper-reverify-status .title {
@extend %t-title6;
font-weight: normal;
color: $m-gray;
}
.course-name {
@extend %t-title5;
display: block;
font-weight: bold;
.action-reverify {
padding: ($baseline/2) ($baseline*0.75);
}
.deadline {
@extend %copy-detail;
display: block;
margin-top: ($baseline/4);
}
}
.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;
.wrapper-reverification-help {
margin-top: $baseline;
border-top: 1px solid $light-gray;
padding-top: ($baseline*1.5);
&.complete {
border: 1px solid $verified-color-lvl1;
.faq-item {
display: inline-block;
vertical-align: top;
width: flex-grid(4,12);
padding-right: $baseline;
.reverify-status {
border-top: 1px solid $light-gray;
background-color: $m-gray-l4;
color: $verified-color-lvl1;
font-weight: 600;
}
}
&:last-child {
padding-right: 0;
&.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;
}
}
}
}
......
lms/templates/dashboard.html
+ 1
− 3
View file @ 5aea4660
......@@ -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
......
lms/templates/dashboard/_dashboard_prompt_midcourse_reverify.html
+ 27
− 23
View file @ 5aea4660
......@@ -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
\ No newline at end of file
%endif
lms/templates/verify_student/midcourse_photo_reverification.html
+ 1
− 1
View file @ 5aea4660
......@@ -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">
......
lms/templates/verify_student/midcourse_reverify_dash.html
+ 80
− 31
View file @ 5aea4660
......@@ -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>
% 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
% 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
<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 class="wrapper-reverification-help list-faq">
......
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