Skip to content

E
edx-platform
Commit 86588c49 by Frances Botsford Committed by Julia Hansbrough
Options

added notification styles for re-verification and general on LMS

parent 3e1519c6
Showing with 350 additions and 204 deletions
lms/static/sass/base/_variables.scss
...@@ -224,6 +224,15 @@ $error-color: $error-red; ...@@ -224,6 +224,15 @@ $error-color: $error-red;
$warning-color: $m-pink; $warning-color: $m-pink;
$confirm-color: $m-green; $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 // MISC: visual horizontal rules
......
lms/static/sass/elements/_system-feedback.scss
...@@ -5,11 +5,12 @@ ...@@ -5,11 +5,12 @@
// UI : message // UI : message
.wrapper-msg { .wrapper-msg {
box-shadow: 0 0 5px $action-primary-shadow inset; box-shadow: 0 0 5px $shadow-d1 inset;
margin-bottom: ($baseline*1.5); margin-bottom: ($baseline/4);
padding: $baseline ($baseline*1.5); padding: $baseline ($baseline*1.5);
background: $action-primary-bg; background: $notify-banner-bg1;
// basic object
.msg { .msg {
@include clearfix(); @include clearfix();
max-width: grid-width(12); max-width: grid-width(12);
...@@ -25,24 +26,23 @@ ...@@ -25,24 +26,23 @@
} }
.msg-content { .msg-content {
width: flex-grid(10,12);
.title { .title {
@extend %t-title5; @extend %t-title5;
@extend %t-weight4; @extend %t-weight4;
margin-bottom: ($baseline/4); margin-bottom: ($baseline/4);
color: $white; color: inherit;
text-transform: none; text-transform: none;
letter-spacing: 0; letter-spacing: 0;
} }
.copy { .copy {
@extend %t-copy-sub1; @extend %t-copy-sub1;
color: $white; color: inherit;
p { // nasty reset p { // nasty reset
@extend %t-copy-sub1; @extend %t-copy-sub1;
color: $white; color: inherit;
} }
} }
} }
...@@ -57,6 +57,7 @@ ...@@ -57,6 +57,7 @@
width: flex-grid(2,12); width: flex-grid(2,12);
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
text-align: right;
.action-primary { .action-primary {
@extend %btn-primary-green; @extend %btn-primary-green;
...@@ -64,7 +65,65 @@ ...@@ -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 // prompts
......
lms/static/sass/multicourse/_dashboard.scss
...@@ -133,6 +133,51 @@ ...@@ -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 { .news-carousel {
......
lms/static/sass/views/_verification.scss
...@@ -1832,8 +1832,9 @@ ...@@ -1832,8 +1832,9 @@
} }
.reverification-list { .reverification-list {
margin-right: ($baseline*1.5);
padding: 0;
list-style-type: none; list-style-type: none;
padding: 0 $baseline;
.item { .item {
box-shadow: 0 2px 5px 0 $shadow-l1 inset; box-shadow: 0 2px 5px 0 $shadow-l1 inset;
...@@ -1841,7 +1842,15 @@ ...@@ -1841,7 +1842,15 @@
border: 1px solid $m-gray-t2; border: 1px solid $m-gray-t2;
&.complete { &.complete {
border: 1px solid $verified-color-lvl1; border: 1px solid $verified-color-lvl3;
.course-info {
opacity: .5;
.course-name {
font-weight: normal;
}
}
.reverify-status { .reverify-status {
border-top: 1px solid $light-gray; border-top: 1px solid $light-gray;
...@@ -1852,7 +1861,15 @@ ...@@ -1852,7 +1861,15 @@
} }
&.failed { &.failed {
border: 1px solid $danger-red; border: 1px solid $error-red;
.course-info {
opacity: .5;
.course-name {
font-weight: normal;
}
}
.reverify-status { .reverify-status {
border-top: 1px solid $light-gray; border-top: 1px solid $light-gray;
...@@ -1914,134 +1931,198 @@ ...@@ -1914,134 +1931,198 @@
} }
// step-photos // step-photos
.wrapper-task { &.step-photos {
@include clearfix();
width: flex-grid(12,12);
margin: $baseline 0;
.wrapper-help { .block-photo .title {
float: right; @extend %t-title4;
width: flex-grid(6,12); color: $m-blue-d1;
padding: 0 $baseline; }
.help { .wrapper-task {
margin-bottom: ($baseline*1.5); @include clearfix();
width: flex-grid(12,12);
margin: $baseline 0;
&:last-child { .wrapper-help {
margin-bottom: 0; float: right;
} width: flex-grid(6,12);
padding: 0 $baseline;
.title { .help {
@extend %hd-lv3; margin-bottom: ($baseline*1.5);
}
.copy { &:last-child {
@extend %copy-detail; margin-bottom: 0;
} }
.example { .title {
color: $m-gray-l2; @extend %hd-lv3;
} }
// help - general list .copy {
.list-help { @extend %copy-detail;
margin-top: ($baseline/2); }
color: $black;
.help-item { .example {
margin-bottom: ($baseline/4); color: $m-gray-l2;
border-bottom: 1px solid $m-gray-l4; }
padding-bottom: ($baseline/4);
&:last-child { // help - general list
margin-bottom: 0; .list-help {
border-bottom: none; margin-top: ($baseline/2);
padding-bottom: 0; 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 { // help - faq
@extend %t-weight4; .list-faq {
margin-bottom: $baseline;
} }
} }
}
// help - faq .task {
.list-faq { @extend %ui-window;
margin-bottom: $baseline; float: left;
} width: flex-grid(6,12);
margin-right: flex-gutter();
} }
}
.task { .controls {
@extend %ui-window; padding: ($baseline*0.75) $baseline;
float: left; background: $m-gray-l4;
width: flex-grid(6,12);
margin-right: flex-gutter();
}
.controls { .list-controls {
padding: ($baseline*0.75) $baseline; position: relative;
background: $m-gray-l4; }
.list-controls { .control {
position: relative; position: absolute;
}
.control { .action {
position: absolute; @extend %btn-primary-blue;
padding: ($baseline/2) ($baseline*0.75);
.action { *[class^="icon-"] {
@extend %btn-primary-blue; @extend %t-icon4;
padding: ($baseline/2) ($baseline*0.75); padding: ($baseline*.25) ($baseline*.5);
display: block;
}
}
*[class^="icon-"] { // STATE: hidden
@extend %t-icon4; &.is-hidden {
padding: ($baseline*.25) ($baseline*.5); visibility: hidden;
display: block; }
// STATE: shown
&.is-shown {
visibility: visible;
}
// STATE: approved
&.approved {
.action {
@extend %btn-verify-primary;
padding: ($baseline/2) ($baseline*0.75);
}
} }
} }
// STATE: hidden // control - redo
&.is-hidden { .control-redo {
visibility: hidden; position: absolute;
left: ($baseline/2);
} }
// STATE: shown // control - take/do
&.is-shown { .control-do {
visibility: visible; left: 45%;
} }
// STATE: approved // control - approve
&.approved { .control-approve {
position: absolute;
right: ($baseline/2);
}
}
.action { .msg {
@extend %btn-verify-primary; @include clearfix();
padding: ($baseline/2) ($baseline*0.75); 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 .msg-followup {
.control-redo { border-top: ($baseline/10) solid $m-gray-t0;
position: absolute; padding-top: $baseline;
left: ($baseline/2);
} }
}
// control - take/do .review-task {
.control-do { margin-bottom: ($baseline*1.5);
left: 45%; padding: ($baseline*0.75) $baseline;
border-radius: ($baseline/10);
background: $m-gray-l4;
&:last-child {
margin-bottom: 0;
} }
// control - approve > .title {
.control-approve { @extend %hd-lv3;
position: absolute; }
right: ($baseline/2);
.copy {
@extend %copy-base;
strong {
@extend %t-weight5;
color: $m-gray-d4;
}
} }
} }
.msg {
// individual task - name
.review-task-name {
@include clearfix(); @include clearfix();
margin-top: ($baseline*2); border: 1px solid $light-gray;
.copy { .copy {
float: left; float: left;
...@@ -2051,12 +2132,12 @@ ...@@ -2051,12 +2132,12 @@
.list-actions { .list-actions {
position: relative; position: relative;
top: -($baseline/2); top: -($baseline);
float: left; float: left;
width: flex-grid(4,12); width: flex-grid(4,12);
text-align: right; text-align: right;
.action-retakephotos a { .action-editname a {
@extend %btn-primary-blue; @extend %btn-primary-blue;
@include font-size(14); @include font-size(14);
padding: ($baseline/2) ($baseline*.75); padding: ($baseline/2) ($baseline*.75);
...@@ -2064,123 +2145,67 @@ ...@@ -2064,123 +2145,67 @@
} }
} }
.msg-followup { .nav-wizard {
border-top: ($baseline/10) solid $m-gray-t0; padding: ($baseline*.75) $baseline;
padding-top: $baseline;
}
}
.review-task { .prompt-verify {
margin-bottom: ($baseline*1.5); float: left;
padding: ($baseline*0.75) $baseline; width: flex-grid(6,12);
border-radius: ($baseline/10); margin: 0 flex-gutter() 0 0;
background: $m-gray-l4;
&:last-child { .title {
margin-bottom: 0; @extend %hd-lv4;
} margin-bottom: ($baseline/4);
}
> .title { .copy {
@extend %hd-lv3; @extend %t-copy-sub1;
} @extend %t-weight3;
}
.copy { .list-actions {
@extend %copy-base; margin-top: ($baseline/2);
}
strong { .action-verify label {
@extend %t-weight5; @extend %t-copy-sub1;
color: $m-gray-d4; }
} }
}
}
// individual task - name
.review-task-name {
@include clearfix();
.copy { .wizard-steps {
float: left; margin-top: ($baseline/2);
width: flex-grid(8,12);
margin-right: flex-gutter();
}
.list-actions { .wizard-step {
position: relative; margin-right: flex-gutter();
top: -($baseline); display: inline-block;
float: left; vertical-align: middle;
width: flex-grid(4,12);
text-align: right;
.action-editname a { &:last-child {
@extend %btn-primary-blue; margin-right: 0;
@include font-size(14); }
padding: ($baseline/2) ($baseline*.75); }
} }
} }
}
.nav-wizard {
padding: ($baseline*.75) $baseline;
.prompt-verify { .modal {
float: left;
width: flex-grid(6,12);
margin: 0 flex-gutter() 0 0;
.title { fieldset {
@extend %hd-lv4; margin-top: $baseline;
margin-bottom: ($baseline/4);
} }
.copy { .close-modal {
@extend %t-copy-sub1; @include font-size(24);
@extend %t-weight3; color: $m-blue-d3;
}
.list-actions { &:hover, &:focus {
margin-top: ($baseline/2); color: $m-blue-d1;
} border: none;
.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;
} }
} }
} }
}
.modal {
fieldset {
margin-top: $baseline;
}
.close-modal {
@include font-size(24);
color: $m-blue-d3;
&:hover, &:focus {
color: $m-blue-d1;
border: none;
}
}
} }
} }
......
lms/templates/dashboard/_dashboard_prompt_midcourse_reverify.html
...@@ -2,8 +2,9 @@ ...@@ -2,8 +2,9 @@
<%! from django.core.urlresolvers import reverse %> <%! from django.core.urlresolvers import reverse %>
<!--TODO replace this with something a clever deisgn person approves of--> <!--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--> <!--TODO replace this with a shiny loopy thing to actually print out all courses-->
% if reverifications["must_reverify"]: % if reverifications["must_reverify"]:
<div class="wrapper-msg"> <div class="wrapper-msg urgency-high">
<div class="msg msg-reverify has-actions"> <div class="msg msg-reverify has-actions">
<div class="msg-content"> <div class="msg-content">
<h2 class="title">${_("You need to re-verify to continue")}</h2> <h2 class="title">${_("You need to re-verify to continue")}</h2>
...@@ -27,8 +28,8 @@ ...@@ -27,8 +28,8 @@
%endif %endif
%if reverifications["denied"]: %if reverifications["denied"]:
<div class="wrapper-msg"> <div class="wrapper-msg urgency-low">
<div class="msg msg-reverify has-actions"> <div class="msg msg-reverify is-dismissable">
<div class="msg-content"> <div class="msg-content">
<h2 class="title">${_("Your re-verification failed")}</h2> <h2 class="title">${_("Your re-verification failed")}</h2>
% for course_id, course_name, course_number, date, status in reverifications["denied"]: % for course_id, course_name, course_number, date, status in reverifications["denied"]:
...@@ -38,6 +39,9 @@ ...@@ -38,6 +39,9 @@
</p> </p>
</div> </div>
</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> </div>
</div> </div>
......
lms/templates/dashboard/_dashboard_reverification_sidebar.html
...@@ -2,31 +2,36 @@ ...@@ -2,31 +2,36 @@
<%! from django.core.urlresolvers import reverse %> <%! from django.core.urlresolvers import reverse %>
<!--TODO replace this with something a clever deisgn person approves of--> <!--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--> <!--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"]: % 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"]: % if reverifications["must_reverify"]:
% for course_id, course_name, course_number, date, status in 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 % endfor
%endif %endif
% if reverifications["pending"]: % if reverifications["pending"]:
% for course_id, course_name, course_number, date, status in 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 % endfor
%endif %endif
% if reverifications["denied"]: % if reverifications["denied"]:
% for course_id, course_name, course_number, date, status in 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 % endfor
%endif %endif
% if reverifications["approved"]: % if reverifications["approved"]:
% for course_id, course_name, course_number, date, status in 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 % endfor
%endif %endif
</ul>
%endif </li>
\ No newline at end of file %endif
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