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;
$m-blue-d2: #1580B0;
$m-blue-d3: #126F9A;
$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-l1: #CA2F73;
......
lms/static/sass/views/_verification.scss
......@@ -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
.help-item {
......@@ -443,7 +502,7 @@
@include line-height(28);
@extend .t-weight4;
display: block;
text-transform: none;
}
}
}
......@@ -1668,74 +1727,69 @@
width: 100%;
}
.info-item {
margin-bottom: ($baseline*1.5);
padding: ($baseline*0.75) $baseline;
border-radius: ($baseline/10);
background: $m-gray-l4;
&:last-child {
margin-bottom: 0;
}
> .title {
@extend .hd-lv3;
}
// information elements
.list-info {
.copy {
@extend .copy-base;
.info-item {
margin-bottom: ($baseline*1.5);
border-bottom: ($baseline/4) solid $m-gray-l4;
padding-bottom: ($baseline*1.5);
strong {
@extend .t-weight5;
color: $m-gray-d4;
&:last-child {
margin-bottom: 0;
border-bottom: none;
padding-bottom: none;
}
table {
width: 100%;
> .title {
@extend .hd-lv3;
margin-bottom: $baseline;
}
tr {
}
th {
padding: ($baseline/2) ($baseline/2) ($baseline/2) 0;
text-align: left;
}
.copy {
@extend .copy-base;
margin-bottom: $baseline;
}
}
}
td {
border-ts: 1px solid #ccc;
vertical-align: middle;
padding: ($baseline/2) ($baseline/2) ($baseline/2) 0;
text-transform: capitalize;
}
// information - course
.course-info {
tfoot td {
font-weight: 600;
.options {
&.total {
text-align: right;
}
}
.action-course {
@extend .btn-primary-blue;
@include font-size(14);
padding: 5px 10px;
}
}
.course-actions {
.action-dashboard {
@extend .btn-primary-blue;
}
}
}
.action a {
@extend .btn-primary-blue;
}
// information - verification
.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 @@
</div>
<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">
<p>${_("You are now registered as a verified student! Your registration details are below.")}</p>
<div class="copy">
<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>
<ul class="list-info">
<li class="info-item course-info">
<h4 class="title">${_("You are registered for:")}</h4>
<div class="copy">
<table>
<caption class="sr">${_("A list of courses you have just registered for as a verified student")}</caption>
<thead>
<tr>
<th>${_("Course")}</th>
<th>${_("Status")}</th>
</tr>
</thead>
<tbody>
% for item in order_items:
<tr>
<td>${item.line_desc}</td>
<td>
%if course.start > datetime.today().replace(tzinfo=pytz.utc):
${_("Starts: {start_date}").format(start_date=course.start_date_text)}
%else:
<ul class="list-actions">
<li class="action action-course"><a href="${reverse('course_root', kwargs={'course_id': item.course_id})}">${_("Go to Course")}</a></li>
</ul>
%endif
</td>
</tr>
% endfor
</tbody>
</table>
<ul class="list-actions">
<li class="action action-dashboard"><a href="${reverse('dashboard')}">${_("Go to your Dashboard")}</a></li>
</ul>
</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>
<li class="info-item payment-info">
<h4 class="title">${_("Payment Details")}</h4>
<div class="copy">
<p>${_("Please print this page for your records; it serves as your receipt. You will also receive an email with the same information.")}</p>
<table>
<thead>
<tr>
<th>${_("Order No.")}</th>
<th>${_("Description")}</th>
<th>${_("Date")}</th>
<th>${_("Description")}</th>
</tr>
</thead>
<tbody>
% for item in order_items:
<tr>
% if item.status == "purchased":
<td>${order.id}</td>
<td>${item.line_desc}</td>
<td>${order.purchase_time.date().isoformat()}</td>
<td>${"{0:0.2f}".format(item.line_cost)} (${item.currency.upper()})</td>
</tr>
% elif item.status == "refunded":
<td><del>${order.id}</del></td>
<td><del>${item.line_desc}</del></td>
<td><del>${order.purchase_time.date().isoformat()}</del></td>
<td><del>${"{0:0.2f}".format(item.line_cost)} (${item.currency.upper()})</del></td>
% endif
% endfor
<tfoot>
<tr>
<td class="total" colspan="3">${_("Total")}</td>
<td>${"{0:0.2f}".format(order.total_cost)} (${item.currency.upper()})</td>
</tr>
</tfoot>
</tbody>
</table>
% if any_refunds:
<p>
${_("Note: items with strikethough like ")}<del>${_("this")}</del>${_(" have been refunded.")}
</p>
% endif
</div>
<h4 class="title">${_("Billing details:")}</h4>
<div class="copy">
<p>
${order.bill_to_first} ${order.bill_to_last}<br />
${order.bill_to_street1} ${order.bill_to_street2}<br />
${order.bill_to_city}, ${order.bill_to_state} ${order.bill_to_postalcode}<br />
${order.bill_to_country.upper()}<br />
${order.bill_to_cardtype} ${order.bill_to_ccnum}
</p>
</div>
</li>
</ul>
</article>
<div class="wrapper-report">
<table class="report report-receipt">
<thead>
<tr>
<th scope="col" >${_("Order No.")}</th>
<th scope="col" >${_("Description")}</th>
<th scope="col" >${_("Date")}</th>
<th scope="col" >${_("Description")}</th>
</tr>
</thead>
<tbody>
% for item in order_items:
<tr>
% if item.status == "purchased":
<td>${order.id}</td>
<td>${item.line_desc}</td>
<td>${order.purchase_time.date().isoformat()}</td>
<td>${"{0:0.2f}".format(item.line_cost)} (${item.currency.upper()})</td>
% elif item.status == "refunded":
<td><del>${order.id}</del></td>
<td><del>${item.line_desc}</del></td>
<td><del>${order.purchase_time.date().isoformat()}</del></td>
<td><del>${"{0:0.2f}".format(item.line_cost)} (${item.currency.upper()})</del></td>
% endif
</tr>
% endfor
</tbody>
<tfoot>
<tr>
<th scope="row" class="total-label" colspan="1">${_("Total")}</th>
<td claass="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>
</tr>
</tfoot>
</table>
% if any_refunds:
<div class="msg msg-refunds">
<h4 class="title sr">Please Note:</h4>
<div class="copy">
<p>${_("Note: items with strikethough like ")}<del>${_("this")}</del>${_(" have been refunded.")}</p>
</div>
</div>
% endif
</div>
</li>
<li class="info-item billing-info">
<h4 class="title">${_("Billing Information")}</h4>
<div class="wrapper-report">
<table class="report report-billing">
<thead>
<tr>
<th scope="col">${_("Billed To")}</th>
<th scope="col">${_("Billing Address")}</th>
<th scope="col">${_("Payment Method Type")}</th>
<th scope="col">${_("Payment Method Details")}</th>
</tr>
</thead>
<tbody>
<tr>
<td class="billing-to">
${order.bill_to_first} ${order.bill_to_last}
</td>
<td class="billing-address">
<span class="address-street1">${order.bill_to_street1}</span>
<span class="address-street2">${order.bill_to_street2}</span>
<span class="address-city">${order.bill_to_street2}</span>,
<span class="address-state">${order.bill_to_state}</span>
<span class="address-postalcode">${order.bill_to_postalcode}</span>
<span class="address-country">${order.bill_to_country.upper()}</span>
</td>
<td class="billing-methodtype">
${order.bill_to_cardtype}
</td>
<td class="method-details">
${order.bill_to_ccnum}
</td>
</tr>
</tbody>
<tfoot>
<tr>
<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>
</tr>
</tfoot>
</table>
</div>
</li>
</ul>
</article>
</div>
</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