Skip to content

E
edx-platform
Commit 248b5a94 by Brian Talbot
Options

Verified: visually cleans up - UI spacing, error styling, registering for badge

parent e9a0755e
Showing with 72 additions and 37 deletions
common/templates/course_modes/choose.html
......@@ -28,18 +28,18 @@ $(document).ready(function() {
<span class="sts">You are registering for</span>
<span class="sts-course">${course_id} </span>
</span>
<span class="sts-track">
<span class="sts-track-label">Registering as: </span>
<span class="sts-track-value">ID Verified</span>
</span>
</h2>
</header>
%if error:
<div class="wrapper-msg wrapper-msg-error">
<i class="icon icon-warning-sign expandable-icon"></i>
<div class=" msg msg-error">
<h3 class="title">Sorry, there was an error with your registration</h3>
<div class="copy">${error}</div>
<h3 class="title">Sorry, there was an error when trying to register you</h3>
<div class="copy">
<p>${error}</p>
</div>
</div>
</div>
%endif
......@@ -75,19 +75,27 @@ $(document).ready(function() {
<div class="register-choice register-choice-certificate">
<div class="wrapper-copy">
<span class="deco-ribbon"></span>
<h4 class="title">Certificate of Achievement</h4>
<h4 class="title">Certificate of Achievement &mdash; ID Verified</h4>
<div class="copy">
<p>Sign up as a verified student and work toward a Certificate of Achievement.</p>
<p>Sign up and work toward a verified Certificate of Achievement.</p>
</div>
</div>
<div class="field field-certificate-contribution">
<h5 class="label">Select your contribution for this course:</h5>
%if error:
<div class="msg msg-error msg-inline">
<div class="copy">
<p>${error}</p>
</div>
</div>
%endif
<%include file="_contribution.html" args="suggested_prices=suggested_prices, currency=currency, chosen_price=chosen_price"/>
<div class="help-tip is-expandable">
<h5 class="title title-expand">Why do I have to pay? What if I don't meet all the requirements? <i class="icon-caret-down expandable-icon"></i></h5>
<h5 class="title title-expand"><i class="icon-caret-down expandable-icon"></i> Why do I have to pay? What if I don't meet all the requirements?</h5>
<div class="copy expandable-area">
<dl class="list-faq">
......
lms/static/sass/views/_verification.scss
......@@ -121,7 +121,7 @@
@include transition(all 0.25s ease-in-out 0s);
display: inline-block;
vertical-align: middle;
margin-left: ($baseline/4);
margin-right: ($baseline/4);
}
.expandable-area {
......@@ -131,14 +131,16 @@
// STATE: active
&.is-ready {
.expandable-icon {
@include transform(rotate(-90deg));
}
.title-expand {
@extend .ui-fake-link;
color: $m-blue-d2;
border-bottom: 1px dotted transparent;
&:hover {
color: $m-blue-d2;
border-bottom: 1px dotted $m-blue-d2;
color: $m-blue;
}
}
......@@ -152,7 +154,7 @@
&.is-expanded {
.expandable-icon {
@include transform(rotate(-180deg));
@include transform(rotate(0));
@include transform-origin(50% 50%);
}
......@@ -291,28 +293,49 @@
// UI: error
.wrapper-msg-error {
position: relative;
top: -($baseline*0.75);
width: flex-grid(12,12);
border-radius: ($baseline/5);
margin-bottom: $baseline;
padding: $baseline ($baseline*1.25);
box-shadow: 0 2px 1px 0 tint($red,90%);
background: $red;
border-top: ($baseline/4) solid $red;
padding: ($baseline*0.75) $baseline;
background: tint($red, 95%);
.msg-error, .icon {
display: inline-block;
vertical-align: middle;
}
.msg-error {
@include clearfix();
width: flex-grid(11,12);
.title {
@extend .t-title5;
@extend .t-weight4;
margin-bottom: ($baseline/2);
border-bottom: ($baseline/10) solid tint($red,35%);
padding-bottom: ($baseline/2);
color: tint($red,90%);
color: $red;
}
.copy {
@extend .t-copy-base;
color: tint($red,65%);
color: $red;
}
}
.icon {
width: flex-grid(1,12);
@extend .t-icon2;
color: $red;
text-align: center;
}
}
.msg-inline {
&.msg-error {
.copy, .copy p {
color: $red;
}
}
}
......@@ -322,7 +345,7 @@
// UI: page header
.page-header {
width: flex-grid(12,12);
margin: 0 0 $baseline 0;
margin: 0 0 ($baseline/2) 0;
border-bottom: ($baseline/4) solid $m-gray-l4;
.title {
......@@ -342,14 +365,16 @@
width: flex-grid(3,12);
text-align: right;
.sts-track-label {
@extend .text-sr;
}
.sts-track-value {
@extend .copy-badge;
color: $white;
background: $m-green-l2;
.context {
margin-right: ($baseline/4);
opacity: 0.80;
color: $white;
}
}
}
......@@ -496,7 +521,7 @@
// indiv slides
.wrapper-view {
padding: 0 $baseline !important;
}
.view {
......@@ -516,12 +541,12 @@
.wrapper-task {
@include clearfix();
width: flex-grid(12,12);
margin: ($baseline*2) 0 $baseline 0;
margin: $baseline 0;
.wrapper-help {
float: right;
width: flex-grid(6,12);
padding: ($baseline*0.75) $baseline;
padding: 0 $baseline;
.help {
margin-bottom: ($baseline*1.5);
......@@ -858,7 +883,6 @@
@extend .ui-well;
@include clearfix;
width: flex-grid(12,12);
margin: $baseline 0;
border-radius: ($baseline/10);
background: $m-gray-l4;
......@@ -1056,6 +1080,7 @@
.action-select input {
@extend .t-weight4;
padding: ($baseline/2) ($baseline*0.75);
}
}
......@@ -1090,7 +1115,7 @@
}
.list-actions {
margin-top: $baseline;
margin: ($baseline/2) 0;
border-top: ($baseline/10) solid $m-gray-t1;
padding-top: $baseline;
}
......
lms/templates/verify_student/photo_verification.html
......@@ -180,8 +180,9 @@
<span class="sts-course">${course_id} </span>
</span>
<span class="sts-track">
<span class="sts-track-label">Registering as: </span>
<span class="sts-track-value">ID Verified</span>
<span class="sts-track-value">
<span class="context">Registering as:</span> ID Verified
</span>
</span>
</h2>
</header>
......
lms/templates/verify_student/show_requirements.html
......@@ -15,8 +15,9 @@
<span class="sts-course">${course_id}</span>
</span>
<span class="sts-track">
<span class="sts-track-label">Registering as: </span>
<span class="sts-track-value">ID Verified</span>
<span class="sts-track-value">
<span class="context">Registering as:</span> ID Verified
</span>
</span>
</h2>
</header>
......
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