Skip to content

E
edx-platform
Commit 4e83f748 by Brian Talbot
Options

pearson registration - revised contact calls to action and order in status… 

pearson registration - revised contact calls to action and order in status section, edited flash message copy/styling, added in strawman state for disabled form/closed registration state of form, added in strawman state for demographics rejected flash message, revised accomodations text labe and isntructions
parent 8e059ff9
Showing with 99 additions and 32 deletions
lms/static/sass/multicourse/_testcenter-register.scss
...@@ -10,6 +10,11 @@ $red: rgb(178, 6, 16); ...@@ -10,6 +10,11 @@ $red: rgb(178, 6, 16);
@include clearfix; @include clearfix;
padding: 60px 0px 120px; padding: 60px 0px 120px;
// reset - horrible, but necessary
p, a, h1, h2, h3, h4, h5, h6 {
font-family: $sans-serif !important;
}
// basic layout // basic layout
.introduction { .introduction {
width: flex-grid(12); width: flex-grid(12);
...@@ -74,7 +79,6 @@ $red: rgb(178, 6, 16); ...@@ -74,7 +79,6 @@ $red: rgb(178, 6, 16);
.instructions, .note { .instructions, .note {
margin: 0; margin: 0;
padding: ($baseline*1.5) ($baseline*1.5) 0 ($baseline*1.5); padding: ($baseline*1.5) ($baseline*1.5) 0 ($baseline*1.5);
font-family: $sans-serif;
font-size: 14px; font-size: 14px;
color: tint($base-font-color, 20%); color: tint($base-font-color, 20%);
...@@ -106,6 +110,11 @@ $red: rgb(178, 6, 16); ...@@ -106,6 +110,11 @@ $red: rgb(178, 6, 16);
letter-spacing: 0; letter-spacing: 0;
padding: ($baseline*0.75) $baseline; padding: ($baseline*0.75) $baseline;
text-align: center; text-align: center;
&:disabled {
opacity: 0.3;
}
} }
.action-primary { .action-primary {
...@@ -181,7 +190,6 @@ $red: rgb(178, 6, 16); ...@@ -181,7 +190,6 @@ $red: rgb(178, 6, 16);
border: 1px solid #C8C8C8; border: 1px solid #C8C8C8;
padding: $baseline ($baseline*0.75); padding: $baseline ($baseline*0.75);
background: #FAFAFA; background: #FAFAFA;
font-family: $sans-serif;
} }
} }
...@@ -278,6 +286,25 @@ $red: rgb(178, 6, 16); ...@@ -278,6 +286,25 @@ $red: rgb(178, 6, 16);
} }
} }
} }
&.disabled {
> .instructions {
display: none;
}
.field {
opacity: 0.5;
.label {
cursor: default;
}
}
.form-actions {
display: none;
}
}
} }
// form - specifics // form - specifics
...@@ -287,13 +314,19 @@ $red: rgb(178, 6, 16); ...@@ -287,13 +314,19 @@ $red: rgb(178, 6, 16);
&.is-shown { &.is-shown {
display: block; display: block;
} }
&.disabled {
fieldset {
opacity: 0.5;
}
}
} }
.form-fields-secondary-visibility { .form-fields-secondary-visibility {
display: block; display: block;
margin: 0; margin: 0;
padding: $baseline ($baseline*1.5) 0 ($baseline*1.5); padding: $baseline ($baseline*1.5) 0 ($baseline*1.5);
font-family: $sans-serif;
font-size: 13px; font-size: 13px;
&.is-hidden { &.is-hidden {
...@@ -321,7 +354,6 @@ $red: rgb(178, 6, 16); ...@@ -321,7 +354,6 @@ $red: rgb(178, 6, 16);
margin: 0 0 ($baseline/4) 0; margin: 0 0 ($baseline/4) 0;
padding: 0; padding: 0;
font-size: 13px; font-size: 13px;
font-family: $sans-serif;
} }
.label, .value { .label, .value {
...@@ -407,6 +439,12 @@ $red: rgb(178, 6, 16); ...@@ -407,6 +439,12 @@ $red: rgb(178, 6, 16);
color: green; color: green;
content: "processed"; content: "processed";
} }
&.status-registration {
.exam-link {
font-weight: 600 !important;
}
}
} }
&.status-pending { &.status-pending {
...@@ -473,6 +511,10 @@ $red: rgb(178, 6, 16); ...@@ -473,6 +511,10 @@ $red: rgb(178, 6, 16);
} }
// actions // actions
.contact-link {
font-weight: 600;
}
.actions { .actions {
@include box-shadow(inset 0 1px 1px 0px rgba(0,0,0,0.2)); @include box-shadow(inset 0 1px 1px 0px rgba(0,0,0,0.2));
border-top: 1px solid tint(rgb(0,0,0), 90%); border-top: 1px solid tint(rgb(0,0,0), 90%);
...@@ -565,6 +607,7 @@ $red: rgb(178, 6, 16); ...@@ -565,6 +607,7 @@ $red: rgb(178, 6, 16);
.value { .value {
color: rgb(0,0,0); color: rgb(0,0,0);
font-weight: 600;
} }
} }
...@@ -598,7 +641,6 @@ $red: rgb(178, 6, 16); ...@@ -598,7 +641,6 @@ $red: rgb(178, 6, 16);
} }
.message-copy { .message-copy {
font-family: $sans-serif;
font-size: 14px; font-size: 14px;
} }
...@@ -614,15 +656,18 @@ $red: rgb(178, 6, 16); ...@@ -614,15 +656,18 @@ $red: rgb(178, 6, 16);
font-size: 14px; font-size: 14px;
.message-title, .message-copy { .message-title, .message-copy {
font-family: $sans-serif;
font-size: 14px;
} }
.message-title { .message-title {
font-weight: bold; font-weight: bold;
font-size: 16px;
margin: 0 0 ($baseline/4) 0; margin: 0 0 ($baseline/4) 0;
} }
.message-copy {
font-size: 14px;
}
.contact-button { .contact-button {
@include button(simple, $blue); @include button(simple, $blue);
} }
......
lms/static/sass/shared/_forms.scss
...@@ -13,7 +13,8 @@ label { ...@@ -13,7 +13,8 @@ label {
textarea, textarea,
input[type="text"], input[type="text"],
input[type="email"], input[type="email"],
input[type="password"] { input[type="password"],
input[type="tel"] {
background: rgb(250,250,250); background: rgb(250,250,250);
border: 1px solid rgb(200,200,200); border: 1px solid rgb(200,200,200);
@include border-radius(3px); @include border-radius(3px);
......
lms/templates/test_center_register.html
...@@ -14,12 +14,15 @@ ...@@ -14,12 +14,15 @@
<script type="text/javascript"> <script type="text/javascript">
(function() { (function() {
$(".form-fields-secondary-visibility").click(function(e){ // if form is disabled or registration is closed
console.log("clicked"); $('#testcenter_register_form.disabled').find('input, textarea, button').attr('disabled','disabled');
// toggling accommodations elements
$('.form-fields-secondary-visibility').click(function(e){
e.preventDefault(); e.preventDefault();
$(this).addClass("is-hidden"); $(this).addClass("is-hidden");
$(".form-fields-secondary").addClass("is-shown"); $('.form-fields-secondary').addClass("is-shown");
}); });
...@@ -101,18 +104,16 @@ ...@@ -101,18 +104,16 @@
</header> </header>
</section> </section>
% if registration:
<% <%
exam_help_href = "mailto:exam-help@edx.org?subject=Pearson VUE Exam - " + get_course_about_section(course, 'university') + " - " + course.number exam_help_href = "mailto:exam-help@edx.org?subject=Pearson VUE Exam - " + get_course_about_section(course, 'university') + " - " + course.number
%> %>
% if registration:
% if registration.is_rejected: % if registration.is_rejected:
<section class="status message message-flash registration-rejected message-action"> <section class="status message message-flash registration-rejected message-action">
<h3 class="message-title">Your registration for the Pearson exam has been rejected</h3> <h3 class="message-title">Your registration for the Pearson exam has been rejected</h3>
<p class="message-copy">Please check the information you provided, and try to correct any demographic errors. Otherwise contact edX at exam-help@edx.org.</p> <p class="message-copy">Please see your registration status details for more information.</p>
<a href="${exam_help_href}" class="button contact-button">Contact exam-help@edx.org</a>
</section>
% endif % endif
% if registration.is_accepted: % if registration.is_accepted:
...@@ -130,6 +131,18 @@ ...@@ -130,6 +131,18 @@
</section> </section>
% endif % endif
<!-- TODO: add logic for demographic error/rejected state (add this message to the page) -->
<section class="status message message-flash demographics-rejected message-action">
<h3 class="message-title">Your demographic information contained an error and was rejected</h3>
<p class="message-copy">Please check the information you provided, and correct the errors noted below.
</section>
<!-- TODO: add logic for registration closed state (add this message to the page) -->
<section class="status message message-flash registration-closed">
<h3 class="message-title">Registration for this Pearson exam is closed</h3>
<p class="message-copy">Your registration status and previous information is available below, however you may not edit any of the information.
</section>
% endif % endif
<section class="content"> <section class="content">
...@@ -138,6 +151,9 @@ ...@@ -138,6 +151,9 @@
</header> </header>
<form id="testcenter_register_form" method="post" data-remote="true" action="/create_test_registration"> <form id="testcenter_register_form" method="post" data-remote="true" action="/create_test_registration">
<!-- TODO: add logic for registration closed state (add class of disabled to <form>) -->
<!-- <form id="testcenter_register_form" method="post" data-remote="true" action="/create_test_registration" class="disabled"> -->
% if registration: % if registration:
<p class="instructions"> <p class="instructions">
Please use the following form if you need to update your demographic information used in your Pearson VUE Proctored Exam. Required fields are noted by <strong class="indicator">bold text and an asterisk (*)</strong>. Please use the following form if you need to update your demographic information used in your Pearson VUE Proctored Exam. Required fields are noted by <strong class="indicator">bold text and an asterisk (*)</strong>.
...@@ -228,11 +244,11 @@ ...@@ -228,11 +244,11 @@
<li class="field-group phoneinfo"> <li class="field-group phoneinfo">
<div class="field required" id="field-phone"> <div class="field required" id="field-phone">
<label for="phone">Phone Number</label> <label for="phone">Phone Number</label>
<input id="phone" type="text" name="phone" value="${testcenteruser.phone}" placeholder="e.g. 1-55-555-5555" /> <input id="phone" type="tel" name="phone" value="${testcenteruser.phone}" placeholder="e.g. 1-55-555-5555" />
</div> </div>
<div class="field" id="field-extension"> <div class="field" id="field-extension">
<label for="extension">Extension</label> <label for="extension">Extension</label>
<input id="extension" class="short" type="text" name="extension" value="${testcenteruser.extension}" placeholder="e.g. 555" /> <input id="extension" class="short" type="tel" name="extension" value="${testcenteruser.extension}" placeholder="e.g. 555" />
</div> </div>
<div class="field required" id="field-phone_country_code"> <div class="field required" id="field-phone_country_code">
<label for="phone_country_code">Phone Country Code</label> <label for="phone_country_code">Phone Country Code</label>
...@@ -242,7 +258,7 @@ ...@@ -242,7 +258,7 @@
<li class="field-group faxinfo"> <li class="field-group faxinfo">
<div class="field" id="field-fax"> <div class="field" id="field-fax">
<label for="fax">Fax Number</label> <label for="fax">Fax Number</label>
<input id="fax" type="text" class="short" name="fax" value="${testcenteruser.fax}" placeholder="e.g. 1-55-555-5555" /> <input id="fax" type="tel" class="short" name="fax" value="${testcenteruser.fax}" placeholder="e.g. 1-55-555-5555" />
</div> </div>
<div class="field" id="field-fax_country_code"> <div class="field" id="field-fax_country_code">
<label for="fax_country_code">Fax Country Code</label> <label for="fax_country_code">Fax Country Code</label>
...@@ -259,7 +275,7 @@ ...@@ -259,7 +275,7 @@
% if registration: % if registration:
% if registration.accommodation_request and len(registration.accommodation_request) > 0: % if registration.accommodation_request and len(registration.accommodation_request) > 0:
<div class="form-fields-secondary is-shown" id="form-fields-secondary"> <div class="form-fields-secondary is-shown disabled" id="form-fields-secondary">
% endif % endif
% else: % else:
<div class="form-fields-secondary" id="form-fields-secondary"> <div class="form-fields-secondary" id="form-fields-secondary">
...@@ -267,10 +283,10 @@ ...@@ -267,10 +283,10 @@
% if registration: % if registration:
% if registration.accommodation_request and len(registration.accommodation_request) > 0: % if registration.accommodation_request and len(registration.accommodation_request) > 0:
<p class="note"><span class="title">Note</span>: Accomodation requests, which need to be reviewed in detail, <strong>will add significant delay to the registration process</strong>.</p> <p class="note"><span class="title">Note</span>: Your previously accomodation requests below need to be reviewed in detail <strong>and will add asignificant delay to your registration process</strong>.</p>
% endif % endif
% else: % else:
<p class="note"><span class="title">Note</span>: Accommodation requests are not part of your demographic information, <strong>and cannot be changed once submitted</strong>. Accomodation requests, which need to be reviewed in detail, <strong>will add significant delay to the registration process</strong>.</p> <p class="note"><span class="title">Note</span>: Accommodation requests are not part of your demographic information, <strong>and cannot be changed once submitted</strong>. Accomodation requests, which are reviewed on a case-by-case basis, <strong>will add significant delay to the registration process</strong>.</p>
% endif % endif
<fieldset class="group group-form group-form-optional"> <fieldset class="group group-form group-form-optional">
...@@ -312,10 +328,10 @@ ...@@ -312,10 +328,10 @@
% if registration: % if registration:
% if registration.accommodation_request and len(registration.accommodation_request) > 0: % if registration.accommodation_request and len(registration.accommodation_request) > 0:
<a class="actions form-fields-secondary-visibility is-hidden" href="#form-fields-secondary">Looking for Optional Accomodations?</a> <a class="actions form-fields-secondary-visibility is-hidden" href="#form-fields-secondary">Special (<abbr title="Americans with Disabilities Act">ADA</abbr>) Accommdations</a>
% endif % endif
% else: % else:
<a class="actions form-fields-secondary-visibility" href="#form-fields-secondary">Looking for Optional Accomodations?</a> <a class="actions form-fields-secondary-visibility" href="#form-fields-secondary">Special (<abbr title="Americans with Disabilities Act">ADA</abbr>) Accommdations</a>
% endif % endif
</section> </section>
...@@ -357,7 +373,7 @@ ...@@ -357,7 +373,7 @@
<li class="item">${registration.testcenter_user.upload_error_message}.</li> <li class="item">${registration.testcenter_user.upload_error_message}.</li>
</ul> </ul>
<p class="instructions">If the error is not correctable by revising demographic information and resubmitting, please contact edX at <a class="contact-link" href="${exam_help_href}">exam-help@edx.org</a>.</p> <p class="action">If the error is not correctable by revising your demographic information, please <a class="contact-link" href="${exam_help_href}">contact edX at exam-help@edx.org</a>.</p>
</li> </li>
% endif % endif
...@@ -384,6 +400,8 @@ ...@@ -384,6 +400,8 @@
<li class="item status status-processed status-accommodations"> <li class="item status status-processed status-accommodations">
<h4 class="title">Accommodations Request</h4> <h4 class="title">Accommodations Request</h4>
<p class="details">Your requested accommodations have been reviewed and processed. You are allowed no accommodations.</p> <p class="details">Your requested accommodations have been reviewed and processed. You are allowed no accommodations.</p>
<p class="action">Please <a class="contact-link" href="${exam_help_href}">contact edX at exam-help@edx.org</a> if you have any questions.</p>
</li> </li>
% endif % endif
...@@ -397,21 +415,21 @@ ...@@ -397,21 +415,21 @@
% if registration.registration_is_accepted: % if registration.registration_is_accepted:
<li class="item status status-processed status-registration"> <li class="item status status-processed status-registration">
<h4 class="title">Registration Request</h4> <h4 class="title">Registration Request</h4>
<p class="details">Your exam registration has been processed and has been forwarded to Pearson. You are now able to schedule an exam.</p> <p class="details">Your exam registration has been processed and has been forwarded to Pearson. <strong>You are now able to <a href="${registration.registration_signup_url}" class="exam-link">schedule a Pearson exam</a></strong>.</p>
</li> </li>
% endif % endif
% if registration.registration_is_rejected: % if registration.registration_is_rejected:
<li class="item status status-rejected status-registration"> <li class="item status status-rejected status-registration">
<h4 class="title">Registration Request</h4> <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 class="details">Your exam registration has been rejected by Pearson. <strong>You currently cannot schedule an exam</strong>. The errors found include:</p>
Please contact edX at <a class="contact-link" href="${exam_help_href}">exam-help@edx.org</a>. The errors found include:</p>
<ul class="error-list"> <ul class="error-list">
<li class="item">${registration.upload_error_message}.</li> <li class="item">${registration.upload_error_message}</li>
</ul> </ul>
<p class="action">Please <a class="contact-link" href="${exam_help_href}">contact edX at exam-help@edx.org</a>.</p>
</li> </li>
% endif % endif
</ol> </ol>
</div> </div>
...@@ -420,7 +438,6 @@ ...@@ -420,7 +438,6 @@
% endif % endif
<div class="details details-course"> <div class="details details-course">
<!-- NOTE: showing course details -->
<h4>About ${get_course_about_section(course, 'university')} ${course.number}</h4> <h4>About ${get_course_about_section(course, 'university')} ${course.number}</h4>
<p> <p>
% if course.has_ended(): % if course.has_ended():
...@@ -434,7 +451,6 @@ ...@@ -434,7 +451,6 @@
</div> </div>
<div class="details details-registration"> <div class="details details-registration">
<!-- NOTE: showing test details -->
<h4>Pearson VUE Test Details</h4> <h4>Pearson VUE Test Details</h4>
% if exam_info is not None: % if exam_info is not None:
<ul> <ul>
...@@ -453,5 +469,10 @@ ...@@ -453,5 +469,10 @@
</ul> </ul>
% endif % endif
</div> </div>
<div class="details details-contact">
<h4>Questions</h4>
<p>If you have a specific question pertaining to your registration, you may contact <a class="contact-link" href="${exam_help_href}">exam-help@edx.org</a>.</p>
</div>
</aside> </aside>
</section> </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