Skip to content

E
edx-platform
Commit 79a9c867 by Brian Talbot
Options

Verification: revises presentation of customized certificate receipt ciew

parent 238a2d53
Showing with 183 additions and 75 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,75 +1727,70 @@
width: 100%;
}
// information elements
.list-info {
.info-item {
margin-bottom: ($baseline*1.5);
padding: ($baseline*0.75) $baseline;
border-radius: ($baseline/10);
background: $m-gray-l4;
border-bottom: ($baseline/4) solid $m-gray-l4;
padding-bottom: ($baseline*1.5);
&:last-child {
margin-bottom: 0;
border-bottom: none;
padding-bottom: none;
}
> .title {
@extend .hd-lv3;
margin-bottom: $baseline;
}
.copy {
@extend .copy-base;
strong {
@extend .t-weight5;
color: $m-gray-d4;
}
table {
width: 100%;
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;
// information - course
.course-info {
&.total {
text-align: right;
}
.options {
.action-course {
@extend .btn-primary-blue;
@include font-size(14);
padding: 5px 10px;
}
}
.course-actions {
.action a {
.action-dashboard {
@extend .btn-primary-blue;
}
.action-course a {
@include font-size(14);
padding: ($baseline/2) ($baseline*.75);
}
}
// information - verification
.verification-info {
}
}
// information - payment
.payment-info {
}
// UI: table/report
.wrapper-report {
.report {
}
}
}
}
// STATE: already verified
......
lms/templates/shoppingcart/verified_cert_receipt.html
......@@ -82,8 +82,6 @@
<div class="wrapper-content-main">
<article class="content-main">
<h3 class="title">${_("Congratulations! You are now verified on ")} ${_(settings.PLATFORM_NAME)}.</h3>
<div class="instruction">
......@@ -94,38 +92,43 @@
<li class="info-item course-info">
<h4 class="title">${_("You are registered for:")}</h4>
<div class="copy">
<table>
<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>${_("Course")}</th>
<th>${_("Status")}</th>
<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:
<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>
<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>
<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">
......@@ -136,25 +139,26 @@
<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>
<table>
<div class="wrapper-report">
<table class="report report-receipt">
<thead>
<tr>
<th>${_("Order No.")}</th>
<th>${_("Description")}</th>
<th>${_("Date")}</th>
<th>${_("Description")}</th>
<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>
......@@ -163,43 +167,89 @@
<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
</tr>
% endfor
</tbody>
<tfoot>
<tr>
<td class="total" colspan="3">${_("Total")}</td>
<td>${"{0:0.2f}".format(order.total_cost)} (${item.currency.upper()})</td>
<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>
</tbody>
</table>
% if any_refunds:
<p>
${_("Note: items with strikethough like ")}<del>${_("this")}</del>${_(" have been refunded.")}
</p>
<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>
<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 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>
......
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