Skip to content

E
edx-platform
Commit 304a329b by Frances Botsford
Options

initial receipt html and styling for vcert

parent 9c96fcf4
Showing with 263 additions and 55 deletions
lms/static/sass/views/_verification.scss
...@@ -239,7 +239,7 @@ ...@@ -239,7 +239,7 @@
} }
// reset: lists // reset: lists
.list-actions, .list-steps, .progress-steps, .list-controls, .list-fields, .list-help, .list-faq, .nav-wizard, .list-reqs, .list-faq, .review-tasks, .list-tips, .wrapper-photos, .field-group { .list-actions, .list-steps, .progress-steps, .list-controls, .list-fields, .list-help, .list-faq, .nav-wizard, .list-reqs, .list-faq, .review-tasks, .list-tips, .wrapper-photos, .field-group, .list-info {
@extend .ui-no-list; @extend .ui-no-list;
} }
...@@ -451,9 +451,9 @@ ...@@ -451,9 +451,9 @@
@extend .ui-depth1; @extend .ui-depth1;
position: absolute; position: absolute;
top: 43px; top: 43px;
left: 70px; left: 7%;
display: block; display: block;
width: 77%; width: 83%;
margin: 0 auto; margin: 0 auto;
background: $m-gray-l4; background: $m-gray-l4;
...@@ -474,14 +474,15 @@ ...@@ -474,14 +474,15 @@
@include clearfix(); @include clearfix();
position: relative; position: relative;
top: ($baseline/4); top: ($baseline/4);
display: table;
width: 100%;
} }
.progress-step { .progress-step {
@extend .ui-depth2; @extend .ui-depth2;
position: relative; position: relative;
width: flex-grid(2,12); display: table-cell;
height: ($baseline*6); height: ($baseline*6);
float: left;
padding: $baseline $baseline ($baseline*1.5) $baseline; padding: $baseline $baseline ($baseline*1.5) $baseline;
text-align: center; text-align: center;
...@@ -1497,7 +1498,7 @@ ...@@ -1497,7 +1498,7 @@
// progress indicator // progress indicator
.progress-sts-value { .progress-sts-value {
width: 20%; width: 14%;
} }
} }
...@@ -1537,7 +1538,7 @@ ...@@ -1537,7 +1538,7 @@
// progress indicator // progress indicator
.progress-sts-value { .progress-sts-value {
width: 40%; width: 36%;
} }
} }
...@@ -1612,7 +1613,7 @@ ...@@ -1612,7 +1613,7 @@
// progress indicator // progress indicator
.progress-sts-value { .progress-sts-value {
width: 60%; width: 55%;
} }
} }
...@@ -1654,6 +1655,70 @@ ...@@ -1654,6 +1655,70 @@
.progress-sts-value { .progress-sts-value {
width: 100%; 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;
}
.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-top: 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;
}
}
}
} }
} }
...@@ -1700,7 +1765,8 @@ ...@@ -1700,7 +1765,8 @@
// progress indicator // progress indicator
.progress-sts { .progress-sts {
width: 47%; width: 75%;
left: 13%;
} }
.progress-sts-value { .progress-sts-value {
......
lms/templates/shoppingcart/verified_cert_receipt.html
...@@ -3,58 +3,200 @@ ...@@ -3,58 +3,200 @@
<%! from django.conf import settings %> <%! from django.conf import settings %>
<%inherit file="../main.html" /> <%inherit file="../main.html" />
<%block name="bodyclass">register verification-process step-confirmation</%block>
<%block name="title"><title>${_("Receipt for Order")} ${order.id}</title></%block> <%block name="title"><title>${_("Register for [Course Name] | Receipt (Order")} ${order.id})</title></%block>
<%block name="content">
% if notification is not UNDEFINED: % if notification is not UNDEFINED:
<section class="notification"> <section class="notification">
${notification} ${notification}
</section> </section>
% endif % endif
<section class="container cart-list"> <div class="container">
<p><h1>${_(settings.PLATFORM_NAME + " (" + settings.SITE_NAME + ")" + " Electronic Receipt")}</h1></p> <section class="wrapper cart-list">
<h2>${_("Order #")}${order.id}</h2>
<h2>${_("Date:")} ${order.purchase_time.date().isoformat()}</h2> <header class="page-header">
<h2>${_("Items ordered:")}</h2> <h2 class="title">
<span class="wrapper-sts">
<table> <span class="sts">${_("You are registering for")}</span>
<thead> <span class="sts-course">[Course Name]</span>
<tr>${_("<td>Qty</td><td>Description</td><td>Unit Price</td><td>Price</td><td>Currency</td>")}</tr> </span>
</thead> <span class="sts-track">
<tbody> <span class="sts-track-value">
% for item in order_items: <span class="context">${_("Registering as: ")}</span> ${_("ID Verified")}
<tr> </span>
% if item.status == "purchased": </span>
<td>${item.qty}</td><td>${item.line_desc}</td> </h2>
<td>${"{0:0.2f}".format(item.unit_cost)}</td> </header>
<td>${"{0:0.2f}".format(item.line_cost)}</td>
<td>${item.currency.upper()}</td></tr>
% elif item.status == "refunded": <div class="wrapper-progress">
<td><del>${item.qty}</del></td><td><del>${item.line_desc}</del></td> <section class="progress">
<td><del>${"{0:0.2f}".format(item.unit_cost)}</del></td> <h3 class="sr title">${_("Your Progress")}</h3>
<td><del>${"{0:0.2f}".format(item.line_cost)}</del></td>
<td><del>${item.currency.upper()}</del></td></tr> <ol class="progress-steps">
% endif <li class="progress-step is-current" id="progress-step0">
% endfor <span class="wrapper-step-number"><span class="step-number">0</span></span>
<tr><td></td><td></td><td></td><td>${_("Total Amount")}</td></tr> <span class="step-name"><span class="sr">${_("Current Step: ")}</span>${_("Intro")}</span>
<tr><td></td><td></td><td></td><td>${"{0:0.2f}".format(order.total_cost)}</td></tr> </li>
</tbody>
</table> <li class="progress-step" id="progress-step1">
% if any_refunds: <span class="wrapper-step-number"><span class="step-number">1</span></span>
<p> <span class="step-name">${_("Take Photo")}</span>
${_("Note: items with strikethough like ")}<del>this</del>${_(" have been refunded.")} </li>
</p>
% endif <li class="progress-step" id="progress-step2">
<span class="wrapper-step-number"><span class="step-number">2</span></span>
<h2>${_("Billed To:")}</h2> <span class="step-name">${_("Take ID Photo")}</span>
<p> </li>
${order.bill_to_cardtype} ${_("#:")} ${order.bill_to_ccnum}<br />
${order.bill_to_first} ${order.bill_to_last}<br /> <li class="progress-step" id="progress-step3">
${order.bill_to_street1}<br /> <span class="wrapper-step-number"><span class="step-number">3</span></span>
${order.bill_to_street2}<br /> <span class="step-name">${_("Review")}</span>
${order.bill_to_city}, ${order.bill_to_state} ${order.bill_to_postalcode}<br /> </li>
${order.bill_to_country.upper()}<br />
</p> <li class="progress-step" id="progress-step4">
<span class="wrapper-step-number"><span class="step-number">4</span></span>
<span class="step-name">${_("Make Payment")}</span>
</li>
<li class="progress-step progress-step-icon" id="progress-step5">
<span class="wrapper-step-number"><span class="step-number">
<i class="icon-ok"></i>
</span></span>
<span class="step-name">${_("Confirmation")}</span>
</li>
</ol>
<span class="progress-sts">
<span class="progress-sts-value"></span>
</span>
</section>
</div>
<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">
<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="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>Start date: [date]
<ul class="list-actions">
<li class="action action-course"><a href="">Go to Course</a></li>
</ul>
</td>
</tr>
% endfor
</tbody>
</table>
<ul class="list-actions">
<li class="action action-dashboard"><a href="">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>
<%doc>
<h4 class="title">${_("Billing details:")}</h4>
<div class="copy">
<p>
${order.bill_to_cardtype} ${order.bill_to_ccnum}<br />
${order.bill_to_first} ${order.bill_to_last},
${order.bill_to_street1} ${order.bill_to_street2}
${order.bill_to_city}, ${order.bill_to_state} ${order.bill_to_postalcode}
${order.bill_to_country.upper()}
</p>
</div>
</%doc>
</li>
</ul>
</article>
</div>
</section> </section>
</div>
</%block>
lms/templates/verify_student/photo_verification.html
...@@ -256,7 +256,7 @@ ...@@ -256,7 +256,7 @@
<ul class="list-actions"> <ul class="list-actions">
<li class="action action-editname"> <li class="action action-editname">
<a rel="modal" class="edit-name" rel="leanModal" href="#edit-name">${_("Edit my name")}</a> <a rel="modal" class="edit-name" rel="leanModal" href="#edit-name">${_("Edit your name")}</a>
</li> </li>
</ul> </ul>
</li> </li>
......
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