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