Skip to content

E
edx-platform
Commit 79a9c867 by Brian Talbot
Options

Verification: revises presentation of customized certificate receipt ciew

parent 238a2d53
Showing with 272 additions and 164 deletions
lms/static/sass/base/_variables.scss
...@@ -98,6 +98,10 @@ $m-blue-d1: #1790C7; ...@@ -98,6 +98,10 @@ $m-blue-d1: #1790C7;
$m-blue-d2: #1580B0; $m-blue-d2: #1580B0;
$m-blue-d3: #126F9A; $m-blue-d3: #126F9A;
$m-blue-d4: #0A4A67; $m-blue-d4: #0A4A67;
$m-blue-t0: rgba($m-blue,0.125);
$m-blue-t1: rgba($m-blue,0.25);
$m-blue-t2: rgba($m-blue,0.50);
$m-blue-t3: rgba($m-blue,0.75);
$m-pink: #B52A67; $m-pink: #B52A67;
$m-pink-l1: #CA2F73; $m-pink-l1: #CA2F73;
......
lms/static/sass/views/_verification.scss
...@@ -297,6 +297,65 @@ ...@@ -297,6 +297,65 @@
// ==================== // ====================
// UI: reports/tables
.wrapper-report {
.report {
@extend .ui-window;
width: flex-grid(12,12);
border-color: $m-gray-t3;
border-collapse:collapse;
tr {
text-align: left;
}
td {
@extend .t-weight3;
vertical-align: middle;
padding: ($baseline*0.75) $baseline;
color: $m-gray-d3;
}
th {
@extend .t-weight2;
padding: ($baseline/2) $baseline;
}
thead {
tr {
border-bottom: 1px solid $m-gray-l3;
}
th[scope="col"] {
@extend .t-title7;
@extend .t-weight2;
vertical-align: middle;
color: $m-gray-l1;
background: $m-gray-l4;
}
}
tbody {
tr {
border-bottom: 1px solid $m-gray-l3;
}
}
tfoot {
background: $m-blue-t0;
th[scope="row"] {
}
}
}
}
// ====================
// UI: help // UI: help
.help-item { .help-item {
...@@ -443,7 +502,7 @@ ...@@ -443,7 +502,7 @@
@include line-height(28); @include line-height(28);
@extend .t-weight4; @extend .t-weight4;
display: block; display: block;
text-transform: none;
} }
} }
} }
...@@ -1668,74 +1727,69 @@ ...@@ -1668,74 +1727,69 @@
width: 100%; width: 100%;
} }
.info-item { // information elements
margin-bottom: ($baseline*1.5); .list-info {
padding: ($baseline*0.75) $baseline;
border-radius: ($baseline/10);
background: $m-gray-l4;
&:last-child {
margin-bottom: 0;
}
> .title {
@extend .hd-lv3;
}
.copy { .info-item {
@extend .copy-base; margin-bottom: ($baseline*1.5);
border-bottom: ($baseline/4) solid $m-gray-l4;
padding-bottom: ($baseline*1.5);
strong { &:last-child {
@extend .t-weight5; margin-bottom: 0;
color: $m-gray-d4; border-bottom: none;
padding-bottom: none;
} }
table { > .title {
width: 100%; @extend .hd-lv3;
margin-bottom: $baseline; margin-bottom: $baseline;
}
tr { .copy {
} @extend .copy-base;
margin-bottom: $baseline;
th { }
padding: ($baseline/2) ($baseline/2) ($baseline/2) 0; }
text-align: left; }
}
td { // information - course
border-ts: 1px solid #ccc; .course-info {
vertical-align: middle;
padding: ($baseline/2) ($baseline/2) ($baseline/2) 0;
text-transform: capitalize;
}
tfoot td { .options {
font-weight: 600;
&.total { .action-course {
text-align: right; @extend .btn-primary-blue;
} @include font-size(14);
} padding: 5px 10px;
} }
}
.course-actions {
.action-dashboard {
@extend .btn-primary-blue;
}
}
}
.action a { // information - verification
@extend .btn-primary-blue; .verification-info {
}
.action-course a { }
@include font-size(14);
padding: ($baseline/2) ($baseline*.75);
}
// information - payment
.payment-info {
}
} }
// UI: table/report
.wrapper-report {
.report {
}
}
} }
} }
......
lms/templates/shoppingcart/verified_cert_receipt.html
...@@ -81,126 +81,176 @@ ...@@ -81,126 +81,176 @@
</div> </div>
<div class="wrapper-content-main"> <div class="wrapper-content-main">
<article class="content-main"> <article class="content-main">
<h3 class="title">${_("Congratulations! You are now verified on ")} ${_(settings.PLATFORM_NAME)}.</h3>
<div class="instruction">
<p>${_("You are now registered as a verified student! Your registration details are below.")}</p>
</div>
<ul class="list-info">
<li class="info-item course-info">
<h4 class="title">${_("You are registered for:")}</h4>
<div class="wrapper-report">
<table class="report report-course">
<caption class="sr">${_("A list of courses you have just registered for as a verified student")}</caption>
<thead>
<tr>
<th scope="col" >${_("Course")}</th>
<th scope="col" >${_("Status")}</th>
<th scope="col" >${_("Options")}</th>
</tr>
</thead>
<tbody>
% for item in order_items:
<tr>
<td>${item.line_desc}</td>
<td>
${_("Starts: {start_date}").format(start_date=course.start_date_text)}
</td>
<td class="options">
%if course.start > datetime.today().replace(tzinfo=pytz.utc):
${_("Starts: {start_date}").format(start_date=course.start_date_text)}
%else:
<a class="action action-course" href="${reverse('course_root', kwargs={'course_id': item.course_id})}">${_("Go to Course")}</a>
%endif
</td>
</tr>
% endfor
</tbody>
<tfoot>
<tr class="course-actions">
<td colspan="3">
<a class="action action-dashboard" href="${reverse('dashboard')}">${_("Go to your Dashboard")}</a>
</td>
</tr>
</tfoot>
</table>
</div>
</li>
<li class="info-item verification-info">
<h4 class="title">${_("Verified Status")}</h4>
<div class="copy">
<p>${_("We have received your identification details to verify your identity. If there is a problem with any of the items, we will contact you to resubmit. You can now register for any of the verified certificate courses this semester without having to re-verify.")}</p>
<p>${_("The professor will ask you to periodically submit a new photo to verify your work during the course (usually at exam times).")}</p>
</div>
</li>
<h3 class="title">${_("Congratulations! You are now verified on ")} ${_(settings.PLATFORM_NAME)}.</h3> <li class="info-item payment-info">
<h4 class="title">${_("Payment Details")}</h4>
<div class="instruction"> <div class="copy">
<p>${_("You are now registered as a verified student! Your registration details are below.")}</p> <p>${_("Please print this page for your records; it serves as your receipt. You will also receive an email with the same information.")}</p>
</div> </div>
<ul class="list-info"> <div class="wrapper-report">
<li class="info-item course-info"> <table class="report report-receipt">
<h4 class="title">${_("You are registered for:")}</h4> <thead>
<tr>
<div class="copy"> <th scope="col" >${_("Order No.")}</th>
<table> <th scope="col" >${_("Description")}</th>
<caption class="sr">${_("A list of courses you have just registered for as a verified student")}</caption> <th scope="col" >${_("Date")}</th>
<thead> <th scope="col" >${_("Description")}</th>
<tr> </tr>
<th>${_("Course")}</th> </thead>
<th>${_("Status")}</th>
</tr> <tbody>
</thead> % for item in order_items:
<tbody> <tr>
% for item in order_items: % if item.status == "purchased":
<tr> <td>${order.id}</td>
<td>${item.line_desc}</td> <td>${item.line_desc}</td>
<td> <td>${order.purchase_time.date().isoformat()}</td>
%if course.start > datetime.today().replace(tzinfo=pytz.utc): <td>${"{0:0.2f}".format(item.line_cost)} (${item.currency.upper()})</td>
${_("Starts: {start_date}").format(start_date=course.start_date_text)}
%else: % elif item.status == "refunded":
<ul class="list-actions"> <td><del>${order.id}</del></td>
<li class="action action-course"><a href="${reverse('course_root', kwargs={'course_id': item.course_id})}">${_("Go to Course")}</a></li> <td><del>${item.line_desc}</del></td>
</ul> <td><del>${order.purchase_time.date().isoformat()}</del></td>
%endif <td><del>${"{0:0.2f}".format(item.line_cost)} (${item.currency.upper()})</del></td>
</td> % endif
</tr> </tr>
% endfor % endfor
</tbody> </tbody>
</table>
<tfoot>
<ul class="list-actions"> <tr>
<li class="action action-dashboard"><a href="${reverse('dashboard')}">${_("Go to your Dashboard")}</a></li> <th scope="row" class="total-label" colspan="1">${_("Total")}</th>
</ul> <td claass="total-value" colspan="3">
</div> <span class="value-amount">${"{0:0.2f}".format(order.total_cost)} </span>
<span class="value-currency">(${item.currency.upper()})</span>
</li> </td>
</tr>
<li class="info-item verification-info"> </tfoot>
<h4 class="title">${_("Verified Status")}</h4> </table>
<div class="copy"> % if any_refunds:
<p>${_("We have received your identification details to verify your identity. If there is a problem with any of the items, we will contact you to resubmit. You can now register for any of the verified certificate courses this semester without having to re-verify.")}</p> <div class="msg msg-refunds">
<h4 class="title sr">Please Note:</h4>
<p>${_("The professor will ask you to periodically submit a new photo to verify your work during the course (usually at exam times).")}</p> <div class="copy">
</div> <p>${_("Note: items with strikethough like ")}<del>${_("this")}</del>${_(" have been refunded.")}</p>
</div>
</li> </div>
% endif
<li class="info-item payment-info"> </div>
</li>
<h4 class="title">${_("Payment Details")}</h4>
<li class="info-item billing-info">
<div class="copy"> <h4 class="title">${_("Billing Information")}</h4>
<p>${_("Please print this page for your records; it serves as your receipt. You will also receive an email with the same information.")}</p>
<div class="wrapper-report">
<table> <table class="report report-billing">
<thead> <thead>
<tr> <tr>
<th>${_("Order No.")}</th> <th scope="col">${_("Billed To")}</th>
<th>${_("Description")}</th> <th scope="col">${_("Billing Address")}</th>
<th>${_("Date")}</th> <th scope="col">${_("Payment Method Type")}</th>
<th>${_("Description")}</th> <th scope="col">${_("Payment Method Details")}</th>
</tr> </tr>
</thead> </thead>
<tbody>
% for item in order_items: <tbody>
<tr> <tr>
% if item.status == "purchased": <td class="billing-to">
<td>${order.id}</td> ${order.bill_to_first} ${order.bill_to_last}
<td>${item.line_desc}</td> </td>
<td>${order.purchase_time.date().isoformat()}</td>
<td>${"{0:0.2f}".format(item.line_cost)} (${item.currency.upper()})</td> <td class="billing-address">
</tr> <span class="address-street1">${order.bill_to_street1}</span>
% elif item.status == "refunded": <span class="address-street2">${order.bill_to_street2}</span>
<td><del>${order.id}</del></td>
<td><del>${item.line_desc}</del></td> <span class="address-city">${order.bill_to_street2}</span>,
<td><del>${order.purchase_time.date().isoformat()}</del></td> <span class="address-state">${order.bill_to_state}</span>
<td><del>${"{0:0.2f}".format(item.line_cost)} (${item.currency.upper()})</del></td> <span class="address-postalcode">${order.bill_to_postalcode}</span>
% endif
% endfor <span class="address-country">${order.bill_to_country.upper()}</span>
<tfoot> </td>
<tr>
<td class="total" colspan="3">${_("Total")}</td> <td class="billing-methodtype">
<td>${"{0:0.2f}".format(order.total_cost)} (${item.currency.upper()})</td> ${order.bill_to_cardtype}
</tr> </td>
</tfoot> <td class="method-details">
</tbody> ${order.bill_to_ccnum}
</table> </td>
% if any_refunds: </tr>
<p> </tbody>
${_("Note: items with strikethough like ")}<del>${_("this")}</del>${_(" have been refunded.")}
</p> <tfoot>
% endif <tr>
</div> <th scope="row" class="total-label" colspan="1">${_("Total")}</th>
<td class="total-value" colspan="3"><span class="value-amount">${"{0:0.2f}".format(order.total_cost)}</span> <span class="value-currency">(${item.currency.upper()})</span></td>
<h4 class="title">${_("Billing details:")}</h4> </tr>
<div class="copy"> </tfoot>
<p> </table>
${order.bill_to_first} ${order.bill_to_last}<br /> </div>
${order.bill_to_street1} ${order.bill_to_street2}<br /> </li>
${order.bill_to_city}, ${order.bill_to_state} ${order.bill_to_postalcode}<br /> </ul>
${order.bill_to_country.upper()}<br /> </article>
${order.bill_to_cardtype} ${order.bill_to_ccnum}
</p>
</div>
</li>
</ul>
</article>
</div> </div>
</section> </section>
......
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