Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Brian Talbot
2013-08-30 16:03:42 -04:00
parent c9593f2094
commit 822caca3f7
4 changed files with 138 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
common/templates/course_modes/choose.html
View File

@@ -19,6 +19,21 @@ $(document).ready(function() {
</%block>
<%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">
<section class="wrapper">
@@ -31,19 +46,6 @@ $(document).ready(function() {
</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 when trying to register you</h3>
<div class="copy">
<p>${error}</p>
</div>
</div>
</div>
%endif
<div class="wrapper-register-choose wrapper-content-main">
<article class="register-choose content-main">
<h3 class="title">Select your track:</h3>
@@ -87,7 +89,7 @@ $(document).ready(function() {
%if error:
<div class="msg msg-error msg-inline">
<div class="copy">
<p>${error}</p>
<p><i class="msg-icon icon-warning-sign"></i> ${error}</p>
</div>
</div>
%endif

2
lms/static/sass/base/_variables.scss
View File

@@ -94,6 +94,8 @@ $m-pink: #B52A67;
$m-pink-l1: #CA2F73;
$m-pink-l2: #D33F80;
$m-pink-l3: #D7548E;
$m-pink-l4: tint($m-pink,75%);
$m-pink-l5: tint($m-pink,85%);
$m-pink-d1: #A0255B;
$m-pink-d2: #8C204F;
$m-pink-d3: #771C44;

105
lms/static/sass/views/_verification.scss
View File

@@ -291,45 +291,77 @@
// ====================
// UI: error
.wrapper-msg-error {
position: relative;
top: -($baseline*0.75);
// UI : message
.wrapper-msg {
width: flex-grid(12,12);
margin-bottom: $baseline;
border-top: ($baseline/4) solid $red;
padding: ($baseline*0.75) $baseline;
background: tint($red, 95%);
margin: 0 auto ($baseline*1.5) auto;
border-bottom: ($baseline/4) solid $m-blue;
padding: $baseline ($baseline*1.5);
background: tint($m-blue, 95%);
.msg-error, .icon {
.msg-content, .msg-icon {
display: inline-block;
vertical-align: middle;
}
.msg-error {
@include clearfix();
.msg-content {
width: flex-grid(11,12);
.title {
@extend .t-title5;
@extend .t-title6;
@extend .t-weight4;
color: $red;
}
.copy {
@extend .t-copy-base;
color: $red;
@extend .t-copy-sub1;
}
}
.icon {
.msg-icon {
width: flex-grid(1,12);
@extend .t-icon2;
color: $red;
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-error {
@@ -1247,6 +1279,7 @@
min-height: ($baseline*15);
float: left;
margin-right: flex-gutter();
border-color: $m-green-l3;
text-align: center;
&:last-child {
@@ -1257,7 +1290,7 @@
@extend .t-title5;
@extend .t-weight4;
padding: $baseline;
border-bottom: 1px solid $m-green-l2;
border-bottom: 1px solid $m-green-l3;
background: $m-green-l4;
}
@@ -1316,6 +1349,42 @@
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);
}
}
}
}

39
lms/templates/verify_student/show_requirements.html
View File

@@ -5,6 +5,20 @@
<%block name="title"><title>${("Register for [Course Name]")}</title></%block>
<%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">
<section class="wrapper">
@@ -21,9 +35,6 @@
</span>
</h2>
</header>
%if is_not_active:
<p>I AM NOT ACTIVE.</p>
%endif
<div class="wrapper-progress">
<section class="progress">
@@ -78,7 +89,23 @@
<p>There are a few things you will need to register as an ID verified student:</p>
</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">
<h4 class="title">Identification</h4>
<div class="placeholder-art">
@@ -123,12 +150,12 @@
</li>
</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>
<ol class="wizard-steps">
<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>
</ol>
</nav>