Verification: revises presentation of customized certificate receipt ciew
This commit is contained in:
Brian Talbot
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
// information elements
|
||||
.list-info {
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.info-item {
|
||||
margin-bottom: ($baseline*1.5);
|
||||
border-bottom: ($baseline/4) solid $m-gray-l4;
|
||||
padding-bottom: ($baseline*1.5);
|
||||
|
||||
> .title {
|
||||
@extend .hd-lv3;
|
||||
}
|
||||
|
||||
.copy {
|
||||
@extend .copy-base;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
td {
|
||||
border-ts: 1px solid #ccc;
|
||||
vertical-align: middle;
|
||||
padding: ($baseline/2) ($baseline/2) ($baseline/2) 0;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
tfoot td {
|
||||
font-weight: 600;
|
||||
|
||||
&.total {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.action a {
|
||||
@extend .btn-primary-blue;
|
||||
}
|
||||
|
||||
.action-course a {
|
||||
@include font-size(14);
|
||||
padding: ($baseline/2) ($baseline*.75);
|
||||
}
|
||||
|
||||
|
||||
.copy {
|
||||
@extend .copy-base;
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// information - course
|
||||
.course-info {
|
||||
|
||||
.options {
|
||||
|
||||
.action-course {
|
||||
@extend .btn-primary-blue;
|
||||
@include font-size(14);
|
||||
padding: 5px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.course-actions {
|
||||
|
||||
.action-dashboard {
|
||||
@extend .btn-primary-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// information - verification
|
||||
.verification-info {
|
||||
|
||||
}
|
||||
|
||||
// information - payment
|
||||
.payment-info {
|
||||
|
||||
}
|
||||
|
||||
// UI: table/report
|
||||
.wrapper-report {
|
||||
|
||||
.report {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
<h3 class="title">${_("Congratulations! You are now verified on ")} ${_(settings.PLATFORM_NAME)}.</h3>
|
||||
<ul class="list-info">
|
||||
<li class="info-item course-info">
|
||||
<h4 class="title">${_("You are registered for:")}</h4>
|
||||
|
||||
<div class="instruction">
|
||||
<p>${_("You are now registered as a verified student! Your registration details are below.")}</p>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</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-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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<ul class="list-actions">
|
||||
<li class="action action-dashboard"><a href="${reverse('dashboard')}">${_("Go to your Dashboard")}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
% 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>
|
||||
|
||||
</li>
|
||||
<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>
|
||||
|
||||
<li class="info-item verification-info">
|
||||
<h4 class="title">${_("Verified Status")}</h4>
|
||||
% 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>
|
||||
|
||||
<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>
|
||||
<li class="info-item billing-info">
|
||||
<h4 class="title">${_("Billing Information")}</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>
|
||||
<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>
|
||||
|
||||
</li>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="billing-to">
|
||||
${order.bill_to_first} ${order.bill_to_last}
|
||||
</td>
|
||||
|
||||
<li class="info-item payment-info">
|
||||
<td class="billing-address">
|
||||
<span class="address-street1">${order.bill_to_street1}</span>
|
||||
<span class="address-street2">${order.bill_to_street2}</span>
|
||||
|
||||
<h4 class="title">${_("Payment Details")}</h4>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<span class="address-country">${order.bill_to_country.upper()}</span>
|
||||
</td>
|
||||
|
||||
<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>
|
||||
<td class="billing-methodtype">
|
||||
${order.bill_to_cardtype}
|
||||
</td>
|
||||
<td class="method-details">
|
||||
${order.bill_to_ccnum}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user