From 822caca3f7e8bb7d273201be2567abd6b911eb75 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Fri, 30 Aug 2013 16:03:42 -0400 Subject: [PATCH] Verified: revises styling/presentation of alerts/errors for intro state --- common/templates/course_modes/choose.html | 30 ++--- lms/static/sass/base/_variables.scss | 2 + lms/static/sass/views/_verification.scss | 105 +++++++++++++++--- .../verify_student/show_requirements.html | 39 ++++++- 4 files changed, 138 insertions(+), 38 deletions(-) diff --git a/common/templates/course_modes/choose.html b/common/templates/course_modes/choose.html index ebe86ff8f8..1910dd548e 100644 --- a/common/templates/course_modes/choose.html +++ b/common/templates/course_modes/choose.html @@ -19,6 +19,21 @@ $(document).ready(function() { <%block name="content"> + +%if error: +
+
+ +
+

Sorry, there was an error when trying to register you

+
+

${error}

+
+
+
+
+%endif +
@@ -31,19 +46,6 @@ $(document).ready(function() { - %if error: -
- - -
-

Sorry, there was an error when trying to register you

-
-

${error}

-
-
-
- %endif -

Select your track:

@@ -87,7 +89,7 @@ $(document).ready(function() { %if error:
-

${error}

+

${error}

%endif diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss index 46ba69d89d..6364523401 100644 --- a/lms/static/sass/base/_variables.scss +++ b/lms/static/sass/base/_variables.scss @@ -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; diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss index c83be5b18f..764d19f6b7 100644 --- a/lms/static/sass/views/_verification.scss +++ b/lms/static/sass/views/_verification.scss @@ -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); + } + } } } diff --git a/lms/templates/verify_student/show_requirements.html b/lms/templates/verify_student/show_requirements.html index 7edb3be3b2..81aa8ef321 100644 --- a/lms/templates/verify_student/show_requirements.html +++ b/lms/templates/verify_student/show_requirements.html @@ -5,6 +5,20 @@ <%block name="title">${("Register for [Course Name]")} <%block name="content"> +%if is_not_active: +
+
+ +
+

You need to activate your account before proceeding

+
+

Please check your email for further instructions on verifying your new account.

+
+
+
+
+%endif +
@@ -21,9 +35,6 @@ - %if is_not_active: -

I AM NOT ACTIVE.

- %endif
@@ -78,7 +89,23 @@

There are a few things you will need to register as an ID verified student:

-