Skip to content

E
edx-platform
Commit 822caca3 by Brian Talbot
Options

Verified: revises styling/presentation of alerts/errors for intro state

parent c9593f20
Showing with 138 additions and 38 deletions
common/templates/course_modes/choose.html
...@@ -19,6 +19,21 @@ $(document).ready(function() { ...@@ -19,6 +19,21 @@ $(document).ready(function() {
</%block> </%block>
<%block name="content"> <%block name="content">
%if error:
<div class="wrapper-msg wrapper-msg-error">
<div class=" msg msg-error">
<i class="msg-icon icon-warning-sign"></i>
<div class="msg-content">
<h3 class="title">Sorry, there was an error when trying to register you</h3>
<div class="copy">
<p>${error}</p>
</div>
</div>
</div>
</div>
%endif
<div class="container"> <div class="container">
<section class="wrapper"> <section class="wrapper">
...@@ -31,19 +46,6 @@ $(document).ready(function() { ...@@ -31,19 +46,6 @@ $(document).ready(function() {
</h2> </h2>
</header> </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 when trying to register you</h3>
<div class="copy">
<p>${error}</p>
</div>
</div>
</div>
%endif
<div class="wrapper-register-choose wrapper-content-main"> <div class="wrapper-register-choose wrapper-content-main">
<article class="register-choose content-main"> <article class="register-choose content-main">
<h3 class="title">Select your track:</h3> <h3 class="title">Select your track:</h3>
...@@ -87,7 +89,7 @@ $(document).ready(function() { ...@@ -87,7 +89,7 @@ $(document).ready(function() {
%if error: %if error:
<div class="msg msg-error msg-inline"> <div class="msg msg-error msg-inline">
<div class="copy"> <div class="copy">
<p>${error}</p> <p><i class="msg-icon icon-warning-sign"></i> ${error}</p>
</div> </div>
</div> </div>
%endif %endif
......
lms/static/sass/base/_variables.scss
...@@ -94,6 +94,8 @@ $m-pink: #B52A67; ...@@ -94,6 +94,8 @@ $m-pink: #B52A67;
$m-pink-l1: #CA2F73; $m-pink-l1: #CA2F73;
$m-pink-l2: #D33F80; $m-pink-l2: #D33F80;
$m-pink-l3: #D7548E; $m-pink-l3: #D7548E;
$m-pink-l4: tint($m-pink,75%);
$m-pink-l5: tint($m-pink,85%);
$m-pink-d1: #A0255B; $m-pink-d1: #A0255B;
$m-pink-d2: #8C204F; $m-pink-d2: #8C204F;
$m-pink-d3: #771C44; $m-pink-d3: #771C44;
......
lms/static/sass/views/_verification.scss
...@@ -291,45 +291,77 @@ ...@@ -291,45 +291,77 @@
// ==================== // ====================
// UI: error // UI : message
.wrapper-msg-error { .wrapper-msg {
position: relative;
top: -($baseline*0.75);
width: flex-grid(12,12); width: flex-grid(12,12);
margin-bottom: $baseline; margin: 0 auto ($baseline*1.5) auto;
border-top: ($baseline/4) solid $red; border-bottom: ($baseline/4) solid $m-blue;
padding: ($baseline*0.75) $baseline; padding: $baseline ($baseline*1.5);
background: tint($red, 95%); background: tint($m-blue, 95%);
.msg-error, .icon { .msg-content, .msg-icon {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
.msg-error { .msg-content {
@include clearfix();
width: flex-grid(11,12); width: flex-grid(11,12);
.title { .title {
@extend .t-title5; @extend .t-title6;
@extend .t-weight4; @extend .t-weight4;
color: $red;
} }
.copy { .copy {
@extend .t-copy-base; @extend .t-copy-sub1;
color: $red;
} }
} }
.icon { .msg-icon {
width: flex-grid(1,12); width: flex-grid(1,12);
@extend .t-icon2; @extend .t-icon2;
color: $red;
text-align: center; text-align: center;
color: $m-blue;
}
}
// UI: error
.wrapper-msg-error {
border-bottom-color: $red;
background: tint($red, 95%);
.msg-icon {
color: $red;
}
.msg-content {
.title {
color: $red;
}
} }
} }
// UI: error
.wrapper-msg-activate {
border-bottom-color: $m-pink;
background: tint($m-pink, 95%);
.msg-icon {
color: $m-pink;
}
.msg-content {
.title {
color: $m-pink;
}
}
}
// ====================
// UI: inline messages
.msg-inline { .msg-inline {
&.msg-error { &.msg-error {
...@@ -1247,6 +1279,7 @@ ...@@ -1247,6 +1279,7 @@
min-height: ($baseline*15); min-height: ($baseline*15);
float: left; float: left;
margin-right: flex-gutter(); margin-right: flex-gutter();
border-color: $m-green-l3;
text-align: center; text-align: center;
&:last-child { &:last-child {
...@@ -1257,7 +1290,7 @@ ...@@ -1257,7 +1290,7 @@
@extend .t-title5; @extend .t-title5;
@extend .t-weight4; @extend .t-weight4;
padding: $baseline; padding: $baseline;
border-bottom: 1px solid $m-green-l2; border-bottom: 1px solid $m-green-l3;
background: $m-green-l4; background: $m-green-l4;
} }
...@@ -1316,6 +1349,42 @@ ...@@ -1316,6 +1349,42 @@
padding: ($baseline/2) $baseline; padding: ($baseline/2) $baseline;
} }
} }
// specific requirements
.req-activate {
float: left;
text-align: center;
border-color: $m-pink-l4;
.title {
@extend .t-title4;
@extend .t-weight4;
border-bottom-color: $m-pink-l4;
background: $m-pink-l5;
}
.placeholder-art {
background: $m-pink-l4;
}
.copy-super {
@extend .t-copy-lead1;
color: $m-pink;
}
.copy-sub {
@extend .t-copy-base;
}
}
// CASE: account not activated
&.account-not-activated {
.req {
width: flex-grid(3,12);
min-height: ($baseline*18);
}
}
} }
} }
......
lms/templates/verify_student/show_requirements.html
...@@ -5,6 +5,20 @@ ...@@ -5,6 +5,20 @@
<%block name="title"><title>${("Register for [Course Name]")}</title></%block> <%block name="title"><title>${("Register for [Course Name]")}</title></%block>
<%block name="content"> <%block name="content">
%if is_not_active:
<div class="wrapper-msg wrapper-msg-activate">
<div class=" msg msg-activate">
<i class="msg-icon icon-warning-sign"></i>
<div class="msg-content">
<h3 class="title">You need to activate your account before proceeding</h3>
<div class="copy">
<p>Please check your email for further instructions on verifying your new account.</p>
</div>
</div>
</div>
</div>
%endif
<div class="container"> <div class="container">
<section class="wrapper"> <section class="wrapper">
...@@ -21,9 +35,6 @@ ...@@ -21,9 +35,6 @@
</span> </span>
</h2> </h2>
</header> </header>
%if is_not_active:
<p>I AM NOT ACTIVE.</p>
%endif
<div class="wrapper-progress"> <div class="wrapper-progress">
<section class="progress"> <section class="progress">
...@@ -78,7 +89,23 @@ ...@@ -78,7 +89,23 @@
<p>There are a few things you will need to register as an ID verified student:</p> <p>There are a few things you will need to register as an ID verified student:</p>
</div> </div>
<ul class="list-reqs"> <ul class="list-reqs account-not-activated ${"account-not-activated" if is_not_active else ""}">
%if is_not_active:
<li class="req req-0 req-activate">
<h4 class="title">Activate Your Account</h4>
<div class="placeholder-art">
<i class="icon-envelope-alt"></i>
</div>
<div class="copy">
<p>
<span class="copy-super">Check Your Email</span>
<span class="copy-sub">Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</span>
</p>
</div>
</li>
%endif
<li class="req req-1 req-id"> <li class="req req-1 req-id">
<h4 class="title">Identification</h4> <h4 class="title">Identification</h4>
<div class="placeholder-art"> <div class="placeholder-art">
...@@ -123,12 +150,12 @@ ...@@ -123,12 +150,12 @@
</li> </li>
</ul> </ul>
<nav class="nav-wizard"> <nav class="nav-wizard ${"is-not-ready" if is_not_active else "is-ready"}">
<span class="help help-inline">Missing something? You can always <a href="">audit this course instead</a></span> <span class="help help-inline">Missing something? You can always <a href="">audit this course instead</a></span>
<ol class="wizard-steps"> <ol class="wizard-steps">
<li class="wizard-step"> <li class="wizard-step">
<a class="next action-primary" id="face_next_button" href="${reverse('verify_student_verify', kwargs={'course_id': course_id})}">Go to Step 1: Take my Photo</a> <a class="next action-primary ${"disabled" if is_not_active else ""}" id="face_next_button" href="${reverse('verify_student_verify', kwargs={'course_id': course_id})}">Go to Step 1: Take my Photo</a>
</li> </li>
</ol> </ol>
</nav> </nav>
......
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