diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss
index dff281e1d563f51a05de8de7b2e2ec06cea20997..8ed84ae2a7fd1aeb6a77a9c9fb2fafddd86d6d4e 100644
--- a/lms/static/sass/base/_variables.scss
+++ b/lms/static/sass/base/_variables.scss
@@ -224,6 +224,15 @@ $error-color: $error-red;
$warning-color: $m-pink;
$confirm-color: $m-green;
+// Notifications
+$notify-banner-bg1: rgb(56,56,56);
+$notify-banner-bg2: rgb(136,136,136);
+$notify-banner-bg3: rgb(223,223,223);
+
+$alert-color: rgb(212, 64, 64); //rich red
+$warning-color: rgb(237, 189, 60); //rich yellow
+$success-color: rgb(37, 184, 90); //rich green
+
// ====================
// MISC: visual horizontal rules
diff --git a/lms/static/sass/elements/_system-feedback.scss b/lms/static/sass/elements/_system-feedback.scss
index 5ee7cc591b05a76edffa2f7b5bb812325dae1573..963e8a2b59293e8dfd63af16cf952431e2d8edb7 100644
--- a/lms/static/sass/elements/_system-feedback.scss
+++ b/lms/static/sass/elements/_system-feedback.scss
@@ -5,11 +5,12 @@
// UI : message
.wrapper-msg {
- box-shadow: 0 0 5px $action-primary-shadow inset;
- margin-bottom: ($baseline*1.5);
+ box-shadow: 0 0 5px $shadow-d1 inset;
+ margin-bottom: ($baseline/4);
padding: $baseline ($baseline*1.5);
- background: $action-primary-bg;
+ background: $notify-banner-bg1;
+ // basic object
.msg {
@include clearfix();
max-width: grid-width(12);
@@ -25,24 +26,23 @@
}
.msg-content {
- width: flex-grid(10,12);
.title {
@extend %t-title5;
@extend %t-weight4;
margin-bottom: ($baseline/4);
- color: $white;
+ color: inherit;
text-transform: none;
letter-spacing: 0;
}
.copy {
@extend %t-copy-sub1;
- color: $white;
+ color: inherit;
p { // nasty reset
@extend %t-copy-sub1;
- color: $white;
+ color: inherit;
}
}
}
@@ -57,6 +57,7 @@
width: flex-grid(2,12);
display: inline-block;
vertical-align: middle;
+ text-align: right;
.action-primary {
@extend %btn-primary-green;
@@ -64,7 +65,65 @@
}
}
+ .is-dismissable {
+
+ .msg-content {
+ width: flex-grid(11,12);
+ }
+
+ .action-dismiss {
+ width: flex-grid(1,12);
+ display: inline-block;
+ vertical-align: top;
+ text-align: right;
+
+ .button-dismiss { //ugly reset on button element
+ @extend %t-icon4;
+ background: none;
+ box-shadow: none;
+ border: none;
+ text-shadow: none;
+ color: inherit;
+ }
+ }
+ }
+
+ // object variations
+ &.urgency-high {
+ background: $notify-banner-bg1;
+
+ .msg {
+ color: $white;
+ }
+ }
+ &.urgency-mid {
+ background: $notify-banner-bg2;
+
+ .msg {
+ color: $white;
+ }
+ }
+
+ &.urgency-low {
+ background: $notify-banner-bg3;
+
+ .msg {
+ color: $black;
+ }
+ }
+
+ &.alert {
+ border-top: 3px solid $alert-color;
+ }
+
+ &.warning {
+ border-top: 3px solid $warning-color;
+ }
+
+ &.success {
+ border-top: 3px solid $success-color;
+ }
}
// prompts
diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss
index 6d6a782b73099d6e8183ed4fbd1bc45999f43ca4..3170b1e468c3fbea27dbb586a5290ca26090947e 100644
--- a/lms/static/sass/multicourse/_dashboard.scss
+++ b/lms/static/sass/multicourse/_dashboard.scss
@@ -133,6 +133,51 @@
}
}
}
+
+ .reverify-status-list {
+ padding: 0 0 0 9px;
+
+ .status-item {
+ @extend %t-copy-sub2;
+ margin-bottom: 7px;
+ border-bottom: 0;
+ padding: 0;
+
+ [class^="icon-"] {
+ display: inline-block;
+ vertical-align: top;
+ margin: ($baseline/10) ($baseline/4) 0 0;
+ }
+
+ &.is-open [class^="icon-"] {
+ color: $action-primary-bg;
+ }
+
+ &.is-pending [class^="icon-"] {
+ color: $warning-color;
+ }
+
+ &.is-approved [class^="icon-"] {
+ color: $success-color;
+ }
+
+ &.is-denied [class^="icon-"] {
+ color: $alert-color;
+ }
+
+ .label {
+ @extend %text-sr;
+ }
+
+ .course-name {
+ display: inline-block;
+ vertical-align: top;
+ width: 80%;
+ color: inherit;
+ line-height: 1.4;
+ }
+ }
+ }
}
.news-carousel {
diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss
index 8d029a5d185059cffa2666597797d1ad5d8e0794..8163a5850274c9b3171216d91e029c9f4dde7d1b 100644
--- a/lms/static/sass/views/_verification.scss
+++ b/lms/static/sass/views/_verification.scss
@@ -1832,8 +1832,9 @@
}
.reverification-list {
+ margin-right: ($baseline*1.5);
+ padding: 0;
list-style-type: none;
- padding: 0 $baseline;
.item {
box-shadow: 0 2px 5px 0 $shadow-l1 inset;
@@ -1841,7 +1842,15 @@
border: 1px solid $m-gray-t2;
&.complete {
- border: 1px solid $verified-color-lvl1;
+ border: 1px solid $verified-color-lvl3;
+
+ .course-info {
+ opacity: .5;
+
+ .course-name {
+ font-weight: normal;
+ }
+ }
.reverify-status {
border-top: 1px solid $light-gray;
@@ -1852,7 +1861,15 @@
}
&.failed {
- border: 1px solid $danger-red;
+ border: 1px solid $error-red;
+
+ .course-info {
+ opacity: .5;
+
+ .course-name {
+ font-weight: normal;
+ }
+ }
.reverify-status {
border-top: 1px solid $light-gray;
@@ -1914,134 +1931,198 @@
}
// step-photos
- .wrapper-task {
- @include clearfix();
- width: flex-grid(12,12);
- margin: $baseline 0;
+ &.step-photos {
- .wrapper-help {
- float: right;
- width: flex-grid(6,12);
- padding: 0 $baseline;
+ .block-photo .title {
+ @extend %t-title4;
+ color: $m-blue-d1;
+ }
- .help {
- margin-bottom: ($baseline*1.5);
+ .wrapper-task {
+ @include clearfix();
+ width: flex-grid(12,12);
+ margin: $baseline 0;
- &:last-child {
- margin-bottom: 0;
- }
+ .wrapper-help {
+ float: right;
+ width: flex-grid(6,12);
+ padding: 0 $baseline;
- .title {
- @extend %hd-lv3;
- }
+ .help {
+ margin-bottom: ($baseline*1.5);
- .copy {
- @extend %copy-detail;
- }
+ &:last-child {
+ margin-bottom: 0;
+ }
- .example {
- color: $m-gray-l2;
- }
+ .title {
+ @extend %hd-lv3;
+ }
- // help - general list
- .list-help {
- margin-top: ($baseline/2);
- color: $black;
+ .copy {
+ @extend %copy-detail;
+ }
- .help-item {
- margin-bottom: ($baseline/4);
- border-bottom: 1px solid $m-gray-l4;
- padding-bottom: ($baseline/4);
+ .example {
+ color: $m-gray-l2;
+ }
- &:last-child {
- margin-bottom: 0;
- border-bottom: none;
- padding-bottom: 0;
+ // help - general list
+ .list-help {
+ margin-top: ($baseline/2);
+ color: $black;
+
+ .help-item {
+ margin-bottom: ($baseline/4);
+ border-bottom: 1px solid $m-gray-l4;
+ padding-bottom: ($baseline/4);
+
+ &:last-child {
+ margin-bottom: 0;
+ border-bottom: none;
+ padding-bottom: 0;
+ }
+ }
+
+ .help-item-emphasis {
+ @extend %t-weight4;
}
}
- .help-item-emphasis {
- @extend %t-weight4;
+ // help - faq
+ .list-faq {
+ margin-bottom: $baseline;
}
}
+ }
- // help - faq
- .list-faq {
- margin-bottom: $baseline;
- }
+ .task {
+ @extend %ui-window;
+ float: left;
+ width: flex-grid(6,12);
+ margin-right: flex-gutter();
}
- }
- .task {
- @extend %ui-window;
- float: left;
- width: flex-grid(6,12);
- margin-right: flex-gutter();
- }
+ .controls {
+ padding: ($baseline*0.75) $baseline;
+ background: $m-gray-l4;
- .controls {
- padding: ($baseline*0.75) $baseline;
- background: $m-gray-l4;
+ .list-controls {
+ position: relative;
+ }
- .list-controls {
- position: relative;
- }
+ .control {
+ position: absolute;
- .control {
- position: absolute;
+ .action {
+ @extend %btn-primary-blue;
+ padding: ($baseline/2) ($baseline*0.75);
- .action {
- @extend %btn-primary-blue;
- padding: ($baseline/2) ($baseline*0.75);
+ *[class^="icon-"] {
+ @extend %t-icon4;
+ padding: ($baseline*.25) ($baseline*.5);
+ display: block;
+ }
+ }
- *[class^="icon-"] {
- @extend %t-icon4;
- padding: ($baseline*.25) ($baseline*.5);
- display: block;
+ // STATE: hidden
+ &.is-hidden {
+ visibility: hidden;
+ }
+
+ // STATE: shown
+ &.is-shown {
+ visibility: visible;
+ }
+
+ // STATE: approved
+ &.approved {
+
+ .action {
+ @extend %btn-verify-primary;
+ padding: ($baseline/2) ($baseline*0.75);
+ }
}
}
- // STATE: hidden
- &.is-hidden {
- visibility: hidden;
+ // control - redo
+ .control-redo {
+ position: absolute;
+ left: ($baseline/2);
}
- // STATE: shown
- &.is-shown {
- visibility: visible;
+ // control - take/do
+ .control-do {
+ left: 45%;
}
- // STATE: approved
- &.approved {
+ // control - approve
+ .control-approve {
+ position: absolute;
+ right: ($baseline/2);
+ }
+ }
- .action {
- @extend %btn-verify-primary;
- padding: ($baseline/2) ($baseline*0.75);
+ .msg {
+ @include clearfix();
+ margin-top: ($baseline*2);
+
+ .copy {
+ float: left;
+ width: flex-grid(8,12);
+ margin-right: flex-gutter();
+ }
+
+ .list-actions {
+ position: relative;
+ top: -($baseline/2);
+ float: left;
+ width: flex-grid(4,12);
+ text-align: right;
+
+ .action-retakephotos a {
+ @extend %btn-primary-blue;
+ @include font-size(14);
+ padding: ($baseline/2) ($baseline*.75);
}
}
}
- // control - redo
- .control-redo {
- position: absolute;
- left: ($baseline/2);
+ .msg-followup {
+ border-top: ($baseline/10) solid $m-gray-t0;
+ padding-top: $baseline;
}
+ }
- // control - take/do
- .control-do {
- left: 45%;
+ .review-task {
+ margin-bottom: ($baseline*1.5);
+ padding: ($baseline*0.75) $baseline;
+ border-radius: ($baseline/10);
+ background: $m-gray-l4;
+
+ &:last-child {
+ margin-bottom: 0;
}
- // control - approve
- .control-approve {
- position: absolute;
- right: ($baseline/2);
+ > .title {
+ @extend %hd-lv3;
+ }
+
+ .copy {
+ @extend %copy-base;
+
+ strong {
+ @extend %t-weight5;
+ color: $m-gray-d4;
+ }
}
}
- .msg {
+
+ // individual task - name
+ .review-task-name {
@include clearfix();
- margin-top: ($baseline*2);
+ border: 1px solid $light-gray;
.copy {
float: left;
@@ -2051,12 +2132,12 @@
.list-actions {
position: relative;
- top: -($baseline/2);
+ top: -($baseline);
float: left;
width: flex-grid(4,12);
text-align: right;
- .action-retakephotos a {
+ .action-editname a {
@extend %btn-primary-blue;
@include font-size(14);
padding: ($baseline/2) ($baseline*.75);
@@ -2064,123 +2145,67 @@
}
}
- .msg-followup {
- border-top: ($baseline/10) solid $m-gray-t0;
- padding-top: $baseline;
- }
- }
-
+ .nav-wizard {
+ padding: ($baseline*.75) $baseline;
- .review-task {
- margin-bottom: ($baseline*1.5);
- padding: ($baseline*0.75) $baseline;
- border-radius: ($baseline/10);
- background: $m-gray-l4;
+ .prompt-verify {
+ float: left;
+ width: flex-grid(6,12);
+ margin: 0 flex-gutter() 0 0;
- &:last-child {
- margin-bottom: 0;
- }
+ .title {
+ @extend %hd-lv4;
+ margin-bottom: ($baseline/4);
+ }
- > .title {
- @extend %hd-lv3;
- }
+ .copy {
+ @extend %t-copy-sub1;
+ @extend %t-weight3;
+ }
- .copy {
- @extend %copy-base;
+ .list-actions {
+ margin-top: ($baseline/2);
+ }
- strong {
- @extend %t-weight5;
- color: $m-gray-d4;
+ .action-verify label {
+ @extend %t-copy-sub1;
+ }
}
- }
- }
-
-
- // individual task - name
- .review-task-name {
- @include clearfix();
- .copy {
- float: left;
- width: flex-grid(8,12);
- margin-right: flex-gutter();
- }
+ .wizard-steps {
+ margin-top: ($baseline/2);
- .list-actions {
- position: relative;
- top: -($baseline);
- float: left;
- width: flex-grid(4,12);
- text-align: right;
+ .wizard-step {
+ margin-right: flex-gutter();
+ display: inline-block;
+ vertical-align: middle;
- .action-editname a {
- @extend %btn-primary-blue;
- @include font-size(14);
- padding: ($baseline/2) ($baseline*.75);
+ &:last-child {
+ margin-right: 0;
+ }
+ }
}
}
- }
- .nav-wizard {
- padding: ($baseline*.75) $baseline;
- .prompt-verify {
- float: left;
- width: flex-grid(6,12);
- margin: 0 flex-gutter() 0 0;
+ .modal {
- .title {
- @extend %hd-lv4;
- margin-bottom: ($baseline/4);
+ fieldset {
+ margin-top: $baseline;
}
- .copy {
- @extend %t-copy-sub1;
- @extend %t-weight3;
- }
+ .close-modal {
+ @include font-size(24);
+ color: $m-blue-d3;
- .list-actions {
- margin-top: ($baseline/2);
- }
-
- .action-verify label {
- @extend %t-copy-sub1;
- }
- }
-
- .wizard-steps {
- margin-top: ($baseline/2);
-
- .wizard-step {
- margin-right: flex-gutter();
- display: inline-block;
- vertical-align: middle;
-
- &:last-child {
- margin-right: 0;
+ &:hover, &:focus {
+ color: $m-blue-d1;
+ border: none;
}
}
}
- }
-
-
- .modal {
-
- fieldset {
- margin-top: $baseline;
- }
- .close-modal {
- @include font-size(24);
- color: $m-blue-d3;
-
- &:hover, &:focus {
- color: $m-blue-d1;
- border: none;
- }
- }
}
-
}
diff --git a/lms/templates/dashboard/_dashboard_prompt_midcourse_reverify.html b/lms/templates/dashboard/_dashboard_prompt_midcourse_reverify.html
index baa37d714891d243caa1f78d3d24c13c96de24f9..3714446377bd53e6178dc3ec5b14bb2aa529a9aa 100644
--- a/lms/templates/dashboard/_dashboard_prompt_midcourse_reverify.html
+++ b/lms/templates/dashboard/_dashboard_prompt_midcourse_reverify.html
@@ -2,8 +2,9 @@
<%! from django.core.urlresolvers import reverse %>
<!--TODO replace this with something a clever deisgn person approves of-->
<!--TODO replace this with a shiny loopy thing to actually print out all courses-->
+
% if reverifications["must_reverify"]:
-<div class="wrapper-msg">
+<div class="wrapper-msg urgency-high">
<div class="msg msg-reverify has-actions">
<div class="msg-content">
<h2 class="title">${_("You need to re-verify to continue")}</h2>
@@ -27,8 +28,8 @@
%endif
%if reverifications["denied"]:
-<div class="wrapper-msg">
- <div class="msg msg-reverify has-actions">
+<div class="wrapper-msg urgency-low">
+ <div class="msg msg-reverify is-dismissable">
<div class="msg-content">
<h2 class="title">${_("Your re-verification failed")}</h2>
% for course_id, course_name, course_number, date, status in reverifications["denied"]:
@@ -38,6 +39,9 @@
</p>
</div>
</div>
+ <div class="action-dismiss">
+ <button class="button-dismiss"><i class="icon-remove-sign"></i> <span class="sr">Dismiss</span></button>
+ </div>
</div>
</div>
</div>
diff --git a/lms/templates/dashboard/_dashboard_reverification_sidebar.html b/lms/templates/dashboard/_dashboard_reverification_sidebar.html
index 561a235ba200c766fc9eac9840627a7f5d9c2320..fd779564fa5da5c6436c030052f18724dc771634 100644
--- a/lms/templates/dashboard/_dashboard_reverification_sidebar.html
+++ b/lms/templates/dashboard/_dashboard_reverification_sidebar.html
@@ -2,31 +2,36 @@
<%! from django.core.urlresolvers import reverse %>
<!--TODO replace this with something a clever deisgn person approves of-->
<!--TODO replace this with a shiny loopy thing to actually print out all courses-->
+
% if reverifications["must_reverify"] or reverifications["pending"] or reverifications["denied"] or reverifications["approved"]:
+<li class="status status-verification is-accepted">
+ <span class="title status-title">${_("Re-verification now open for:")}</span>
+
+ <ul class="reverify-status-list">
- <h2 class="title">${_("Re-verification now open for")}</h2>
% if reverifications["must_reverify"]:
% for course_id, course_name, course_number, date, status in reverifications["must_reverify"]:
- ${_('Must Reverify: <strong>{course_name}</strong>').format(course_name=course_name)}
+ <li class="status-item is-open">${_('<i class="icon-circle"></i><span class="label">Re-verify now:</span> <span class="course-name"><a href="">{course_name}</span></a>').format(course_name=course_name)}</li>
% endfor
%endif
% if reverifications["pending"]:
% for course_id, course_name, course_number, date, status in reverifications["pending"]:
- ${_('Denied: <strong>{course_name}</strong>').format(course_name=course_name)}
+ <li class="status-item is-pending">${_('<i class="icon-circle"></i><span class="label">Pending:</span> <span class="course-name"><a href="">{course_name}</span></a>').format(course_name=course_name)}</li>
% endfor
%endif
% if reverifications["denied"]:
% for course_id, course_name, course_number, date, status in reverifications["denied"]:
- ${_('Denied: <strong>{course_name}</strong>').format(course_name=course_name)}
+ <li class="status-item is-denied">${_('<i class="icon-remove-sign"></i><span class="label">Denied:</span> <span class="course-name"><a href="">{course_name}</span></a>').format(course_name=course_name)}</li>
% endfor
%endif
% if reverifications["approved"]:
% for course_id, course_name, course_number, date, status in reverifications["approved"]:
- ${_('Denied: <strong>{course_name}</strong>').format(course_name=course_name)}
+ <li class="status-item is-approved">${_('<i class="icon-ok"></i><span class="label">Approved:</span> <span class="course-name"><a href="">{course_name}</span></a>').format(course_name=course_name)}</li>
% endfor
%endif
-
-%endif
\ No newline at end of file
+ </ul>
+</li>
+%endif