Skip to content

E
edx-platform
Commit 352f2846 by Brian Talbot
Options

pearson registration - revised UI states for reg form, simplified markup for… 

pearson registration - revised UI states for reg form, simplified markup for form fields, synched button styles/text b/t registration form and dashboard
parent b41f68c8
Showing with 116 additions and 10 deletions
lms/static/sass/multicourse/_dashboard.scss
......@@ -410,7 +410,7 @@
margin: 20px 0 10px;
padding: 15px 20px;
font-family: $sans-serif;
background: #fffcf0;
background: tint($yellow,70%);
border: 1px solid #ccc;
.message-copy {
......@@ -498,18 +498,28 @@
}
}
.contact-button {
@include button(simple, $blue);
}
.exam-button {
@include button(simple, $pink);
}
.button {
float: right;
padding: 9px 18px 10px;
font-size: 13px;
font-weight: 400;
font-weight: bold;
letter-spacing: 0;
&:hover {
text-decoration: none;
}
}
&.is-shown {
display: block;
}
......
lms/static/sass/multicourse/_testcenter-register.scss
......@@ -71,11 +71,21 @@ $red: rgb(178, 6, 16);
@include border-radius(3px);
@include box-shadow(0 1px 2px 0 rgba(0,0,0, 0.2));
.instructions {
.instructions, .note {
margin: 0;
padding: ($baseline*1.5) ($baseline*1.5) 0 ($baseline*1.5);
font-family: $sans-serif;
font-size: 14px;
color: tint($base-font-color, 20%);
strong {
font-weight: normal;
}
.title, .indicator {
color: $base-font-color;
font-weight: 700;
}
}
fieldset {
......@@ -84,11 +94,11 @@ $red: rgb(178, 6, 16);
}
.form-actions {
@include clearfix();
padding: ($baseline*1.5);
button[type="submit"] {
display: block;
width: 100%;
@include button(simple, $blue);
@include box-sizing(border-box);
@include border-radius(3px);
......@@ -98,6 +108,23 @@ $red: rgb(178, 6, 16);
text-align: center;
}
.action-primary {
float: left;
width: flex-grid(5,8);
margin-right: flex-gutter(2);
}
.action-secondary {
display: block;
float: left;
width: flex-grid(2,8);
margin-top: $baseline;
padding: ($baseline/4);
font-size: 13px;
text-align: right;
text-transform: uppercase;
}
&.error {
}
......@@ -224,7 +251,7 @@ $red: rgb(178, 6, 16);
display: block;
float: left;
border-bottom: none;
margin: 0 ($baseline) 0 0;
margin: 0 $baseline ($baseline/2) 0;
padding-bottom: 0;
input, textarea {
......@@ -239,7 +266,7 @@ $red: rgb(178, 6, 16);
}
}
&.postal {
&.postal-2 {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
......@@ -268,7 +295,6 @@ $red: rgb(178, 6, 16);
padding: $baseline ($baseline*1.5) 0 ($baseline*1.5);
font-family: $sans-serif;
font-size: 13px;
text-align: right;
&.is-hidden {
display: none;
......@@ -343,7 +369,7 @@ $red: rgb(178, 6, 16);
top: 0;
right: $baseline;
margin-left: $baseline;
content: "testing";
content: "not started";
text-transform: uppercase;
font-size: 11px;
font-weight: normal;
......@@ -408,6 +434,18 @@ $red: rgb(178, 6, 16);
}
}
&.status-initial {
&:before {
background: transparent;
border: 1px dotted gray;
}
.title:after {
color: gray;
}
}
&:hover {
.details, .item {
......@@ -438,6 +476,10 @@ $red: rgb(178, 6, 16);
background: tint($yellow,70%);
font-size: 14px;
.title {
font-size: 14px;
}
.label, .value {
display: inline-block;
}
......@@ -556,6 +598,58 @@ $red: rgb(178, 6, 16);
font-size: 14px;
}
// registration status
&.message-flash {
display: block;
@include border-radius(3px);
position: relative;
margin: 0 0 ($baseline*2) 0;
border: 1px solid #ccc;
padding-top: ($baseline*0.75);
background: tint($yellow,70%);
font-size: 14px;
.message-title, .message-copy {
font-family: $sans-serif;
font-size: 14px;
}
.message-title {
font-weight: bold;
margin: 0 0 ($baseline/4) 0;
}
.contact-button {
@include button(simple, $blue);
}
.exam-button {
@include button(simple, $pink);
}
.button {
position: absolute;
top: ($baseline/4);
right: $baseline;
margin: ($baseline/2) 0 0 0;
padding: ($baseline/2) $baseline;
font-size: 13px;
font-weight: bold;
&:hover {
text-decoration: none;
}
}
&.message-action {
.message-title, .message-copy {
width: 65%;
}
}
}
// submission error
&.submission-error {
border: 1px solid tint($red,85%);
......
lms/templates/dashboard.html
......@@ -228,8 +228,8 @@
% 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 and will close on <strong>${testcenter_exam_info.registration_end_date_text}</strong></p>
<a href="${testcenter_register_target}" class="button exam-button" id="exam_register_button">Register for Pearson exam</a>
<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 -->
......@@ -245,10 +245,12 @@
% if registration.is_rejected():
<!-- TODO: revise rejection text -->
<div class="message message-status is-shown exam-schedule">
<a href="mailto:exam-help@edx.org?subject=Pearson VUE Exam - ${get_course_about_section(course, 'university')} ${course.number}" class="button contact-button">Contact exam-help@edx.org</a>
<p class="message-copy">Your
<a href="${testcenter_register_target}" id="exam_register_link">registration for the Pearson exam</a>
has been rejected. Please check the information you provided, and try to correct any demographic errors. Otherwise
contact someone at edX or Pearson, or just scream for help.</p>
</div>
% endif
% if not registration.is_accepted() and not registration.is_rejected():
......
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