Skip to content
Snippets Groups Projects
Commit b41f68c8 authored by Brian Talbot's avatar Brian Talbot
Browse files

pearson registration - changing registration status states to progress-based states UI - wip

parent 2ec11e5b
No related merge requests found
Hide whitespace changes
Inline Side-by-side
lms/static/sass/multicourse/_dashboard.scss
+ 1
− 0
View file @ b41f68c8
......@@ -488,6 +488,7 @@
.message-copy {
margin-top: 5px;
width: 60%;
}
}
......
lms/static/sass/multicourse/_testcenter-register.scss
+ 169
− 38
View file @ b41f68c8
......@@ -283,9 +283,13 @@ $red: rgb(178, 6, 16);
.message-status {
@include border-radius(3px);
margin: 0 0 ($baseline*2) 0;
padding: $baseline;
border: 1px solid #ccc;
background: tint($yellow,85%);
padding: 0;
background: tint($yellow,90%);
> * {
padding: $baseline;
}
p {
margin: 0 0 ($baseline/4) 0;
......@@ -298,67 +302,194 @@ $red: rgb(178, 6, 16);
display: block;
}
.label {
margin-right: ($baseline/4);
text-transform: uppercase;
letter-spacing: 1px;
h3, h4, h5 {
font-family: $sans-serif;
}
.value {
color: rgba(0,0,0,0.9);
font-size: 14px;
h3 {
border-bottom: 1px solid tint(rgb(0,0,0), 90%);
padding-bottom: ($baseline*0.75);
}
.registration-status {
margin: 0 0 ($baseline/2) 0;
h4 {
margin-bottom: ($baseline/4);
}
.label {
margin: 0 0 ($baseline/2) 0;
color: #ccc;
.status-list {
list-style: none;
margin: 0;
padding: $baseline;
> .item {
@include clearfix();
margin: 0 0 ($baseline*0.75) 0;
border-bottom: 1px solid tint(rgb(0,0,0), 95%);
padding: 0 0 ($baseline/2) 0;
&:last-child {
margin-bottom: 0;
border-bottom: none;
padding-bottom: 0;
}
.title {
margin-bottom: ($baseline/4);
position: relative;
font-weight: bold;
font-size: 14px;
&:after {
position: absolute;
top: 0;
right: $baseline;
margin-left: $baseline;
content: "testing";
text-transform: uppercase;
font-size: 11px;
font-weight: normal;
opacity: 0.5;
}
}
.details, .item {
@include transition(opacity, 0.10s, ease-in-out);
font-size: 13px;
opacity: 0.65;
}
&:before {
@include border-radius($baseline);
position: relative;
top: 3px;
display: block;
float: left;
width: ($baseline/2);
height: ($baseline/2);
margin: 0 ($baseline/2) 0 0;
background: $dark-gray;
content: "";
}
// specific states
&.status-accepted {
&:before {
background: green;
}
.title:after {
color: green;
content: "accepted";
}
}
&.status-pending {
&:before {
background: transparent;
border: 1px dotted gray;
}
.title:after {
color: gray;
content: "pending";
}
}
&.status-rejected {
&:before {
background: $red;
}
.title:after {
color: red;
content: "rejected";
}
}
&:hover {
.details, .item {
opacity: 1.0;
}
}
}
// sub menus
.accommodations-list {
list-style: none;
margin: ($baseline/2) 0;
padding: 0;
font-size: 13px;
.item {
margin: 0 0 ($baseline/4) 0;
padding: 0;
}
}
}
.registration-number {
// actions
.actions {
@include box-shadow(inset 0 1px 1px 0px rgba(0,0,0,0.2));
border-top: 1px solid tint(rgb(0,0,0), 90%);
padding-top: ($baseline*0.75);
background: tint($yellow,70%);
font-size: 14px;
.label, .value {
display: inline-block;
}
.label {
text-transform: none;
letter-spacing: 0;
margin-right: ($baseline/4);
}
.label, .value {
display: inline-block
.value {
font-weight: bold;
}
}
.message-copy {
margin: 0;
color: rgba(0,0,0,0.65);
.message-copy {
font-size: 13px;
}
.exam-button {
@include button(simple, $pink);
display: block;
margin: ($baseline/2) 0 0 0;
padding: ($baseline/2) $baseline;
font-size: 13px;
font-weight: bold;
&:hover {
text-decoration: none;
}
}
}
}
.registration-accepted {
.registration-number {
.message-copy {
margin: 0 0 ($baseline/2) 0;
.label {
text-transform: none;
letter-spacing: 0;
}
}
.exam-button {
@include button(simple, $pink);
display: block;
padding: ($baseline/2) $baseline;
font-size: 13px;
font-weight: bold;
.registration-accepted {
&:hover {
text-decoration: none;
}
.message-copy {
margin: 0 0 ($baseline/2) 0;
}
}
}
.details {
> .details {
border-bottom: 1px solid rgba(216, 223, 230, 0.5);
margin: 0 0 $baseline 0;
padding: 0 0 $baseline 0;
padding: 0 $baseline $baseline $baseline;
font-family: $sans-serif;
font-size: 14px;
......
lms/templates/dashboard.html
+ 1
− 1
View file @ b41f68c8
......@@ -229,7 +229,7 @@
% if registration is None and testcenter_exam_info.is_registering():
<div class="message message-status is-shown exam-register">
<a href="${testcenter_register_target}" class="exam-button" id="exam_register_button">Register for Pearson exam</a>
<p class="message-copy">Registration for the Pearson exam is now open.</p>
<p class="message-copy">Registration for the Pearson exam is now open and will close on <strong>${testcenter_exam_info.registration_end_date_text}</strong></p>
</div>
% endif
<!-- display a registration for a current exam, even if the registration period is over -->
......
lms/templates/test_center_register.html
+ 67
− 33
View file @ b41f68c8
......@@ -290,45 +290,79 @@
<aside>
% if registration:
<h3 class="is-hidden">Registration Details</h3>
% if registration.is_accepted():
<!-- REG: Dem accepted, Accom pending, Registration pending -->
<div class="message message-status registration-pending is-shown">
<h3>Pearson Exam Registration Status</h3>
<ol class="status-list">
<li class="item status status-accepted status-demographics">
<h4 class="title">Demographic Information</h4>
<p class="details">The demographic information you most recently provided has been accepted</p>
</li>
<li class="item status status-pending status-accommodations">
<h4 class="title">Accommodations Request</h4>
<p class="details">Your requested accommodations are pending. Within a few days, you should see confirmation here of granted accommodations.</p>
</li>
<li class="item status status-pending status-registration">
<h4 class="title">Registration Request</h4>
<p class="details">Your exam registration is pending. Once all of the above steps are accepted your registration will be forwarded to Pearson and you will be able to schedule an exam.</p>
</li>
</ol>
</div>
<!-- REG: Dem accepted, Accom accepted, Registration accepted -->
<div class="message message-status registration-accepted is-shown">
<% regstatus = "Registration approved by Pearson" %>
<p class="registration-status"><span class="label">Registration Status: </span><span class="value">${regstatus}</span></p>
<p class="registration-number"><span class="label">Registration number: </span> <span class="value">${registration.client_authorization_id}</span></p>
<p class="message-copy">Write this down! You’ll need it to schedule your exam.</p>
<!-- TODO: pull this link out into some settable parameter. -->
<a href="https://www1.pearsonvue.com/testtaker/signin/SignInPage/EDX" class="button exam-button">Schedule Pearson exam</a>
<h3>Pearson Exam Registration Status</h3>
<ol class="status-list">
<li class="item status status-accepted status-demographics">
<h4 class="title">Demographic Information</h4>
<p class="details">The demographic information you most recently provided has been accepted</p>
</li>
<li class="item status status-accepted status-accommodations">
<h4 class="title">Accommodations Request</h4>
<p class="details">Your requested accommodations have been accepted and include:</p>
<ul class="accommodations-list">
<li class="item">Extra Time - Double Time</li>
<li class="item">Separate Room & Reader/Recorder</li>
<li class="item">Equipment</li>
</ul>
</li>
<li class="item status status-accepted status-registration">
<h4 class="title">Registration Request</h4>
<p class="details">Your exam registration has been accepted and has been forwarded to Pearson. You are now able to schedule an exam.</p>
</li>
</ol>
<div class="actions">
<span class="label">Registration number: </span> <span class="value">12345678901</span>
<p class="message-copy">Write this down! You’ll need it to schedule your exam.</p>
<a href="https://www1.pearsonvue.com/testtaker/signin/SignInPage/EDX" class="button exam-button">Schedule Pearson exam</a>
</div>
</div>
% endif
% if registration.is_rejected():
<!-- TODO: the registration may be failed because of the upload of the demographics or of the upload of the registration.
Fix this so that the correct upload error message is displayed. -->
<!-- REG: Dem rejected, Accom none, Registration rejected -->
<div class="message message-status registration-rejected is-shown">
<% regstatus = "Registration rejected by Pearson: %s" % registration.upload_error_message %>
<p class="registration-status"><span class="label">Registration Status: </span><span class="value">${regstatus}</span></p>
<p class="message-copy">Your registration for the Pearson exam has been rejected. Please contact Pearson VUE for further information regarding your registration.</p>
</div>
% endif
% if registration.is_pending_accommodation():
<div class="message message-status registration-pending is-shown">
<% regstatus = "Registration pending approval of accommodation request" %>
<p class="registration-status"><span class="label">Registration Status: </span><span class="value">${regstatus}</span></p>
<p class="message-copy">Your registration for the Pearson exam is pending. Within a few days, you should see confirmation here of granted accommodations.
At that point, your registration will be forwarded to Pearson.</p>
</div>
% endif
<h3>Pearson Exam Registration Status</h3>
% if registration.is_pending_acknowledgement():
<div class="message message-status registration-pending is-shown">
<% regstatus = "Registration pending acknowledgement by Pearson" %>
<p class="registration-status"><span class="label">Registration Status: </span><span class="value">${regstatus}</span></p>
<p class="message-copy">Your registration for the Pearson exam is pending. Within a few days, you should see a confirmation number here, which can be used to schedule your exam.</p>
<ol class="status-list">
<li class="item status status-rejected status-demographics">
<h4 class="title">Demographic Information</h4>
<p class="details">The demographic information you most recently provided has been rejected by Pearson. You can correct it and submit again</p>
</li>
<li class="item status status-rejected status-registration">
<h4 class="title">Registration Request</h4>
<p class="details">Your exam registration has been rejected by Pearson. <strong>You currently cannot schedule an exam</strong>.</p>
</li>
</ol>
<div class="actions">
<span class="label">Pearson Testing Support</span> <span class="value">1-800-555-5555</span>
<p class="message-copy">Please contact the number above for further questions about your test</p>
</div>
</div>
% endif
% endif
......
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