From 22639adc639470da940b7ed7720a9d0bb1668f38 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Thu, 21 Feb 2013 14:31:24 -0500 Subject: [PATCH 01/48] studio - alerts WIP --- cms/static/sass/_alerts.scss | 323 ++++++++++++++++++++++++++------ cms/static/sass/_header.scss | 2 +- cms/static/sass/_variables.scss | 44 ++++- cms/templates/unit.html | 28 ++- 4 files changed, 338 insertions(+), 59 deletions(-) diff --git a/cms/static/sass/_alerts.scss b/cms/static/sass/_alerts.scss index 11d2e4fe3a..4a20980a57 100644 --- a/cms/static/sass/_alerts.scss +++ b/cms/static/sass/_alerts.scss @@ -1,65 +1,280 @@ -.alert { - padding: 15px 20px; - margin-bottom: 30px; - border-radius: 3px; - border: 1px solid #edbd3c; - border-radius: 3px; - background: #fbf6e1; - // background: #edbd3c; - font-size: 14px; - @include clearfix; +// studio alerts and notifications +// ==================== - .alert-message { - float: left; - margin-top: 4px; - } +// notifications +.wrapper-notification { + @include clearfix(); + @include box-sizing(border-box); + @include transition (bottom 2.0s ease-in-out 5s, opacity 2.0s ease-in-out 5s); + @include box-shadow(0 -1px 2px rgba(0,0,0,0.1)); + position: fixed; + bottom: -100px; + z-index: 1000; + width: 100%; + overflow: hidden; + opacity: 0; + border-top: 1px solid $gray-d1; + padding: $baseline ($baseline*2); + background: $white; - strong { - font-weight: 700; - } + &.is-shown { + bottom: 0; + opacity: 1.0; + } - .alert-action { - float: right; + &.wrapper-notification-warning { + border-color: shade($yellow, 25%); + background: tint($yellow, 25%); + } - &.secondary { - @include orange-button; - } - } + &.wrapper-notification-error { + border-color: shade($red, 50%); + background: tint($red, 20%); + color: $white; + } + + &.wrapper-notification-confirm { + border-color: shade($green, 30%); + background: tint($green, 40%); + color: shade($green, 30%); + } } -body.error { - background: $darkGrey; - color: #3c3c3c; +.notification { + @include box-sizing(border-box); + margin: 0 auto; + width: flex-grid(12); + max-width: $fg-max-width; + min-width: $fg-min-width; - .primary-header { - display: none; - } + .copy { + float: left; + width: flex-grid(9, 12); + margin-right: flex-gutter(); + margin-top: 5px; + font-size: 14px; - .error-prompt { - width: 700px; - margin: 150px auto; - padding: 60px 50px 90px; - border-radius: 3px; - background: #fff; - text-align: center; - } + .icon { + display: inline-block; + vertical-align: top; + margin-right: 5px; + font-size: 20px; + } - h1 { - float: none; - margin: 0; - font-size: 60px; - font-weight: 300; - color: #3c3c3c; - } + p { + width: flex-grid(8, 9); + display: inline-block; + vertical-align: top; + } + } - .description { - margin-bottom: 50px; - font-size: 21px; - } + .actions { + float: right; + width: flex-grid(3, 12); + margin-top: ($baseline/2); + text-align: right; - .back-button { - @include blue-button; - padding: 14px 40px 18px; - font-size: 18px; - } -} \ No newline at end of file + li { + display: inline-block; + vertical-align: middle; + margin-right: 10px; + + &:last-child { + margin-right: 0; + } + } + + .save-button { + @include blue-button; + } + + .cancel-button { + @include white-button; + } + } + + strong { + font-weight: 700; + } +} + +// ==================== + +// alerts +.wrapper-alert { + @include clearfix(); + @include box-sizing(border-box); + @include transition (opacity 2.0s ease-in-out 5s); + @include box-shadow(0 1px 2px rgba(0,0,0,0.2)); + position: relative; + top: -($baseline*1.5); + z-index: 100; + overflow: hidden; + width: 100%; + opacity: 0; + border-bottom: 2px solid $blue-d2; + padding: $baseline ($baseline*2); + background: $blue; + + &.is-shown { + bottom: 0; + opacity: 1.0; + } + + &.wrapper-alert-warning { + background: $orange-s1; + border-color: $orange-d1; + } + + &.wrapper-alert-error { + border-color: shade($red, 50%); + color: $white; + } + + &.wrapper-alert-confirm { + border-color: shade($green, 30%); + } + + &.wrapper-alert-inform { + border-color: $blue-d1; + } +} + +.alert { + @include font-size(14); + @include box-sizing(border-box); + margin: 0 auto; + width: flex-grid(12); + max-width: $fg-max-width; + min-width: $fg-min-width; + color: $white; + + strong { + font-weight: 700; + } + + .copy { + @include font-size(14); + + .icon { + @include font-size(24); + @include border-radius(50px); + display: inline-block; + vertical-align: top; + margin-right: ($baseline/2); + padding: ($baseline/4) ($baseline/2) ($baseline/10) ($baseline/2); + } + + p { + width: flex-grid(8, 9); + display: inline-block; + vertical-align: top; + } + } + + &.has-actions { + + .copy { + float: left; + width: flex-grid(8, 12); + margin-right: flex-gutter(); + } + + .actions { + float: right; + width: flex-grid(4, 12); + margin-top: ($baseline/2); + text-align: right; + + li { + display: inline-block; + vertical-align: middle; + margin-right: ($baseline/2); + + &:last-child { + margin-right: 0; + } + } + } + } + + // alert types + &.warning { + color: $gray-d2; + + .copy { + + .icon { + background: $gray-d2; + color: $orange-s1; + } + } + } +} + +// artifact styles +// .alert { +// padding: 15px 20px; +// margin-bottom: 30px; +// border-radius: 3px; +// border: 1px solid #edbd3c; +// border-radius: 3px; +// background: #fbf6e1; +// // background: #edbd3c; +// font-size: 14px; +// @include clearfix; + +// .alert-message { +// float: left; +// margin-top: 4px; +// } + +// strong { +// font-weight: 700; +// } + +// .alert-action { +// float: right; + +// &.secondary { +// @include orange-button; +// } +// } +// } + +// body.error { +// background: $darkGrey; +// color: #3c3c3c; + +// .primary-header { +// display: none; +// } + +// .error-prompt { +// width: 700px; +// margin: 150px auto; +// padding: 60px 50px 90px; +// border-radius: 3px; +// background: #fff; +// text-align: center; +// } + +// h1 { +// float: none; +// margin: 0; +// font-size: 60px; +// font-weight: 300; +// color: #3c3c3c; +// } + +// .description { +// margin-bottom: 50px; +// font-size: 21px; +// } + +// .back-button { +// @include blue-button; +// padding: 14px 40px 18px; +// font-size: 18px; +// } +// } \ No newline at end of file diff --git a/cms/static/sass/_header.scss b/cms/static/sass/_header.scss index ca1092f44b..3115711506 100644 --- a/cms/static/sass/_header.scss +++ b/cms/static/sass/_header.scss @@ -10,7 +10,7 @@ height: 76px; position: relative; width: 100%; - z-index: 10; + z-index: 1000; a { color: $baseFontColor; diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index 4d8e26b2f9..eb2bd29ebd 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -39,6 +39,12 @@ $blue-d1: shade($blue,20%); $blue-d2: shade($blue,40%); $blue-d3: shade($blue,60%); $blue-d4: shade($blue,80%); +$blue-s1: saturate($blue,15%); +$blue-s2: saturate($blue,30%); +$blue-s3: saturate($blue,45%); +$blue-u1: desaturate($blue,15%); +$blue-u2: desaturate($blue,30%); +$blue-u3: desaturate($blue,45%); $pink: rgb(183, 37, 103); $pink-l1: tint($pink,20%); @@ -50,6 +56,12 @@ $pink-d1: shade($pink,20%); $pink-d2: shade($pink,40%); $pink-d3: shade($pink,60%); $pink-d4: shade($pink,80%); +$pink-s1: saturate($pink,15%); +$pink-s2: saturate($pink,30%); +$pink-s3: saturate($pink,45%); +$pink-u1: desaturate($pink,15%); +$pink-u2: desaturate($pink,30%); +$pink-u3: desaturate($pink,45%); $green: rgb(37, 184, 90); $green-l1: tint($green,20%); @@ -61,8 +73,14 @@ $green-d1: shade($green,20%); $green-d2: shade($green,40%); $green-d3: shade($green,60%); $green-d4: shade($green,80%); +$green-s1: saturate($green,15%); +$green-s2: saturate($green,30%); +$green-s3: saturate($green,45%); +$green-u1: desaturate($green,15%); +$green-u2: desaturate($green,30%); +$green-u3: desaturate($green,45%); -$yellow: rgb(231, 214, 143); +$yellow: rgb(237, 189, 60); $yellow-l1: tint($yellow,20%); $yellow-l2: tint($yellow,40%); $yellow-l3: tint($yellow,60%); @@ -72,9 +90,33 @@ $yellow-d1: shade($yellow,20%); $yellow-d2: shade($yellow,40%); $yellow-d3: shade($yellow,60%); $yellow-d4: shade($yellow,80%); +$yellow-s1: saturate($yellow,15%); +$yellow-s2: saturate($yellow,30%); +$yellow-s3: saturate($yellow,45%); +$yellow-u1: desaturate($yellow,15%); +$yellow-u2: desaturate($yellow,30%); +$yellow-u3: desaturate($yellow,45%); + +$orange: rgb(237, 189, 60); +$orange-l1: tint($orange,20%); +$orange-l2: tint($orange,40%); +$orange-l3: tint($orange,60%); +$orange-l4: tint($orange,80%); +$orange-l5: tint($orange,90%); +$orange-d1: shade($orange,20%); +$orange-d2: shade($orange,40%); +$orange-d3: shade($orange,60%); +$orange-d4: shade($orange,80%); +$orange-s1: saturate($orange,15%); +$orange-s2: saturate($orange,30%); +$orange-s3: saturate($orange,45%); +$orange-u1: desaturate($orange,15%); +$orange-u2: desaturate($orange,30%); +$orange-u3: desaturate($orange,45%); $shadow: rgba(0,0,0,0.2); $shadow-l1: rgba(0,0,0,0.1); +$shadow-l2: rgba(0,0,0,0.05); $shadow-d1: rgba(0,0,0,0.4); // colors - inherited diff --git a/cms/templates/unit.html b/cms/templates/unit.html index c529f5863a..53be470a50 100644 --- a/cms/templates/unit.html +++ b/cms/templates/unit.html @@ -16,7 +16,6 @@ }); $(document).ready(function() { - $('body').addClass('js'); // tabs $('.tab-group').tabs(); @@ -32,9 +31,32 @@ <%block name="content"> + + +
+
+
+ ⚠ +

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+
+ + +
+
+
-
+

You are editing a draft. % if published_date: This unit was originally published on ${published_date}. @@ -144,7 +166,7 @@

-
+

This unit has been published. To make changes, you must edit a draft.

This is a draft of the published unit. To update the live version, you must replace it with this draft.

From d7bbfbc707299ec1f5db960ee892075b5bc29269 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Fri, 22 Feb 2013 13:52:24 -0500 Subject: [PATCH 02/48] studio - alerts: basic layout and general alert styling WIP --- cms/static/sass/_alerts.scss | 161 ++++++++++++++++++++++++-------- cms/static/sass/_base.scss | 45 +++++++++ cms/static/sass/_header.scss | 2 +- cms/static/sass/_variables.scss | 18 +++- cms/templates/overview.html | 129 +++++++++++++++++++++++++ cms/templates/unit.html | 23 ----- 6 files changed, 314 insertions(+), 64 deletions(-) diff --git a/cms/static/sass/_alerts.scss b/cms/static/sass/_alerts.scss index 4a20980a57..c1e64fb889 100644 --- a/cms/static/sass/_alerts.scss +++ b/cms/static/sass/_alerts.scss @@ -102,19 +102,19 @@ // alerts .wrapper-alert { - @include clearfix(); @include box-sizing(border-box); - @include transition (opacity 2.0s ease-in-out 5s); - @include box-shadow(0 1px 2px rgba(0,0,0,0.2)); + @include transition (opacity 2.0s ease-in-out 5s, border 0.5s ease-in-out); + @include box-shadow(0 1px 1px $white, inset 0 2px 5px $shadow-d1); position: relative; top: -($baseline*1.5); z-index: 100; overflow: hidden; width: 100%; opacity: 0; - border-bottom: 2px solid $blue-d2; + border-bottom: 4px solid $gray-l1; + border-top: 1px solid $black; padding: $baseline ($baseline*2); - background: $blue; + background: $gray-d3; &.is-shown { bottom: 0; @@ -122,27 +122,95 @@ } &.wrapper-alert-warning { - background: $orange-s1; - border-color: $orange-d1; + border-bottom-color: $orange; + + .icon-warning { + color: $orange; + } + + + &:hover { + border-bottom-color: $orange-s2; + + .icon-warning { + color: $orange-s2; + } + } } &.wrapper-alert-error { - border-color: shade($red, 50%); - color: $white; + border-bottom-color: $red; + + .icon-error { + color: $red; + } + + + &:hover { + border-bottom-color: $red-s2; + + .icon-error { + color: $red-s2; + } + } } - &.wrapper-alert-confirm { - border-color: shade($green, 30%); + &.wrapper-alert-confirmation { + border-bottom-color: $green; + + .icon-confirmation { + color: $green; + } + + + &:hover { + border-bottom-color: $green-s2; + + .icon-confirmation { + color: $green-s2; + } + } } - &.wrapper-alert-inform { - border-color: $blue-d1; + &.wrapper-alert-announcement { + border-bottom-color: $blue; + + .icon-announcement { + color: $blue; + } + + + &:hover { + border-bottom-color: $blue-s2; + + .icon-announcement { + color: $blue-s2; + } + } + } + + &.wrapper-alert-step-required { + border-bottom-color: $pink; + + .icon-step-required { + color: $pink; + } + + + &:hover { + border-bottom-color: $pink-s2; + + .icon-announcement { + color: $pink-s2; + } + } } } .alert { @include font-size(14); @include box-sizing(border-box); + @include clearfix(); margin: 0 auto; width: flex-grid(12); max-width: $fg-max-width; @@ -153,40 +221,47 @@ font-weight: 700; } + .icon, .copy { + float: left; + } + + .icon { + @include transition (color 0.5s ease-in-out); + @include font-size(28); + width: flex-grid(1, 12); + margin-right: flex-gutter(); + text-align: right; + } + .copy { @include font-size(14); + width: flex-grid(10, 12); + color: $gray-l2; - .icon { - @include font-size(24); - @include border-radius(50px); - display: inline-block; - vertical-align: top; - margin-right: ($baseline/2); - padding: ($baseline/4) ($baseline/2) ($baseline/10) ($baseline/2); - } - - p { - width: flex-grid(8, 9); - display: inline-block; - vertical-align: top; + .title { + margin-bottom: 0; + color: $white; } } &.has-actions { + .icon { + width: flex-grid(1, 12); + } + .copy { - float: left; width: flex-grid(8, 12); margin-right: flex-gutter(); } - .actions { - float: right; - width: flex-grid(4, 12); - margin-top: ($baseline/2); + .nav-actions { + width: flex-grid(3, 12); + float: right; + margin-top: ($baseline/2); text-align: right; - li { + .nav-item { display: inline-block; vertical-align: middle; margin-right: ($baseline/2); @@ -200,15 +275,23 @@ // alert types &.warning { - color: $gray-d2; + + } - .copy { + &.error { + + } + + &.confirmation { + + } + + &.announcement { + + } + + &.step-required { - .icon { - background: $gray-d2; - color: $orange-s1; - } - } } } diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 5d4bc7c773..62f72e8d63 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -50,6 +50,51 @@ h1 { // ==================== +// typography - basic +.title-1, .title-2, .title-3, .title-4, .title-5, .title-6 { + font-weight: 600; + color: $gray-d3; + margin: 0; + padding: 0; +} + +.title-1 { + @include font-size(32); + margin-bottom: ($baseline*1.5); +} + +.title-2 { + @include font-size(24); + margin-bottom: $baseline; +} + +.title-3 { + @include font-size(16); + margin-bottom: ($baseline/2); +} + +.title-4 { + @include font-size(14); + margin-bottom: $baseline; + font-weight: 500 +} + +.title-5 { + @include font-size(14); + color: $gray-l1; + margin-bottom: $baseline; + font-weight: 500 +} + +.title-6 { + @include font-size(14); + color: $gray-l2; + margin-bottom: $baseline; + font-weight: 500 +} + +// ==================== + // layout - basic page header .wrapper-mast { margin: 0; diff --git a/cms/static/sass/_header.scss b/cms/static/sass/_header.scss index 3115711506..53edbd3e9e 100644 --- a/cms/static/sass/_header.scss +++ b/cms/static/sass/_header.scss @@ -5,7 +5,7 @@ margin: 0 0 ($baseline*1.5) 0; padding: $baseline; border-bottom: 1px solid $gray; - @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1)); + @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.2)); background: $white; height: 76px; position: relative; diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index eb2bd29ebd..907d5cbdb2 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -63,6 +63,23 @@ $pink-u1: desaturate($pink,15%); $pink-u2: desaturate($pink,30%); $pink-u3: desaturate($pink,45%); +$red: rgb(178, 6, 16); +$red-l1: tint($red,20%); +$red-l2: tint($red,40%); +$red-l3: tint($red,60%); +$red-l4: tint($red,80%); +$red-l5: tint($red,90%); +$red-d1: shade($red,20%); +$red-d2: shade($red,40%); +$red-d3: shade($red,60%); +$red-d4: shade($red,80%); +$red-s1: saturate($red,15%); +$red-s2: saturate($red,30%); +$red-s3: saturate($red,45%); +$red-u1: desaturate($red,15%); +$red-u2: desaturate($red,30%); +$red-u3: desaturate($red,45%); + $green: rgb(37, 184, 90); $green-l1: tint($green,20%); $green-l2: tint($green,40%); @@ -123,7 +140,6 @@ $shadow-d1: rgba(0,0,0,0.4); $baseFontColor: #3c3c3c; $offBlack: #3c3c3c; $orange: #edbd3c; -$red: #b20610; $green: #108614; $lightGrey: #edf1f5; $mediumGrey: #b0b6c2; diff --git a/cms/templates/overview.html b/cms/templates/overview.html index 91a1107726..292246676b 100644 --- a/cms/templates/overview.html +++ b/cms/templates/overview.html @@ -106,6 +106,135 @@ <%block name="content"> + +
+
+ ⚠ + +
+

You are editing a draft

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+
+ + +
+
+ + +
+
+ ✓ + +
+

Your changes have been saved

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Please see below

+
+
+
+ + +
+
+ ✓ + +
+

X Has been removed

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+
+
+
+ + +
+
+ ⚠ + +
+

We're Sorry, there was a error with Studio

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+
+
+
+ + +
+
+ ⚠ + +
+

There was an error in your submission

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Please see below

+
+ + +
+
+ + +
+
+ 📢 + +
+

Studio will be unavailable this weekend

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+
+ + +
+
+ + +
+
+ 📢 + +
+

Studio will be unavailable this weekend

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+
+
+
+ + +
+
+ + +
+

Your Studio account has been created, but needs to be activated

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+
+
+
+

Section Release Date

diff --git a/cms/templates/unit.html b/cms/templates/unit.html index 53be470a50..a95061233b 100644 --- a/cms/templates/unit.html +++ b/cms/templates/unit.html @@ -31,29 +31,6 @@ <%block name="content"> - - -
-
-
- ⚠ -

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

-
- - -
-
-
From bb24a079a19939bfbf77202c3ae6d37055b4098c Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Fri, 22 Feb 2013 14:28:13 -0500 Subject: [PATCH 03/48] studio - alerts: initial pass at alert styling and markup complete --- cms/static/sass/_alerts.scss | 92 ++++++++++++-- cms/static/sass/_cms_mixins.scss | 204 ++++++++++++++++++------------- cms/templates/overview.html | 56 +++++++-- common/static/sass/_mixins.scss | 34 ++++++ 4 files changed, 283 insertions(+), 103 deletions(-) diff --git a/cms/static/sass/_alerts.scss b/cms/static/sass/_alerts.scss index c1e64fb889..393539e90d 100644 --- a/cms/static/sass/_alerts.scss +++ b/cms/static/sass/_alerts.scss @@ -128,7 +128,6 @@ color: $orange; } - &:hover { border-bottom-color: $orange-s2; @@ -139,18 +138,17 @@ } &.wrapper-alert-error { - border-bottom-color: $red; + border-bottom-color: $red-l1; .icon-error { - color: $red; + color: $red-l1; } - &:hover { - border-bottom-color: $red-s2; + border-bottom-color: $red; .icon-error { - color: $red-s2; + color: $red; } } } @@ -162,7 +160,6 @@ color: $green; } - &:hover { border-bottom-color: $green-s2; @@ -179,7 +176,6 @@ color: $blue; } - &:hover { border-bottom-color: $blue-s2; @@ -196,7 +192,6 @@ color: $pink; } - &:hover { border-bottom-color: $pink-s2; @@ -251,12 +246,12 @@ } .copy { - width: flex-grid(8, 12); + width: flex-grid(7, 12); margin-right: flex-gutter(); } .nav-actions { - width: flex-grid(3, 12); + width: flex-grid(4, 12); float: right; margin-top: ($baseline/2); text-align: right; @@ -269,6 +264,21 @@ &:last-child { margin-right: 0; } + + .action-primary { + @include transition (opacity 0.25s ease-in-out); + @include font-size(13); + font-weight: 600; + opacity: 0.90; + + &:hover { + opacity: 1.0; + } + } + + .action-secondary { + @include font-size(13); + } } } } @@ -276,22 +286,82 @@ // alert types &.warning { + .action-primary { + @include orange-button; + border-color: $orange-d2; + } + + a { + color: $orange; + + &:hover { + color: $orange-s2; + } + } } &.error { + .action-primary { + @include red-button; + border-color: $red-d2; + } + + a { + color: $red-l1; + + &:hover { + color: $red; + } + } } &.confirmation { + .action-primary { + @include green-button; + border-color: $green-d2; + } + + a { + color: $green; + + &:hover { + color: $green-s2; + } + } } &.announcement { + .action-primary { + @include blue-button; + border-color: $blue-d2; + } + + a { + color: $blue; + + &:hover { + color: $blue-s2; + } + } } &.step-required { + .action-primary { + border-color: $pink-d2; + @include pink-button; + } + + a { + color: $pink; + + &:hover { + color: $pink-s1; + } + } } } diff --git a/cms/static/sass/_cms_mixins.scss b/cms/static/sass/_cms_mixins.scss index b8d9a8ae2e..bd28702895 100644 --- a/cms/static/sass/_cms_mixins.scss +++ b/cms/static/sass/_cms_mixins.scss @@ -1,26 +1,20 @@ -@mixin clearfix { - &:after { - content: ''; - display: block; - height: 0; - visibility: hidden; - clear: both; - } -} +// studio specific mixins +// ==================== +// buttons @mixin button { display: inline-block; - padding: 4px 20px 6px; - font-size: 14px; + padding: ($baseline/5) $baseline ($baseline/4); + @include font-size(14); font-weight: 700; @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 rgba(0, 0, 0, 0)); @include transition(background-color .15s, box-shadow .15s); &.disabled { - border: 1px solid $lightGrey !important; + border: 1px solid $gray-l1 !important; border-radius: 3px !important; - background: $lightGrey !important; - color: $darkGrey !important; + background: $gray-l1 !important; + color: $gray-d1 !important; pointer-events: none; cursor: none; &:hover { @@ -33,34 +27,119 @@ } } -@mixin blue-button { +// button - green +@mixin green-button { @include button; - border: 1px solid #437fbf; + border: 1px solid $green-d1; border-radius: 3px; @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); - background-color: $blue; - color: #fff; + background-color: $green; + @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset); + color: $white; - &:hover, &.active { - background-color: #62aaf5; - color: #fff; + &:hover { + background-color: $green-s1; + color: $white; + } + + &.disabled { + border: 1px solid $green-l3 !important; + background: $green-l3 !important; + color: $white !important; + @include box-shadow(none); } } -@mixin green-button { - @include button; - border: 1px solid #0d7011; - border-radius: 3px; - @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); - background-color: $green; - color: #fff; +// button - blue +@mixin blue-button { + @include button; + border: 1px solid $blue-d1; + border-radius: 3px; + @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); + background-color: $blue; + color: $white; - &:hover { - background-color: #129416; - color: #fff; - } + &:hover, &.active { + background-color: $blue-s2; + color: $white; + } + + &.disabled { + border: 1px solid $blue-l3 !important; + background: $blue-l3 !important; + color: $white !important; + @include box-shadow(none); + } } +// button - red +@mixin red-button { + @include button; + border: 1px solid $red-d1; + border-radius: 3px; + @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); + background-color: $red; + color: $white; + + &:hover, &.active { + background-color: $red-s1; + color: $white; + } + + &.disabled { + border: 1px solid $red-l3 !important; + background: $red-l3 !important; + color: $white !important; + @include box-shadow(none); + } +} + +// button - pink +@mixin pink-button { + @include button; + border: 1px solid $pink-d1; + border-radius: 3px; + @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); + background-color: $pink; + color: $white; + + &:hover, &.active { + background-color: $pink-s1; + color: $white; + } + + &.disabled { + border: 1px solid $pink-l3 !important; + background: $pink-l3 !important; + color: $white !important; + @include box-shadow(none); + } +} + +// button - orange +@mixin orange-button { + @include button; + border: 1px solid $orange-d1; + border-radius: 3px; + @include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%); + background-color: $orange; + @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset); + color: $gray-d2; + + &:hover { + background-color: $orange-s2; + color: $gray-d2; + } + + &.disabled { + border: 1px solid $orange-l3 !important; + background: $orange-l2 !important; + color: $gray-l1 !important; + @include box-shadow(none); + } +} + +// button - white @mixin white-button { @include button; border: 1px solid $mediumGrey; @@ -77,24 +156,10 @@ } } -@mixin orange-button { - @include button; - border: 1px solid #bda046; - border-radius: 3px; - @include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%); - background-color: #edbd3c; - @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset); - color: #3c3c3c; - - &:hover { - background-color: #ffcd46; - color: #3c3c3c; - } -} - +// button - grey @mixin grey-button { @include button; - border: 1px solid $darkGrey; + border: 1px solid $gray-d2; border-radius: 3px; @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); background-color: #d1dae3; @@ -107,42 +172,25 @@ } } -@mixin green-button { - @include button; - border: 1px solid $darkGreen; - border-radius: 3px; - @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); - background-color: $green; - @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset); - color: #fff; - - &:hover { - background-color: $brightGreen; - color: #fff; - } - - &.disabled { - border: 1px solid $disabledGreen !important; - background: $disabledGreen !important; - color: #fff !important; - @include box-shadow(none); - } -} - +// button - grey dark @mixin dark-grey-button { @include button; border: 1px solid #1c1e20; border-radius: 3px; background: -webkit-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)) $extraDarkGrey; box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset; - color: #fff; + color: $white; &:hover { background-color: #595f64; - color: #fff; + color: $white; } } + +// ==================== + +// UI @mixin edit-box { padding: 15px 20px; border-radius: 3px; @@ -276,17 +324,9 @@ } } -@mixin sr-text { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} +// ==================== +// sunsetted mixins @mixin active { @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); background-color: rgba(255, 255, 255, .3); diff --git a/cms/templates/overview.html b/cms/templates/overview.html index 292246676b..c3a5a1d743 100644 --- a/cms/templates/overview.html +++ b/cms/templates/overview.html @@ -120,10 +120,34 @@

Alert Actions

+ +
+
+ + +
+
+ ⚠ + +
+

A Newer Version of This Exists

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+
+ + @@ -160,7 +184,7 @@ ⚠
-

We're Sorry, there was a error with Studio

+

We're sorry, there was a error with Studio

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

@@ -180,10 +204,7 @@

Alert Actions

@@ -204,7 +225,10 @@

Alert Actions

@@ -225,13 +249,25 @@
-
+

Your Studio account has been created, but needs to be activated

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+

Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.

+ +
diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss index 76d52ed930..0c3eee602e 100644 --- a/common/static/sass/_mixins.scss +++ b/common/static/sass/_mixins.scss @@ -8,11 +8,16 @@ font-size: ($sizeValue/10) + rem; } + +// ==================== + // line-height @function lh($amount: 1) { @return $body-line-height * $amount; } +// ==================== + // image-replacement hidden text @mixin text-hide() { text-indent: 100%; @@ -32,6 +37,8 @@ width: 1px; } +// ==================== + // vertical and horizontal centering @mixin vertically-and-horizontally-centered ($height, $width) { left: 50%; @@ -43,6 +50,8 @@ top: 150px; } +// ==================== + // sizing @mixin size($width: $baseline, $height: $baseline) { height: $height; @@ -53,6 +62,8 @@ @include size($size); } +// ==================== + // placeholder styling @mixin placeholder($color) { :-moz-placeholder { @@ -64,4 +75,27 @@ :-ms-input-placeholder { color: $color; } +} + +// utility +@mixin clearfix { + &:after { + content: ''; + display: block; + height: 0; + visibility: hidden; + clear: both; + } +} + +// sunsetted mixins +@mixin sr-text { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; } \ No newline at end of file From 60f803f3694e6effdc45c7eb128c8a176f3015e8 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Fri, 22 Feb 2013 14:29:19 -0500 Subject: [PATCH 04/48] studio - alerts: initial pass at alert styling and markup complete --- cms/templates/overview.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cms/templates/overview.html b/cms/templates/overview.html index c3a5a1d743..bfab97d3a0 100644 --- a/cms/templates/overview.html +++ b/cms/templates/overview.html @@ -384,4 +384,4 @@
- + \ No newline at end of file From b1f5d67a9619b8c3af5db3cd16b867ff1f81585e Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Fri, 22 Feb 2013 14:39:49 -0500 Subject: [PATCH 05/48] studio - alerts: initial pass at alert styling and markup complete --- cms/static/sass/_alerts.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/cms/static/sass/_alerts.scss b/cms/static/sass/_alerts.scss index 393539e90d..9774a5e4ba 100644 --- a/cms/static/sass/_alerts.scss +++ b/cms/static/sass/_alerts.scss @@ -266,14 +266,8 @@ } .action-primary { - @include transition (opacity 0.25s ease-in-out); @include font-size(13); font-weight: 600; - opacity: 0.90; - - &:hover { - opacity: 1.0; - } } .action-secondary { From 8179b9fadc12e75610b64d9ce40d953755e9f5e9 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Mon, 25 Feb 2013 14:19:22 -0500 Subject: [PATCH 06/48] studio - alerts: initial pass at alert styling and markup complete --- cms/static/js/base.js | 19 + cms/static/sass/_alerts.scss | 297 ++++++++++--- cms/static/sass/_base.scss | 21 +- cms/static/sass/_keyframes.scss | 32 +- cms/static/sass/base-style.scss | 2 +- cms/templates/overview.html | 753 ++++++++++++++++++-------------- 6 files changed, 738 insertions(+), 386 deletions(-) diff --git a/cms/static/js/base.js b/cms/static/js/base.js index d8b32cb0e8..c2080c87f9 100644 --- a/cms/static/js/base.js +++ b/cms/static/js/base.js @@ -43,6 +43,25 @@ $(document).ready(function () { $('body').addClass('js'); + // notifications + $('.testing .test-notification').click(function(e) { + (e).preventDefault(); + manageNotification(e); + }); + + function manageNotification(e) { + var $notificationRibbon = $('.wrapper-notification'); + + // showing + $notificationRibbon.toggleClass('is-shown'); + + // controls for closing notification + $notificationRibbon.find('.action-notification-close').click(function(e) { + (e).preventDefault(); + $notificationRibbon.toggleClass('is-shown'); + }); + } + // lean/simple modal $('a[rel*=modal]').leanModal({overlay : 0.80, closeButton: '.action-modal-close' }); $('a.action-modal-close').click(function(e){ diff --git a/cms/static/sass/_alerts.scss b/cms/static/sass/_alerts.scss index 9774a5e4ba..de025e1be2 100644 --- a/cms/static/sass/_alerts.scss +++ b/cms/static/sass/_alerts.scss @@ -5,17 +5,19 @@ .wrapper-notification { @include clearfix(); @include box-sizing(border-box); - @include transition (bottom 2.0s ease-in-out 5s, opacity 2.0s ease-in-out 5s); - @include box-shadow(0 -1px 2px rgba(0,0,0,0.1)); + // @include transition (bottom 1.5s ease-in-out 0.25s); + transition: bottom 1.5s ease-in-out 0.25s; + -webkit-transition: bottom 1.5s ease-in-out 0.25s; + @include box-shadow(0 -1px 3px $shadow); position: fixed; - bottom: -100px; + bottom: -1000px; z-index: 1000; width: 100%; overflow: hidden; opacity: 0; - border-top: 1px solid $gray-d1; - padding: $baseline ($baseline*2); - background: $white; + border-top: 4px solid $gray-l1; + padding: ($baseline*0.75) ($baseline*2); + background: $gray-d3; &.is-shown { bottom: 0; @@ -23,78 +25,263 @@ } &.wrapper-notification-warning { - border-color: shade($yellow, 25%); - background: tint($yellow, 25%); + border-top-color: $orange; + + .icon-warning { + color: $orange; + } + + &:hover { + border-top-color: $orange-s2; + + .icon-warning { + color: $orange-s2; + } + } } &.wrapper-notification-error { - border-color: shade($red, 50%); - background: tint($red, 20%); - color: $white; + border-top-color: $red-l1; + + .icon-error { + color: $red-l1; + } + + &:hover { + border-top-color: $red; + + .icon-error { + color: $red; + } + } } - &.wrapper-notification-confirm { - border-color: shade($green, 30%); - background: tint($green, 40%); - color: shade($green, 30%); + &.wrapper-notification-confirmation { + border-top-color: $green; + + .icon-error { + color: $green; + } + + &:hover { + border-top-color: $green-s1; + + .icon-error { + color: $green-s1; + } + } + } + + // shorter/status notifications + &.wrapper-notification-status { + width: ($baseline*10); + right: ($baseline); + padding: ($baseline/2) $baseline; + + .notification { + background: red; + @include box-sizing(border-box); + @include clearfix(); + width: 100%; + max-width: none; + min-width: none; + + .icon { + width: auto; + } + + .copy { + width: auto; + } + } } } .notification { @include box-sizing(border-box); + @include clearfix(); margin: 0 auto; width: flex-grid(12); max-width: $fg-max-width; min-width: $fg-min-width; - .copy { + strong { + font-weight: 700; + } + + .icon, .copy { float: left; - width: flex-grid(9, 12); + } + + .icon { + @include transition (color 0.5s ease-in-out); + @include font-size(28); + width: flex-grid(1, 12); margin-right: flex-gutter(); - margin-top: 5px; - font-size: 14px; + text-align: right; + color: $white; + } - .icon { - display: inline-block; - vertical-align: top; - margin-right: 5px; - font-size: 20px; - } + .copy { + @include font-size(13); + width: flex-grid(10, 12); + color: $gray-l2; - p { - width: flex-grid(8, 9); - display: inline-block; - vertical-align: top; + .title { + @include font-size(14); + margin-bottom: 0; + color: $white; } } - .actions { - float: right; - width: flex-grid(3, 12); - margin-top: ($baseline/2); - text-align: right; + // with cancel + .action-notification-close { + @include transition(top .25s ease-in-out); + @include border-bottom-radius(3px); + position: absolute; + top: -($baseline/4); + left: ($baseline/2); + padding: ($baseline/4) ($baseline/2) 0 ($baseline/2); + background: $gray-d2; + text-align: center; - li { - display: inline-block; - vertical-align: middle; - margin-right: 10px; + .label { + @include text-sr(); + } - &:last-child { - margin-right: 0; + .ss-icon { + @include font-size(14); + color: $white; + } + + &:hover { + background: $blue; + top: 0; + } + } + + // with actions + &.has-actions { + + .icon { + width: flex-grid(1, 12); + } + + .copy { + width: flex-grid(7, 12); + margin-right: flex-gutter(); + } + + .nav-actions { + width: flex-grid(4, 12); + float: right; + margin-top: ($baseline/2); + text-align: right; + + .nav-item { + display: inline-block; + vertical-align: middle; + margin-right: ($baseline/2); + + &:last-child { + margin-right: 0; + } + + .action-primary { + @include font-size(13); + font-weight: 600; + } + + .action-secondary { + @include font-size(13); + } + } + } + } + + // notification types + &.warning { + + .action-notification-close { + + &:hover { + background: $orange; } } - .save-button { - @include blue-button; + .action-primary { + @include orange-button; + border-color: $orange-d2; } - .cancel-button { - @include white-button; + a { + color: $orange; + + &:hover { + color: $orange-s2; + } } } - strong { - font-weight: 700; + &.error { + + .action-notification-close { + + &:hover { + background: $red-l1; + } + } + + .action-primary { + @include red-button; + border-color: $red-d2; + } + + a { + color: $red-l1; + + &:hover { + color: $red; + } + } + } + + &.confirmation { + + .action-notification-close { + + &:hover { + background: $green; + } + } + + .action-primary { + @include green-button; + border-color: $green-d2; + } + + a { + color: $green; + + &:hover { + color: $green-s2; + } + } + } + + &.announcement { + + .action-notification-close { + + &:hover { + background: $blue; + } + } + + .action-primary { + @include blue-button; + border-color: $blue-d2; + } } } @@ -103,10 +290,9 @@ // alerts .wrapper-alert { @include box-sizing(border-box); - @include transition (opacity 2.0s ease-in-out 5s, border 0.5s ease-in-out); - @include box-shadow(0 1px 1px $white, inset 0 2px 5px $shadow-d1); + @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1); position: relative; - top: -($baseline*1.5); + top: -($baseline*20); z-index: 100; overflow: hidden; width: 100%; @@ -117,7 +303,6 @@ background: $gray-d3; &.is-shown { - bottom: 0; opacity: 1.0; } @@ -222,14 +407,14 @@ .icon { @include transition (color 0.5s ease-in-out); - @include font-size(28); + @include font-size(22); width: flex-grid(1, 12); margin-right: flex-gutter(); text-align: right; } .copy { - @include font-size(14); + @include font-size(13); width: flex-grid(10, 12); color: $gray-l2; @@ -332,14 +517,6 @@ @include blue-button; border-color: $blue-d2; } - - a { - color: $blue; - - &:hover { - color: $blue-s2; - } - } } &.step-required { diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 62f72e8d63..d2cdda443f 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -25,7 +25,7 @@ a { @include transition(color .15s); &:hover { - color: #cb9c40; + color: $orange-d1; } } @@ -885,7 +885,7 @@ body.js { // ==================== -// works in progress +// works in progress & testing body.hide-wip { .wip-box { @@ -893,6 +893,23 @@ body.hide-wip { } } +.wrapper-testing { + background: $black; + width: 100%; + height: auto; + + .testing { + @include font-size(14); + position: relative; + max-width: $fg-max-width; + min-width: $fg-min-width; + width: flex-grid(12); + margin: 0 auto $baseline auto; + padding: $baseline; + color: $white; + } +} + // ==================== // needed fudges for now diff --git a/cms/static/sass/_keyframes.scss b/cms/static/sass/_keyframes.scss index 7661f18980..394548a2e7 100644 --- a/cms/static/sass/_keyframes.scss +++ b/cms/static/sass/_keyframes.scss @@ -1,3 +1,33 @@ +// studio animations & keyframes +// ==================== + +// rotate clockwise +@mixin rotateClockwise { + 0% { + @include transform(rotate(0deg)); + } + + 25% { + @include transform(rotate(90deg)); + } + + 50% { + @include transform(rotate(180deg)); + } + + 100% { + @include transform(rotate(360deg)); + } +} + +@-moz-keyframes rotateClockwise { @include rotateClockwise(); } +@-webkit-keyframes rotateClockwise { @include rotateClockwise(); } +@-o-keyframes rotateClockwise { @include rotateClockwise(); } +@keyframes rotateClockwise { @include rotateClockwise();} + +// ==================== + +// bounce in @mixin bounce-in { 0% { opacity: 0; @@ -24,4 +54,4 @@ @include animation-duration($duration); @include animation-timing-function($timing); @include animation-fill-mode(both); -} +} \ No newline at end of file diff --git a/cms/static/sass/base-style.scss b/cms/static/sass/base-style.scss index dceac4233d..075e0e87a5 100644 --- a/cms/static/sass/base-style.scss +++ b/cms/static/sass/base-style.scss @@ -1,5 +1,6 @@ @import 'bourbon/bourbon'; @import 'bourbon/addons/button'; +@import "variables"; @import 'vendor/normalize'; @import 'keyframes'; @@ -7,7 +8,6 @@ @import 'mixins'; @import "fonts"; -@import "variables"; @import "cms_mixins"; @import "extends"; @import "base"; diff --git a/cms/templates/overview.html b/cms/templates/overview.html index bfab97d3a0..2950280702 100644 --- a/cms/templates/overview.html +++ b/cms/templates/overview.html @@ -13,375 +13,484 @@ <%namespace name="units" file="widgets/units.html" /> <%block name="jsextra"> - - - - - - - - + + + + + + + + - + $(".gradable-status").each(function(index, ele) { + var gradeView = new CMS.Views.OverviewAssignmentGrader({ + el : ele, + graders : window.graderTypes + }); + }); +}); + + <%block name="header_extras"> - - - - - + + + + + + + <%block name="content"> - -
-
- ⚠ + +
+
+ ⚠ -
+

You are editing a draft

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

-
- - +

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+ +
+
- -
-
- ⚠ + +
+
+ ⚠ -
+

A Newer Version of This Exists

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

-
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+
- + +
+
+ + +
+
+ ✓ + +
+

Your changes have been saved

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Please see below

+
- -
-
- ✓ + +
+
+ ✓ -
-

Your changes have been saved

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Please see below

-
+
+

X Has been removed

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+
- -
-
- ✓ + +
+
+ ⚠ -
-

X Has been removed

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

-
+
+

We're sorry, there was a error with Studio

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+
- -
-
- ⚠ + +
+
+ ⚠ -
-

We're sorry, there was a error with Studio

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

-
+
+

There was an error in your submission

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Please see below

+
+ + +
+
+ + +
+
+ 📢 + +
+

Studio will be unavailable this weekend

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+
+ + +
+
+ + +
+
+ 📢 + +
+

Studio will be unavailable this weekend

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+
- -
-
- ⚠ + +
+
+ -
-

There was an error in your submission

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Please see below

-
- - +
+

Your Studio account has been created, but needs to be activated

+

Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.

+ +
+
- -
-
- 📢 - -
-

Studio will be unavailable this weekend

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

-
- - -
-
- - -
-
- 📢 - -
-

Studio will be unavailable this weekend

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+
+
+

Section Release Date

+
+ + +
+

On the date set above, this section – – will be released to students. Any units marked private will only be visible to admins.

+ SaveCancel
+
- -
-
- +
+
+ +
+
-
-

Your Studio account has been created, but needs to be activated

-

Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.

-
- - +
+
+
+ Course Content +

Course Outline

-
-
-
-

Section Release Date

-
- - -
-

On the date set above, this section – – will be released to students. Any units marked private will only be visible to admins.

-
-
- SaveCancel -
-
+ + +
-
-
-
- Course Content -

Course Outline

-
+
+
+
- -
-
-
- % for section in sections: -
-
- - -
-

- ${section.display_name} - -

-
- <% - start_date = datetime.fromtimestamp(mktime(section.start)) if section.start is not None else None - start_date_str = start_date.strftime('%m/%d/%Y') if start_date is not None else '' - start_time_str = start_date.strftime('%H:%M') if start_date is not None else '' - %> - %if start_date is None: - This section has not been released. - Schedule - %else: - Will Release: ${start_date_str} at ${start_time_str} - Edit - %endif -
-
- -
- - -
-
-
-
- - New Subsection - -
-
    - % for subsection in section.get_children(): - - % endfor -
+
+

+ ${section.display_name} + +

+
+ <% + start_date = datetime.fromtimestamp(mktime(section.start)) if section.start is not None else None + start_date_str = start_date.strftime('%m/%d/%Y') if start_date is not None else '' + start_time_str = start_date.strftime('%H:%M') if start_date is not None else '' + %> + %if start_date is None: + This section has not been released. + Schedule + %else: + Will Release: ${start_date_str} at ${start_time_str} + Edit + %endif +
-
- % endfor -
+ +
+ + +
+
+
+
+ + New Subsection + +
+
    + % for subsection in section.get_children(): + + % endfor +
+
+ + % endfor + +
+
+
+ + +
+
+ 📝 + +
+

You've Made Some Changes

+

Note: Your changes will not take effect until you save your progress.

+
+ + +
+
+ + +
+
+ ⚠ + +
+

A Newer Version of This Exists

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+
+ + + + + ␡ + close notification + +
+
+ + +
+
+ ⚠ + +
+

Are You Sure You Want to Edit That?

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+
+ + +
+
+ + +
+
+ ⚙ + +
+

Saving

+

Hamster wheels are turning pretty fast right now. Hang on! Saving will be done soon.

-
+
+ + +
+
+ ❓ + +
+

Fun Fact:

+

Using the checkmark will allow you make a subsection gradable as an assignment, which counts towards a student's total grade

+
+
+
\ No newline at end of file From d809df913daf3f5d83753922d8f157c94ff217d8 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Mon, 25 Feb 2013 14:45:27 -0500 Subject: [PATCH 07/48] studio - alerts: moved all states and documentation into new /alerts view --- cms/djangoapps/contentstore/views.py | 3 + cms/static/sass/_alerts.scss | 18 +- cms/static/sass/_base.scss | 27 +++ cms/templates/alerts.html | 326 +++++++++++++++++++++++++++ cms/templates/overview.html | 273 ---------------------- cms/urls.py | 1 + 6 files changed, 374 insertions(+), 274 deletions(-) create mode 100644 cms/templates/alerts.html diff --git a/cms/djangoapps/contentstore/views.py b/cms/djangoapps/contentstore/views.py index 6d5905afe7..2e30751d30 100644 --- a/cms/djangoapps/contentstore/views.py +++ b/cms/djangoapps/contentstore/views.py @@ -106,6 +106,9 @@ def howitworks(request): else: return render_to_response('howitworks.html', {}) +def alerts(request): + return render_to_response('alerts.html', {}) + # ==== Views for any logged-in user ================================== @login_required diff --git a/cms/static/sass/_alerts.scss b/cms/static/sass/_alerts.scss index de025e1be2..d211d0d2ed 100644 --- a/cms/static/sass/_alerts.scss +++ b/cms/static/sass/_alerts.scss @@ -292,7 +292,7 @@ @include box-sizing(border-box); @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1); position: relative; - top: -($baseline*20); + top: -($baseline*1.5); z-index: 100; overflow: hidden; width: 100%; @@ -536,6 +536,22 @@ } } +// temporary +body.uxdesign.alerts { + + .content-primary, .content-supplementary { + @include box-sizing(border-box); + float: left; + } + + .content-primary { + @extend .window; + width: flex-grid(12, 12); + margin-right: flex-gutter(); + padding: $baseline ($baseline*1.5); + } +} + // artifact styles // .alert { // padding: 15px 20px; diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index d2cdda443f..0d01a0b24b 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -339,11 +339,38 @@ h1 { .title-5 { } + + > section { + margin: 0 0 $baseline 0; + + header { + @include clearfix(); + + .title-2 { + width: flex-grid(5, 12); + margin: 0 flex-gutter() 0 0; + float: left; + } + + .tip { + @include font-size(13); + width: flex-grid(7, 12); + float: right; + margin-top: ($baseline/2); + text-align: right; + color: $gray-l2; + } + } + } } // layout - supplemental content .content-supplementary { + > section { + margin: 0 0 $baseline 0; + } + .bit { @include font-size(13); margin: 0 0 $baseline 0; diff --git a/cms/templates/alerts.html b/cms/templates/alerts.html new file mode 100644 index 0000000000..efdac8e761 --- /dev/null +++ b/cms/templates/alerts.html @@ -0,0 +1,326 @@ +<%inherit file="base.html" /> +<%block name="title">Studio Alerts +<%block name="bodyclass">is-signedin course uxdesign alerts + +<%block name="content"> + +
+
+ ⚠ + +
+

You are editing a draft

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+
+ + +
+
+ + +
+
+ ⚠ + +
+

A Newer Version of This Exists

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+
+ + +
+
+ + +
+
+ ✓ + +
+

Your changes have been saved

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Please see below

+
+
+
+ + +
+
+ ✓ + +
+

X Has been removed

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+
+
+
+ + +
+
+ ⚠ + +
+

We're sorry, there was a error with Studio

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+
+
+
+ + +
+
+ ⚠ + +
+

There was an error in your submission

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Please see below

+
+ + +
+
+ + +
+
+ 📢 + +
+

Studio will be unavailable this weekend

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+
+ + +
+
+ + +
+
+ 📢 + +
+

Studio will be unavailable this weekend

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+
+
+
+ + +
+
+ + +
+

Your Studio account has been created, but needs to be activated

+

Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.

+
+ + +
+
+ +
+
+

Section Release Date

+
+ + +
+

On the date set above, this section – – will be released to students. Any units marked private will only be visible to admins.

+
+
+ SaveCancel +
+
+ +
+
+ +
+
+ +
+
+
+ UX Design +

Alerts & Notifications

+
+
+
+ +
+
+
+
+
+

Alerts

+ persistant, static messages to the user +
+ +

In Studio, alerts are 1) general warnings/notes (e.g. drafts, published content, next steps) about the current view a user is interacting with or 2) notes about the status (e.g. saved confirmations, errors, next system steps) of any previous state that need to communicated to the user when arriving at the current view.

+
+ +
+
+

Notifications

+ contextual, feedback-based, and temporal messages to the user +
+ +

In Studio, notifications are meant to inform the user of 1) any system status (e.g. saving, processing/validating) occurring based on any action they have taken or 2) any decisions (e.g. saving/discarding) a user must make to confirm.

+
+
+
+
+ + +
+
+ 📝 + +
+

You've Made Some Changes

+

Note: Your changes will not take effect until you save your progress.

+
+ + +
+
+ + +
+
+ ⚠ + +
+

A Newer Version of This Exists

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+
+ + + + + ␡ + close notification + +
+
+ + +
+
+ ⚠ + +
+

Are You Sure You Want to Edit That?

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

+
+ + +
+
+ + +
+
+ ⚙ + +
+

Saving

+

Hamster wheels are turning pretty fast right now. Hang on! Saving will be done soon.

+
+
+
+ + +
+
+ ❓ + +
+

Fun Fact:

+

Using the checkmark will allow you make a subsection gradable as an assignment, which counts towards a student's total grade

+
+
+
+ \ No newline at end of file diff --git a/cms/templates/overview.html b/cms/templates/overview.html index 2950280702..1792cbc844 100644 --- a/cms/templates/overview.html +++ b/cms/templates/overview.html @@ -106,171 +106,6 @@ $(document).ready(function(){ <%block name="content"> - -
-
- ⚠ - -
-

You are editing a draft

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

-
- - -
-
- - -
-
- ⚠ - -
-

A Newer Version of This Exists

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

-
- - -
-
- - -
-
- ✓ - -
-

Your changes have been saved

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Please see below

-
-
-
- - -
-
- ✓ - -
-

X Has been removed

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

-
-
-
- - -
-
- ⚠ - -
-

We're sorry, there was a error with Studio

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

-
-
-
- - -
-
- ⚠ - -
-

There was an error in your submission

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Please see below

-
- - -
-
- - -
-
- 📢 - -
-

Studio will be unavailable this weekend

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

-
- - -
-
- - -
-
- 📢 - -
-

Studio will be unavailable this weekend

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

-
-
-
- - -
-
- - -
-

Your Studio account has been created, but needs to be activated

-

Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.

-
- - -
-
-

Section Release Date

@@ -285,14 +120,6 @@ $(document).ready(function(){
-
-
- -
-
-
@@ -393,104 +220,4 @@ $(document).ready(function(){
- -
-
- 📝 - -
-

You've Made Some Changes

-

Note: Your changes will not take effect until you save your progress.

-
- - -
-
- - -
-
- ⚠ - -
-

A Newer Version of This Exists

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

-
- - - - - ␡ - close notification - -
-
- - -
-
- ⚠ - -
-

Are You Sure You Want to Edit That?

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

-
- - -
-
- - -
-
- ⚙ - -
-

Saving

-

Hamster wheels are turning pretty fast right now. Hang on! Saving will be done soon.

-
-
-
- - -
-
- ❓ - -
-

Fun Fact:

-

Using the checkmark will allow you make a subsection gradable as an assignment, which counts towards a student's total grade

-
-
-
\ No newline at end of file diff --git a/cms/urls.py b/cms/urls.py index 35b2707241..5c8bd42b10 100644 --- a/cms/urls.py +++ b/cms/urls.py @@ -78,6 +78,7 @@ urlpatterns = ('', # User creation and updating views urlpatterns += ( + url(r'^alerts$', 'contentstore.views.alerts', name='alerts'), url(r'^howitworks$', 'contentstore.views.howitworks', name='howitworks'), url(r'^signup$', 'contentstore.views.signup', name='signup'), From 95ea01689f2a0ed955a173192191da8f8040f973 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Mon, 25 Feb 2013 16:30:36 -0500 Subject: [PATCH 08/48] studio - alerts: firmed up status-based notifications --- cms/static/sass/_alerts.scss | 62 +++++++++++++++++++++++---------- cms/static/sass/_base.scss | 40 ++++++++------------- cms/static/sass/_keyframes.scss | 8 ----- cms/templates/alerts.html | 57 ++++++++++++++++++------------ 4 files changed, 93 insertions(+), 74 deletions(-) diff --git a/cms/static/sass/_alerts.scss b/cms/static/sass/_alerts.scss index d211d0d2ed..8e5401112b 100644 --- a/cms/static/sass/_alerts.scss +++ b/cms/static/sass/_alerts.scss @@ -10,20 +10,12 @@ -webkit-transition: bottom 1.5s ease-in-out 0.25s; @include box-shadow(0 -1px 3px $shadow); position: fixed; - bottom: -1000px; z-index: 1000; width: 100%; - overflow: hidden; - opacity: 0; border-top: 4px solid $gray-l1; padding: ($baseline*0.75) ($baseline*2); background: $gray-d3; - &.is-shown { - bottom: 0; - opacity: 1.0; - } - &.wrapper-notification-warning { border-top-color: $orange; @@ -74,12 +66,11 @@ // shorter/status notifications &.wrapper-notification-status { - width: ($baseline*10); + width: ($baseline*12.5); right: ($baseline); padding: ($baseline/2) $baseline; .notification { - background: red; @include box-sizing(border-box); @include clearfix(); width: 100%; @@ -87,11 +78,19 @@ min-width: none; .icon { - width: auto; + width: $baseline; + margin-right: ($baseline*0.75); } .copy { - width: auto; + width: ($baseline*9); + + p { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + width: 100%; + } } } } @@ -115,7 +114,7 @@ .icon { @include transition (color 0.5s ease-in-out); - @include font-size(28); + @include font-size(22); width: flex-grid(1, 12); margin-right: flex-gutter(); text-align: right; @@ -283,6 +282,16 @@ border-color: $blue-d2; } } + + &.saving { + + .icon-saving { + @include animation(rotateClockwise 3.0s forwards linear infinite); + width: 22px; + height: 25px; + line-height: 3rem !important; + } + } } // ==================== @@ -296,16 +305,11 @@ z-index: 100; overflow: hidden; width: 100%; - opacity: 0; border-bottom: 4px solid $gray-l1; border-top: 1px solid $black; padding: $baseline ($baseline*2); background: $gray-d3; - &.is-shown { - opacity: 1.0; - } - &.wrapper-alert-warning { border-bottom-color: $orange; @@ -536,6 +540,28 @@ } } +// js enabled +.js { + + .wrapper-alert { + display: none; + + &.is-shown { + display: block; + } + } + + .wrapper-notification { + bottom: -1000px; + opacity: 0; + + &.is-shown { + bottom: 0; + opacity: 1.0; + } + } +} + // temporary body.uxdesign.alerts { diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 0d01a0b24b..d5a8adc6cb 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -69,7 +69,7 @@ h1 { } .title-3 { - @include font-size(16); + @include font-size(18); margin-bottom: ($baseline/2); } @@ -93,6 +93,14 @@ h1 { font-weight: 500 } +p, ul, ol, dl { + margin-bottom: ($baseline/2); + + &:last-child { + margin-bottom: 0; + } +} + // ==================== // layout - basic page header @@ -316,32 +324,12 @@ h1 { color: $gray-d3; } - .title-1 { - - } - - .title-2 { - @include font-size(24); - margin: 0 0 ($baseline/2) 0; - font-weight: 600; - } - - .title-3 { - @include font-size(16); - margin: 0 0 ($baseline/4) 0; - font-weight: 500; - } - - .title-4 { - - } - - .title-5 { - - } - > section { - margin: 0 0 $baseline 0; + margin: 0 0 ($baseline*2) 0; + + &:last-child { + margin-bottom: 0; + } header { @include clearfix(); diff --git a/cms/static/sass/_keyframes.scss b/cms/static/sass/_keyframes.scss index 394548a2e7..0ae1d78ffe 100644 --- a/cms/static/sass/_keyframes.scss +++ b/cms/static/sass/_keyframes.scss @@ -7,14 +7,6 @@ @include transform(rotate(0deg)); } - 25% { - @include transform(rotate(90deg)); - } - - 50% { - @include transform(rotate(180deg)); - } - 100% { @include transform(rotate(360deg)); } diff --git a/cms/templates/alerts.html b/cms/templates/alerts.html index efdac8e761..869bad7260 100644 --- a/cms/templates/alerts.html +++ b/cms/templates/alerts.html @@ -4,7 +4,7 @@ <%block name="content"> -
+
⚠ @@ -28,7 +28,7 @@
-
+
⚠ @@ -52,7 +52,7 @@
-
+
✓ @@ -64,7 +64,7 @@
-
+
✓ @@ -76,7 +76,7 @@
-
+
⚠ @@ -88,7 +88,7 @@
-
+
⚠ @@ -109,7 +109,7 @@
-
+
📢 @@ -133,7 +133,7 @@
-
+
📢 @@ -145,7 +145,7 @@
-
+
@@ -182,14 +182,6 @@
-
-
- -
-
-
@@ -209,6 +201,17 @@

In Studio, alerts are 1) general warnings/notes (e.g. drafts, published content, next steps) about the current view a user is interacting with or 2) notes about the status (e.g. saved confirmations, errors, next system steps) of any previous state that need to communicated to the user when arriving at the current view.

+ +

Different Static Examples of Alerts

+

Note: alerts will probably never been shown based on click or page action and will primarily be loaded along with a pageload and initial display

+ +
@@ -218,13 +221,23 @@

In Studio, notifications are meant to inform the user of 1) any system status (e.g. saving, processing/validating) occurring based on any action they have taken or 2) any decisions (e.g. saving/discarding) a user must make to confirm.

+ +

Different Static Examples of Notifications

+ +
-
+
📝 @@ -248,7 +261,7 @@
-
+
⚠ @@ -277,7 +290,7 @@
-
+
⚠ @@ -301,7 +314,7 @@
-
+
⚙ @@ -313,7 +326,7 @@
-
+
❓ From 0926395445cf20e15edfd4b0f80e1359994e1ac8 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Tue, 26 Feb 2013 12:32:20 -0500 Subject: [PATCH 09/48] studio - alerts: added in close buttons and basic JS to control them/moved demo JS to alerts.html page --- cms/static/js/base.js | 35 ++++----- cms/static/sass/_alerts.scss | 137 +++++++++++++++++++++++++---------- cms/templates/alerts.html | 79 ++++++++++++++++---- 3 files changed, 179 insertions(+), 72 deletions(-) diff --git a/cms/static/js/base.js b/cms/static/js/base.js index c2080c87f9..21571a8f4a 100644 --- a/cms/static/js/base.js +++ b/cms/static/js/base.js @@ -43,31 +43,28 @@ $(document).ready(function () { $('body').addClass('js'); - // notifications - $('.testing .test-notification').click(function(e) { - (e).preventDefault(); - manageNotification(e); - }); - - function manageNotification(e) { - var $notificationRibbon = $('.wrapper-notification'); - - // showing - $notificationRibbon.toggleClass('is-shown'); - - // controls for closing notification - $notificationRibbon.find('.action-notification-close').click(function(e) { - (e).preventDefault(); - $notificationRibbon.toggleClass('is-shown'); - }); - } - // lean/simple modal $('a[rel*=modal]').leanModal({overlay : 0.80, closeButton: '.action-modal-close' }); $('a.action-modal-close').click(function(e){ (e).preventDefault(); }); + // alert and notifications - manual close + $('.action-alert-close').click(function(e) { + (e).preventDefault(); + console.log('closing alert'); + $(this).closest('.wrapper-alert').removeClass('is-shown'); + }); + + // alert and notifications - manual close + $('.action-notification-close').click(function(e) { + (e).preventDefault(); + $(this).closest('.wrapper-notification').removeClass('is-shown'); + }); + + + + // nav - dropdown related $body.click(function (e) { $('.nav-dropdown .nav-item .wrapper-nav-sub').removeClass('is-shown'); diff --git a/cms/static/sass/_alerts.scss b/cms/static/sass/_alerts.scss index 8e5401112b..5b9a08b0ea 100644 --- a/cms/static/sass/_alerts.scss +++ b/cms/static/sass/_alerts.scss @@ -5,9 +5,8 @@ .wrapper-notification { @include clearfix(); @include box-sizing(border-box); - // @include transition (bottom 1.5s ease-in-out 0.25s); - transition: bottom 1.5s ease-in-out 0.25s; - -webkit-transition: bottom 1.5s ease-in-out 0.25s; + transition: bottom 1.0s ease-in-out 0.125s; + -webkit-transition: bottom 1.0s ease-in-out 0.125s; @include box-shadow(0 -1px 3px $shadow); position: fixed; z-index: 1000; @@ -66,8 +65,9 @@ // shorter/status notifications &.wrapper-notification-status { - width: ($baseline*12.5); + width: ($baseline*6); right: ($baseline); + border-top-color: $pink; padding: ($baseline/2) $baseline; .notification { @@ -94,6 +94,30 @@ } } } + + // shorter/status notifications + &.wrapper-notification-help { + width: ($baseline*14); + right: ($baseline); + padding: ($baseline/2) $baseline; + + .notification { + @include box-sizing(border-box); + @include clearfix(); + width: 100%; + max-width: none; + min-width: none; + + .icon-help { + width: $baseline; + margin-right: ($baseline*0.75); + } + + .copy { + width: ($baseline*11); + } + } + } } .notification { @@ -135,27 +159,24 @@ // with cancel .action-notification-close { - @include transition(top .25s ease-in-out); - @include border-bottom-radius(3px); + @include border-top-radius(3px); position: absolute; - top: -($baseline/4); - left: ($baseline/2); + top: -31px; + right: $baseline; padding: ($baseline/4) ($baseline/2) 0 ($baseline/2); - background: $gray-d2; + background: $gray-l1; text-align: center; .label { @include text-sr(); } - .ss-icon { + .icon { @include font-size(14); color: $white; - } - - &:hover { - background: $blue; - top: 0; + width: auto; + margin: 0; + padding: 2px; } } @@ -185,31 +206,35 @@ &:last-child { margin-right: 0; } - - .action-primary { - @include font-size(13); - font-weight: 600; - } - - .action-secondary { - @include font-size(13); - } } } + + .action-primary { + @include blue-button(); + @include font-size(13); + border-color: $blue-d2; + font-weight: 600; + } + + .action-secondary { + @include font-size(13); + } } // notification types &.warning { .action-notification-close { + background: $orange; &:hover { - background: $orange; + background: $orange-s2; } } .action-primary { - @include orange-button; + @include orange-button(); + @include font-size(13); border-color: $orange-d2; } @@ -225,14 +250,16 @@ &.error { .action-notification-close { + background: $red-l1; &:hover { - background: $red-l1; + background: $red; } } .action-primary { - @include red-button; + @include red-button(); + @include font-size(13); border-color: $red-d2; } @@ -248,14 +275,16 @@ &.confirmation { .action-notification-close { + background: $green; &:hover { - background: $green; + background: $green-s2; } } .action-primary { - @include green-button; + @include green-button(); + @include font-size(13); border-color: $green-d2; } @@ -271,14 +300,16 @@ &.announcement { .action-notification-close { + background: $blue; &:hover { - background: $blue; + background: $blue-s1; } } .action-primary { - @include blue-button; + @include blue-button(); + @include font-size(13); border-color: $blue-d2; } } @@ -291,6 +322,10 @@ height: 25px; line-height: 3rem !important; } + + .copy p { + @include text-sr(); + } } } @@ -428,6 +463,7 @@ } } + // with actions &.has-actions { .icon { @@ -466,11 +502,38 @@ } } + // with cancel + .action-alert-close { + @include border-bottom-radius(3px); + position: absolute; + top: -($baseline/10); + right: $baseline; + padding: ($baseline/4) ($baseline/2) 0 ($baseline/2); + background: $gray-d1; + text-align: center; + + .label { + @include text-sr(); + } + + .icon { + @include font-size(14); + color: $white; + width: auto; + margin: 0; + padding: 2px; + } + + &:hover { + background: $gray-l1; + } + } + // alert types &.warning { .action-primary { - @include orange-button; + @include orange-button(); border-color: $orange-d2; } @@ -486,7 +549,7 @@ &.error { .action-primary { - @include red-button; + @include red-button(); border-color: $red-d2; } @@ -502,7 +565,7 @@ &.confirmation { .action-primary { - @include green-button; + @include green-button(); border-color: $green-d2; } @@ -518,7 +581,7 @@ &.announcement { .action-primary { - @include blue-button; + @include blue-button(); border-color: $blue-d2; } } @@ -527,7 +590,7 @@ .action-primary { border-color: $pink-d2; - @include pink-button; + @include pink-button(); } a { diff --git a/cms/templates/alerts.html b/cms/templates/alerts.html index 869bad7260..a783a6f2fe 100644 --- a/cms/templates/alerts.html +++ b/cms/templates/alerts.html @@ -2,6 +2,26 @@ <%block name="title">Studio Alerts <%block name="bodyclass">is-signedin course uxdesign alerts +<%block name="jsextra"> + + + <%block name="content">
@@ -63,6 +83,23 @@
+ +
+
+ ✓ + +
+

Your changes have been saved

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Please see below

+
+ + + ␡ + close alert + +
+
+
@@ -206,11 +243,16 @@

Note: alerts will probably never been shown based on click or page action and will primarily be loaded along with a pageload and initial display

@@ -225,11 +267,11 @@

Different Static Examples of Notifications

@@ -243,7 +285,7 @@

You've Made Some Changes

-

Note: Your changes will not take effect until you save your progress.

+

Your changes will not take effect until you save your progress.

-
+
⚙ @@ -325,15 +367,20 @@
- -
-
- ❓ + +
+
+ ❓

Fun Fact:

Using the checkmark will allow you make a subsection gradable as an assignment, which counts towards a student's total grade

+ + + ␡ + close notification +
\ No newline at end of file From d09927e8ddf9be8640fcae31541f0e761e737db7 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Tue, 26 Feb 2013 12:38:46 -0500 Subject: [PATCH 10/48] studio - alerts: small styling tweaks for the close button on help notifications --- cms/static/sass/_alerts.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/cms/static/sass/_alerts.scss b/cms/static/sass/_alerts.scss index 5b9a08b0ea..5364e637d7 100644 --- a/cms/static/sass/_alerts.scss +++ b/cms/static/sass/_alerts.scss @@ -113,8 +113,12 @@ margin-right: ($baseline*0.75); } + .action-notification-close { + right: 0; + } + .copy { - width: ($baseline*11); + width: ($baseline*10); } } } From cb456ad22875b8eac9e9b7e552158e40e702ad97 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 27 Feb 2013 12:45:44 -0500 Subject: [PATCH 11/48] studio - alerts: converted transition-based animation to keyframe/css animation and added in a demo for a fleeting notification --- cms/static/js/base.js | 9 ++--- cms/static/sass/_alerts.scss | 62 ++++++++++++++++++++------------- cms/static/sass/_keyframes.scss | 44 +++++++++++++++++++++++ cms/static/sass/_variables.scss | 4 +++ cms/templates/alerts.html | 21 ++++++++--- 5 files changed, 105 insertions(+), 35 deletions(-) diff --git a/cms/static/js/base.js b/cms/static/js/base.js index 21571a8f4a..0bb0ae10f1 100644 --- a/cms/static/js/base.js +++ b/cms/static/js/base.js @@ -50,21 +50,18 @@ $(document).ready(function () { }); // alert and notifications - manual close - $('.action-alert-close').click(function(e) { + $('.action-alert-close, .alert.has-actions .nav-actions a').click(function(e) { (e).preventDefault(); console.log('closing alert'); $(this).closest('.wrapper-alert').removeClass('is-shown'); }); - // alert and notifications - manual close - $('.action-notification-close').click(function(e) { + // alert and notifications - manual & action-based close + $('.action-notification-close, .notification.has-actions .nav-actions a').click(function(e) { (e).preventDefault(); $(this).closest('.wrapper-notification').removeClass('is-shown'); }); - - - // nav - dropdown related $body.click(function (e) { $('.nav-dropdown .nav-item .wrapper-nav-sub').removeClass('is-shown'); diff --git a/cms/static/sass/_alerts.scss b/cms/static/sass/_alerts.scss index 5364e637d7..a582c5cfcf 100644 --- a/cms/static/sass/_alerts.scss +++ b/cms/static/sass/_alerts.scss @@ -5,10 +5,9 @@ .wrapper-notification { @include clearfix(); @include box-sizing(border-box); - transition: bottom 1.0s ease-in-out 0.125s; - -webkit-transition: bottom 1.0s ease-in-out 0.125s; @include box-shadow(0 -1px 3px $shadow); position: fixed; + bottom: 0; z-index: 1000; width: 100%; border-top: 4px solid $gray-l1; @@ -31,7 +30,7 @@ } } - &.wrapper-notification-error { + &.wrapper-cation-error { border-top-color: $red-l1; .icon-error { @@ -50,24 +49,31 @@ &.wrapper-notification-confirmation { border-top-color: $green; - .icon-error { + .icon-confirmation { color: $green; } &:hover { border-top-color: $green-s1; - .icon-error { + .icon-confirmation { color: $green-s1; } } } + &.wrapper-notification-saving { + border-top-color: $pink; + + &:hover { + border-top-color: $pink-s1; + } + } + // shorter/status notifications &.wrapper-notification-status { - width: ($baseline*6); + width: ($baseline*8); right: ($baseline); - border-top-color: $pink; padding: ($baseline/2) $baseline; .notification { @@ -77,25 +83,26 @@ max-width: none; min-width: none; + .icon, .copy { + float: none; + display: inline-block; + vertical-align: middle; + } + .icon { width: $baseline; + height: ($baseline*1.25); margin-right: ($baseline*0.75); + line-height: 3rem; } .copy { - width: ($baseline*9); - p { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - width: 100%; - } } - } + } } - // shorter/status notifications + // help notifications &.wrapper-notification-help { width: ($baseline*14); right: ($baseline); @@ -138,12 +145,15 @@ .icon, .copy { float: left; + display: inline-block; + vertical-align: middle; } .icon { @include transition (color 0.5s ease-in-out); @include font-size(22); width: flex-grid(1, 12); + height: ($baseline*1.25); margin-right: flex-gutter(); text-align: right; color: $white; @@ -165,9 +175,9 @@ .action-notification-close { @include border-top-radius(3px); position: absolute; - top: -31px; + top: -34px; right: $baseline; - padding: ($baseline/4) ($baseline/2) 0 ($baseline/2); + padding: ($baseline/5) ($baseline/2.5) 0 ($baseline/2.5); background: $gray-l1; text-align: center; @@ -278,6 +288,10 @@ &.confirmation { + .copy { + margin-top: ($baseline/5); + } + .action-notification-close { background: $green; @@ -323,8 +337,6 @@ .icon-saving { @include animation(rotateClockwise 3.0s forwards linear infinite); width: 22px; - height: 25px; - line-height: 3rem !important; } .copy p { @@ -619,12 +631,14 @@ } .wrapper-notification { - bottom: -1000px; - opacity: 0; + bottom: -($notification-height); &.is-shown { - bottom: 0; - opacity: 1.0; + @include animation(notificationsSlideUp 2s forwards ease-in-out 1); + } + + &.is-fleeting.is-shown { + @include animation(notificationsSlideUpDown 6s forwards ease-in-out 1); } } } diff --git a/cms/static/sass/_keyframes.scss b/cms/static/sass/_keyframes.scss index 0ae1d78ffe..a13891160a 100644 --- a/cms/static/sass/_keyframes.scss +++ b/cms/static/sass/_keyframes.scss @@ -19,6 +19,50 @@ // ==================== +// notifications slide up +@mixin notificationsSlideUp { + 0% { + @include transform(translateY(0)); + } + + 90% { + @include transform(translateY(-($notification-height))); + } + + 100% { + @include transform(translateY(-($notification-height*0.99))); + } +} + +@-moz-keyframes notificationsSlideUp { @include notificationsSlideUp(); } +@-webkit-keyframes notificationsSlideUp { @include notificationsSlideUp(); } +@-o-keyframes notificationsSlideUp { @include notificationsSlideUp(); } +@keyframes notificationsSlideUp { @include notificationsSlideUp();} + +// ==================== + +// notifications slide up +@mixin notificationsSlideUpDown { + 0%, 100% { + @include transform(translateY(0)); + } + + 15%, 85% { + @include transform(translateY(-($notification-height))); + } + + 20%, 80% { + @include transform(translateY(-($notification-height*0.99))); + } +} + +@-moz-keyframes notificationsSlideUpDown { @include notificationsSlideUpDown(); } +@-webkit-keyframes notificationsSlideUpDown { @include notificationsSlideUpDown(); } +@-o-keyframes notificationsSlideUpDown { @include notificationsSlideUpDown(); } +@keyframes notificationsSlideUpDown { @include notificationsSlideUpDown();} + +// ==================== + // bounce in @mixin bounce-in { 0% { diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index 907d5cbdb2..b89fa7cc18 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -136,6 +136,10 @@ $shadow-l1: rgba(0,0,0,0.1); $shadow-l2: rgba(0,0,0,0.05); $shadow-d1: rgba(0,0,0,0.4); + +// specific UI +$notification-height: ($baseline*10); + // colors - inherited $baseFontColor: #3c3c3c; $offBlack: #3c3c3c; diff --git a/cms/templates/alerts.html b/cms/templates/alerts.html index a783a6f2fe..3682cb3200 100644 --- a/cms/templates/alerts.html +++ b/cms/templates/alerts.html @@ -250,8 +250,8 @@
  • Toggle Previous View/Action Removed Alert
  • Toggle System Error Alert
  • Toggle User Error Alert
    • -
  • Toggle Announcement Alert
    • -
  • Toggle Announcement with Actions Alert
    • +
  • Toggle Announcement Alert
    • +
  • Toggle Announcement with Actions Alert
  • Toggle Activiation Alert
    • @@ -270,6 +270,7 @@
  • Toggle Change Warning Notification
  • Toggle New Version Warning Notification
  • Toggle Editing Warning Notification
    • +
  • Toggle Confirmation Notification
  • Toggle Saving Notification
  • Toggle Help Notification
    • @@ -356,13 +357,23 @@
    -
    +
    ⚙
    -

    Saving

    -

    Hamster wheels are turning pretty fast right now. Hang on! Saving will be done soon.

    +

    Saving …

    +
    +
    +
    + + +
    +
    + ✓ + +
    +

    Your Section Has Been Created

    From ad70581b80635999ebb610c26abbb2371c738888 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Fri, 1 Mar 2013 15:43:07 -0500 Subject: [PATCH 12/48] studio - alerts: more progress including prompts --- cms/static/js/base.js | 8 +- cms/static/sass/_alerts.scss | 82 +++++++++++++++++++- cms/static/sass/_keyframes.scss | 24 +++++- cms/static/sass/_variables.scss | 6 ++ cms/templates/alerts.html | 129 ++++++++++++++++++++++++++------ 5 files changed, 222 insertions(+), 27 deletions(-) diff --git a/cms/static/js/base.js b/cms/static/js/base.js index 0bb0ae10f1..9af785045f 100644 --- a/cms/static/js/base.js +++ b/cms/static/js/base.js @@ -59,7 +59,13 @@ $(document).ready(function () { // alert and notifications - manual & action-based close $('.action-notification-close, .notification.has-actions .nav-actions a').click(function(e) { (e).preventDefault(); - $(this).closest('.wrapper-notification').removeClass('is-shown'); + $(this).closest('.wrapper-notification').removeClass('is-shown').addClass('is-hiding'); + }); + + // prompt close + $('.prompt .action-cancel').click(function(e) { + (e).preventDefault(); + $(this).closest('.wrapper-prompt').removeClass('is-shown').addClass('is-hiding'); }); // nav - dropdown related diff --git a/cms/static/sass/_alerts.scss b/cms/static/sass/_alerts.scss index a582c5cfcf..fc8b25ea2c 100644 --- a/cms/static/sass/_alerts.scss +++ b/cms/static/sass/_alerts.scss @@ -1,6 +1,43 @@ // studio alerts and notifications // ==================== +// prompts +.wrapper-prompt { + position: fixed; + top: 0; + background: $black-t1; + width: 100%; + height: 100%; + text-align: center; + z-index: 100; + + &:before { + content: ''; + display: inline-block; + height: 100%; + vertical-align: middle; + margin-right: -0.25em; /* Adjusts for spacing */ + } + + .prompt { + @include border-radius(3px); + @include box-sizing(border-box); + @include box-shadow(0 0 4px $shadow-d1); + display: inline-block; + vertical-align: middle; + width: $baseline*15; + padding: $baseline; + background: $white; + + .nav-actions { + + .nav-item { + + } + } + } +} + // notifications .wrapper-notification { @include clearfix(); @@ -622,6 +659,17 @@ // js enabled .js { + .wrapper-prompt { + @include transition (opacity 0.25s ease-in-out); + display: none; + opacity: 0; + + &.is-shown { + display: block; + opacity: 1.0; + } + } + .wrapper-alert { display: none; @@ -633,12 +681,17 @@ .wrapper-notification { bottom: -($notification-height); + // varying animations &.is-shown { - @include animation(notificationsSlideUp 2s forwards ease-in-out 1); + @include animation(notificationsSlideUp 1s forwards ease-in-out 1); } - &.is-fleeting.is-shown { - @include animation(notificationsSlideUpDown 6s forwards ease-in-out 1); + &.is-hiding { + @include animation(notificationsSlideDown 1s forwards ease-in-out 1); + } + + &.is-fleeting { + @include animation(notificationsSlideUpDown 2s forwards ease-in-out 1); } } } @@ -656,6 +709,29 @@ body.uxdesign.alerts { width: flex-grid(12, 12); margin-right: flex-gutter(); padding: $baseline ($baseline*1.5); + + ul { + + li { + @include clearfix(); + width: flex-grid(12, 12); + margin-bottom: ($baseline/4); + border-bottom: 1px solid $gray-l4; + padding-bottom: ($baseline/4); + + &:last-child { + margin-bottom: 0; + border-bottom: none; + padding-bottom: 0; + } + + a { + float: left; + width: flex-grid(5, 12); + margin-right: flex-gutter(); + } + } + } } } diff --git a/cms/static/sass/_keyframes.scss b/cms/static/sass/_keyframes.scss index a13891160a..372fb9e0ca 100644 --- a/cms/static/sass/_keyframes.scss +++ b/cms/static/sass/_keyframes.scss @@ -41,7 +41,29 @@ // ==================== -// notifications slide up +// notifications slide down +@mixin notificationsSlideDown { + 0% { + @include transform(translateY(-($notification-height*0.99))); + } + + 10% { + @include transform(translateY(-($notification-height))); + } + + 100% { + @include transform(translateY(0)); + } +} + +@-moz-keyframes notificationsSlideDown { @include notificationsSlideDown(); } +@-webkit-keyframes notificationsSlideDown { @include notificationsSlideDown(); } +@-o-keyframes notificationsSlideDown { @include notificationsSlideDown(); } +@keyframes notificationsSlideDown { @include notificationsSlideDown();} + +// ==================== + +// notifications slide up then down @mixin notificationsSlideUpDown { 0%, 100% { @include transform(translateY(0)); diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index b89fa7cc18..35f39fcd3a 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -16,7 +16,13 @@ $error-red: rgb(253, 87, 87); // colors - new for re-org $black: rgb(0,0,0); +$black-t1: rgba(0,0,0,0.25); +$black-t2: rgba(0,0,0,0.50); +$black-t3: rgba(0,0,0,0.75); $white: rgb(255,255,255); +$white-t1: rgba(255,255,255,0.25); +$white-t2: rgba(255,255,255,0.50); +$white-t3: rgba(255,255,255,0.75); $gray: rgb(127,127,127); $gray-l1: tint($gray,20%); diff --git a/cms/templates/alerts.html b/cms/templates/alerts.html index 3682cb3200..9b5ba70411 100644 --- a/cms/templates/alerts.html +++ b/cms/templates/alerts.html @@ -7,16 +7,46 @@ // notifications - demo $(document).ready(function() { - $('.test-notification').click(function(e) { + $('.hide-notification').click(function(e) { (e).preventDefault(); - $('.wrapper-notification').removeClass('is-shown'); - $(this.hash).toggleClass('is-shown'); + $('.wrapper-notification').removeClass('is-hiding is-shown'); + $(this.hash).addClass('is-hiding'); }); - $('.test-alert').click(function(e) { + $('.show-notification').click(function(e) { + (e).preventDefault(); + $('.wrapper-notification').removeClass('is-shown is-hiding'); + $(this.hash).addClass('is-shown'); + }); + + $('.show-notification-fleeting').click(function(e) { + (e).preventDefault(); + $('.wrapper-notification').removeClass('is-fleeting'); + $(this.hash).addClass('is-fleeting'); + }); + + $('.hide-alert').click(function(e) { + (e).preventDefault(); + $('.wrapper-alert').removeClass('is-hiding'); + $(this.hash).addClass('is-hiding'); + }); + + $('.show-alert').click(function(e) { (e).preventDefault(); $('.wrapper-alert').removeClass('is-shown'); - $(this.hash).toggleClass('is-shown'); + $(this.hash).addClass('is-shown'); + }); + + $('.hide-prompt').click(function(e) { + (e).preventDefault(); + $('.wrapper-prompt').removeClass('is-hiding is-shown'); + $(this.hash).addClass('is-hiding'); + }); + + $('.show-prompt').click(function(e) { + (e).preventDefault(); + $('.wrapper-prompt').removeClass('is-shown is-hiding'); + $(this.hash).addClass('is-shown'); }); }); @@ -243,16 +273,16 @@

    Note: alerts will probably never been shown based on click or page action and will primarily be loaded along with a pageload and initial display

    @@ -267,12 +297,46 @@

    Different Static Examples of Notifications

    + + +
    +
    +

    Prompts

    + presents a user with a choice, based on their previous interaction, that must be decided before they can proceed +
    + +

    In Studio, prompts are dialogs that are presented above all other page components and present a user with a choice, based on their previous interaction, that must be decided before they can proceed (or return to the previous interaction step).

    + +

    Different Static Examples of Notifications

    + +
    @@ -368,7 +432,7 @@
    -
    +
    ✓ @@ -394,4 +458,25 @@
    + + +
    +
    +
    +

    Are You Sure You Want to Do That?

    +
    + + +
    +
    \ No newline at end of file From 2ce4ecbc8481964e18d4cba475ba37b84f05a9db Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Fri, 1 Mar 2013 15:48:15 -0500 Subject: [PATCH 13/48] local merge with master - finished --- cms/templates/overview.html | 288 ++++++++++++++++-------------------- 1 file changed, 128 insertions(+), 160 deletions(-) diff --git a/cms/templates/overview.html b/cms/templates/overview.html index ec35e4864f..27fd208e0d 100644 --- a/cms/templates/overview.html +++ b/cms/templates/overview.html @@ -13,144 +13,145 @@ <%namespace name="units" file="widgets/units.html" /> <%block name="jsextra"> - - - - - - - - + + + + + + + + - + + <%block name="header_extras"> - + + + + - - - - +
      +
    1. + + New Unit + +
      2. +
    + + <%block name="content"> -
    -
    -

    Section Release Date

    -
    - - -
    -

    On the date set above, this section – – will be released to students. Any units marked private will only be visible to admins.

    +
    +
    +

    Section Release Date

    +
    + + +
    +

    On the date set above, this section – – will be released to students. Any units marked private will only be visible to admins.

    +
    + SaveCancel
    - SaveCancel
    -
    -
    -
    -
    - Course Content -

    Course Outline

    -
    +
    +
    +
    + Course Content +

    Course Outline

    +
    - -
    -
    + +
    +
    + +
    +
    +
    + % for section in sections: +
    +
    + -
    -
    -
    - % for section in sections: -
    -
    -

    ${section.display_name} @@ -211,44 +212,11 @@ $(document).ready(function(){ % endfor -

    -
    -
    -
    - - New Subsection -
    -
      - % for subsection in section.get_children(): - - % endfor -
    -
    -
    - % endfor -
    +
    + % endfor +
    +
    -
    -
    - +
    From bc0b1b09580a6b154ecc48ae1ba852cf0b41ff7e Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Sat, 2 Mar 2013 22:06:55 -0500 Subject: [PATCH 14/48] studio - alerts: cleaned up animation standards and made mixins to reference as well as got prompt UI pattern behavior working --- cms/static/sass/_alerts.scss | 30 ++++++++--- cms/static/sass/_keyframes.scss | 95 ++++++++++++++++++++++++++++++--- 2 files changed, 109 insertions(+), 16 deletions(-) diff --git a/cms/static/sass/_alerts.scss b/cms/static/sass/_alerts.scss index 9a2ebf1854..a152db636a 100644 --- a/cms/static/sass/_alerts.scss +++ b/cms/static/sass/_alerts.scss @@ -9,7 +9,7 @@ width: 100%; height: 100%; text-align: center; - z-index: 100; + z-index: 10000; &:before { content: ''; @@ -372,7 +372,8 @@ &.saving { .icon-saving { - @include animation(rotateClockwise 3.0s forwards linear infinite); + @include anim-rotateClockwise(3s, linear, infinite); + width: 22px; } @@ -661,13 +662,26 @@ .js { .wrapper-prompt { - @include transition (opacity 0.25s ease-in-out); display: none; - opacity: 0; + + .prompt { + @include anim-bounceIn(0.5s); + opacity: 0.1; + } &.is-shown { display: block; - opacity: 1.0; + + .prompt { + opacity: 1.0; + } + } + + &.is-hiding { + + .prompt { + @include anim-bounceOut(0.5s); + } } } @@ -684,15 +698,15 @@ // varying animations &.is-shown { - @include animation(notificationsSlideUp 1s forwards ease-in-out 1); + @include anim-notificationsSlideUp(1s); } &.is-hiding { - @include animation(notificationsSlideDown 1s forwards ease-in-out 1); + @include anim-notificationsSlideDown(1s); } &.is-fleeting { - @include animation(notificationsSlideUpDown 2s forwards ease-in-out 1); + @include anim-notificationsSlideUpDown(2s); } } } diff --git a/cms/static/sass/_keyframes.scss b/cms/static/sass/_keyframes.scss index 372fb9e0ca..817dc27132 100644 --- a/cms/static/sass/_keyframes.scss +++ b/cms/static/sass/_keyframes.scss @@ -17,6 +17,14 @@ @-o-keyframes rotateClockwise { @include rotateClockwise(); } @keyframes rotateClockwise { @include rotateClockwise();} +@mixin anim-rotateClockwise($duration, $timing: ease-in-out, $count: 1) { + @include animation-name(rotateClockwise); + @include animation-duration($duration); + @include animation-timing-function($timing); + @include animation-fill-mode(both); + @include animation-iteration-count($count); +} + // ==================== // notifications slide up @@ -39,6 +47,14 @@ @-o-keyframes notificationsSlideUp { @include notificationsSlideUp(); } @keyframes notificationsSlideUp { @include notificationsSlideUp();} +@mixin anim-notificationsSlideUp($duration, $timing: ease-in-out, $count: 1) { + @include animation-name(notificationsSlideUp); + @include animation-duration($duration); + @include animation-timing-function($timing); + @include animation-fill-mode(both); + @include animation-iteration-count($count); +} + // ==================== // notifications slide down @@ -61,6 +77,14 @@ @-o-keyframes notificationsSlideDown { @include notificationsSlideDown(); } @keyframes notificationsSlideDown { @include notificationsSlideDown();} +@mixin anim-notificationsSlideDown($duration, $timing: ease-in-out, $count: 1) { + @include animation-name(notificationsSlideDown); + @include animation-duration($duration); + @include animation-timing-function($timing); + @include animation-fill-mode(both); + @include animation-iteration-count($count); +} + // ==================== // notifications slide up then down @@ -83,13 +107,21 @@ @-o-keyframes notificationsSlideUpDown { @include notificationsSlideUpDown(); } @keyframes notificationsSlideUpDown { @include notificationsSlideUpDown();} +@mixin anim-notificationsSlideUpDown($duration, $timing: ease-in-out, $count: 1) { + @include animation-name(notificationsSlideUpDown); + @include animation-duration($duration); + @include animation-timing-function($timing); + @include animation-fill-mode(both); + @include animation-iteration-count($count); +} + // ==================== // bounce in -@mixin bounce-in { +@mixin bounceIn { 0% { opacity: 0; - @include transform(scale(.3)); + @include transform(scale(0.3)); } 50% { @@ -102,14 +134,61 @@ } } -@-moz-keyframes bounce-in { @include bounce-in(); } -@-webkit-keyframes bounce-in { @include bounce-in(); } -@-o-keyframes bounce-in { @include bounce-in(); } -@keyframes bounce-in { @include bounce-in();} +@-moz-keyframes bounceIn { @include bounceIn(); } +@-webkit-keyframes bounceIn { @include bounceIn(); } +@-o-keyframes bounceIn { @include bounceIn(); } +@keyframes bounceIn { @include bounceIn();} -@mixin bounce-in-animation($duration, $timing: ease-in-out) { - @include animation-name(bounce-in); +@mixin anim-bounceIn($duration, $timing: ease-in-out, $count: 1) { + @include animation-name(bounceIn); @include animation-duration($duration); @include animation-timing-function($timing); @include animation-fill-mode(both); + @include animation-iteration-count($count); +} + +// ==================== + +// bounce in +@mixin bounceOut { + 0% { + opacity: 0; + @include transform(scale(0.3)); + } + + 50% { + opacity: 1; + @include transform(scale(1.05)); + } + + 100% { + @include transform(scale(1)); + } + + 0% { + @include transform(scale(1)); + } + + 50% { + opacity: 1; + @include transform(scale(1.05)); + } + + 100% { + opacity: 0; + @include transform(scale(0.3)); + } +} + +@-moz-keyframes bounceOut { @include bounceOut(); } +@-webkit-keyframes bounceOut { @include bounceOut(); } +@-o-keyframes bounceOut { @include bounceOut(); } +@keyframes bounceOut { @include bounceOut();} + +@mixin anim-bounceOut($duration, $timing: ease-in-out, $count: 1) { + @include animation-name(bounceOut); + @include animation-duration($duration); + @include animation-timing-function($timing); + @include animation-fill-mode(both); + @include animation-iteration-count($count); } \ No newline at end of file From 72c58cd454e65f282d0b7d93f0b454f73fdafdc8 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Sun, 3 Mar 2013 20:44:48 -0500 Subject: [PATCH 15/48] studio - alerts: refactored styles for common content types across UI, got prompts set up and styled, and refactored base template for future prompt/notification/alert use --- cms/static/js/base.js | 12 +- cms/static/sass/_alerts.scss | 296 +++++++++++++++----------------- cms/static/sass/_base.scss | 7 + cms/static/sass/_keyframes.scss | 32 ++-- cms/static/sass/_variables.scss | 2 + cms/templates/alerts.html | 295 ++++++++++++++++++------------- cms/templates/base.html | 39 +++-- 7 files changed, 375 insertions(+), 308 deletions(-) diff --git a/cms/static/js/base.js b/cms/static/js/base.js index 9af785045f..a6e8190e17 100644 --- a/cms/static/js/base.js +++ b/cms/static/js/base.js @@ -62,10 +62,16 @@ $(document).ready(function () { $(this).closest('.wrapper-notification').removeClass('is-shown').addClass('is-hiding'); }); - // prompt close - $('.prompt .action-cancel').click(function(e) { + // prompt pop + $('.action-prompt').click(function(e){ (e).preventDefault(); - $(this).closest('.wrapper-prompt').removeClass('is-shown').addClass('is-hiding'); + $body.toggleClass('prompt-is-shown'); + }); + + // prompt close + $('.prompt .action-cancel, .prompt .action-proceed').click(function(e) { + (e).preventDefault(); + $body.removeClass('prompt-is-shown'); }); // nav - dropdown related diff --git a/cms/static/sass/_alerts.scss b/cms/static/sass/_alerts.scss index a152db636a..c507034284 100644 --- a/cms/static/sass/_alerts.scss +++ b/cms/static/sass/_alerts.scss @@ -1,11 +1,35 @@ // studio alerts and notifications // ==================== +// shared +.wrapper-notification, .wrapper-alert, .prompt { + @include box-sizing(border-box); + background: $gray-d3; + border-top: 4px solid $gray-d4; + + .copy { + @include font-size(13); + color: $gray-l2; + + .title { + color: $white; + } + + .nav-actions { + + .action-primary { + color: $gray-d4; + } + } + } +} + // prompts .wrapper-prompt { + @include transition(all 0.05s ease-in-out); position: fixed; top: 0; - background: $black-t1; + background: $black-t0; width: 100%; height: 100%; text-align: center; @@ -20,20 +44,80 @@ } .prompt { - @include border-radius(3px); - @include box-sizing(border-box); - @include box-shadow(0 0 4px $shadow-d1); + @include border-radius(($baseline/5)); + @include box-shadow(0 0 3px $shadow-d1); display: inline-block; vertical-align: middle; - width: $baseline*15; - padding: $baseline; - background: $white; + width: $baseline*17.5; + border: 4px solid $black; + text-align: left; + + .copy { + border-top: 4px solid $blue; + padding: $baseline; + } .nav-actions { + @include box-shadow(inset 0 1px 2px $shadow-d1); + border-top: 1px solid $black-t1; + padding: ($baseline*0.75) $baseline; + background: $gray-d4; .nav-item { + display: inline-block; + margin-right: ($baseline*0.75); + &:last-child { + margin-right: 0; + } } + + .action-primary { + @include blue-button(); + @include font-size(13); + border-color: $blue-d2; + font-weight: 600; + } + + .action-secondary { + @include font-size(13); + } + } + } + + // types of prompts - error + .prompt.error { + + .icon-error { + color: $red-l1; + } + + .copy { + border-top-color: $red-l1; + } + } + + // types of prompts - confirmation + .prompt.confirmation { + + .icon-error { + color: $green; + } + + .copy { + border-top-color: $green; + } + } + + // types of prompts - error + .prompt.warning { + + .icon-warning { + color: $orange; + } + + .copy { + border-top-color: $orange; } } } @@ -41,15 +125,12 @@ // notifications .wrapper-notification { @include clearfix(); - @include box-sizing(border-box); @include box-shadow(0 -1px 3px $shadow); position: fixed; bottom: 0; z-index: 1000; width: 100%; - border-top: 4px solid $gray-l1; padding: ($baseline*0.75) ($baseline*2); - background: $gray-d3; &.wrapper-notification-warning { border-top-color: $orange; @@ -67,7 +148,7 @@ } } - &.wrapper-cation-error { + &.wrapper-notification-error { border-top-color: $red-l1; .icon-error { @@ -208,29 +289,6 @@ } } - // with cancel - .action-notification-close { - @include border-top-radius(3px); - position: absolute; - top: -34px; - right: $baseline; - padding: ($baseline/5) ($baseline/2.5) 0 ($baseline/2.5); - background: $gray-l1; - text-align: center; - - .label { - @include text-sr(); - } - - .icon { - @include font-size(14); - color: $white; - width: auto; - margin: 0; - padding: 2px; - } - } - // with actions &.has-actions { @@ -272,108 +330,17 @@ } } - // notification types - &.warning { - - .action-notification-close { - background: $orange; - - &:hover { - background: $orange-s2; - } - } - - .action-primary { - @include orange-button(); - @include font-size(13); - border-color: $orange-d2; - } - - a { - color: $orange; - - &:hover { - color: $orange-s2; - } - } - } - - &.error { - - .action-notification-close { - background: $red-l1; - - &:hover { - background: $red; - } - } - - .action-primary { - @include red-button(); - @include font-size(13); - border-color: $red-d2; - } - - a { - color: $red-l1; - - &:hover { - color: $red; - } - } - } - &.confirmation { .copy { margin-top: ($baseline/5); } - - .action-notification-close { - background: $green; - - &:hover { - background: $green-s2; - } - } - - .action-primary { - @include green-button(); - @include font-size(13); - border-color: $green-d2; - } - - a { - color: $green; - - &:hover { - color: $green-s2; - } - } - } - - &.announcement { - - .action-notification-close { - background: $blue; - - &:hover { - background: $blue-s1; - } - } - - .action-primary { - @include blue-button(); - @include font-size(13); - border-color: $blue-d2; - } } &.saving { .icon-saving { @include anim-rotateClockwise(3s, linear, infinite); - width: 22px; } @@ -559,12 +526,12 @@ // with cancel .action-alert-close { - @include border-bottom-radius(3px); + @include border-bottom-radius(($baseline/5)); position: absolute; top: -($baseline/10); right: $baseline; padding: ($baseline/4) ($baseline/2) 0 ($baseline/2); - background: $gray-d1; + background: $gray-d4; text-align: center; .label { @@ -580,16 +547,20 @@ } &:hover { - background: $gray-l1; + background: $gray-d1; } } +} - // alert types +.alert, .notification, .prompt { + + // types - warning &.warning { - - .action-primary { + + .nav-actions .action-primary { @include orange-button(); border-color: $orange-d2; + color: $gray-d4; } a { @@ -601,9 +572,10 @@ } } + // types - error &.error { - .action-primary { + .nav-actions .action-primary { @include red-button(); border-color: $red-d2; } @@ -617,9 +589,27 @@ } } + // types - announcement + &.announcement { + + .nav-actions .action-primary { + @include blue-button(); + border-color: $blue-d2; + } + + a { + color: $blue; + + &:hover { + color: $blue-s2; + } + } + } + + // types - confirmation &.confirmation { - .action-primary { + .nav-actions .action-primary { @include green-button(); border-color: $green-d2; } @@ -633,17 +623,10 @@ } } - &.announcement { - - .action-primary { - @include blue-button(); - border-color: $blue-d2; - } - } - + // types - step required &.step-required { - .action-primary { + .nav-actions .action-primary { border-color: $pink-d2; @include pink-button(); } @@ -661,28 +644,33 @@ // js enabled .js { + // prompt set-up .wrapper-prompt { - display: none; + visibility: hidden; + pointer-events: none; .prompt { - @include anim-bounceIn(0.5s); - opacity: 0.1; + opacity: 0; + } + } + + // prompt showing + &.prompt-is-shown { + + .wrapper-view { + -webkit-filter: blur(2px) grayscale(25%); + filter: blur(2px) grayscale(25%); } - &.is-shown { - display: block; + .wrapper-prompt.is-shown { + visibility: visible; + pointer-events: auto; .prompt { + @include anim-bounceIn(0.5s); opacity: 1.0; } } - - &.is-hiding { - - .prompt { - @include anim-bounceOut(0.5s); - } - } } .wrapper-alert { diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index d5a8adc6cb..5fd05d27a6 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -103,6 +103,13 @@ p, ul, ol, dl { // ==================== +// layout - basic +.wrapper-view { + +} + +// ==================== + // layout - basic page header .wrapper-mast { margin: 0; diff --git a/cms/static/sass/_keyframes.scss b/cms/static/sass/_keyframes.scss index 817dc27132..a756f66b2e 100644 --- a/cms/static/sass/_keyframes.scss +++ b/cms/static/sass/_keyframes.scss @@ -17,12 +17,14 @@ @-o-keyframes rotateClockwise { @include rotateClockwise(); } @keyframes rotateClockwise { @include rotateClockwise();} -@mixin anim-rotateClockwise($duration, $timing: ease-in-out, $count: 1) { +@mixin anim-rotateClockwise($duration, $timing: ease-in-out, $count: 1, $delay: 0) { @include animation-name(rotateClockwise); @include animation-duration($duration); + @include animation-delay($delay); @include animation-timing-function($timing); - @include animation-fill-mode(both); @include animation-iteration-count($count); + @include animation-fill-mode(both); + } // ==================== @@ -47,12 +49,14 @@ @-o-keyframes notificationsSlideUp { @include notificationsSlideUp(); } @keyframes notificationsSlideUp { @include notificationsSlideUp();} -@mixin anim-notificationsSlideUp($duration, $timing: ease-in-out, $count: 1) { +@mixin anim-notificationsSlideUp($duration, $timing: ease-in-out, $count: 1, $delay: 0) { @include animation-name(notificationsSlideUp); @include animation-duration($duration); + @include animation-delay($delay); @include animation-timing-function($timing); - @include animation-fill-mode(both); @include animation-iteration-count($count); + @include animation-fill-mode(both); + } // ==================== @@ -77,12 +81,13 @@ @-o-keyframes notificationsSlideDown { @include notificationsSlideDown(); } @keyframes notificationsSlideDown { @include notificationsSlideDown();} -@mixin anim-notificationsSlideDown($duration, $timing: ease-in-out, $count: 1) { +@mixin anim-notificationsSlideDown($duration, $timing: ease-in-out, $count: 1, $delay: 0) { @include animation-name(notificationsSlideDown); @include animation-duration($duration); + @include animation-delay($delay); @include animation-timing-function($timing); - @include animation-fill-mode(both); @include animation-iteration-count($count); + @include animation-fill-mode(both); } // ==================== @@ -107,12 +112,13 @@ @-o-keyframes notificationsSlideUpDown { @include notificationsSlideUpDown(); } @keyframes notificationsSlideUpDown { @include notificationsSlideUpDown();} -@mixin anim-notificationsSlideUpDown($duration, $timing: ease-in-out, $count: 1) { +@mixin anim-notificationsSlideUpDown($duration, $timing: ease-in-out, $count: 1, $delay: 0) { @include animation-name(notificationsSlideUpDown); @include animation-duration($duration); + @include animation-delay($delay); @include animation-timing-function($timing); - @include animation-fill-mode(both); @include animation-iteration-count($count); + @include animation-fill-mode(both); } // ==================== @@ -139,12 +145,13 @@ @-o-keyframes bounceIn { @include bounceIn(); } @keyframes bounceIn { @include bounceIn();} -@mixin anim-bounceIn($duration, $timing: ease-in-out, $count: 1) { +@mixin anim-bounceIn($duration, $timing: ease-in-out, $count: 1, $delay: 0) { @include animation-name(bounceIn); @include animation-duration($duration); + @include animation-delay($delay); @include animation-timing-function($timing); - @include animation-fill-mode(both); @include animation-iteration-count($count); + @include animation-fill-mode(both); } // ==================== @@ -185,10 +192,11 @@ @-o-keyframes bounceOut { @include bounceOut(); } @keyframes bounceOut { @include bounceOut();} -@mixin anim-bounceOut($duration, $timing: ease-in-out, $count: 1) { +@mixin anim-bounceOut($duration, $timing: ease-in-out, $count: 1, $delay: 0) { @include animation-name(bounceOut); @include animation-duration($duration); + @include animation-delay($delay); @include animation-timing-function($timing); - @include animation-fill-mode(both); @include animation-iteration-count($count); + @include animation-fill-mode(both); } \ No newline at end of file diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index 35f39fcd3a..7998d0b199 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -16,10 +16,12 @@ $error-red: rgb(253, 87, 87); // colors - new for re-org $black: rgb(0,0,0); +$black-t0: rgba(0,0,0,0.125); $black-t1: rgba(0,0,0,0.25); $black-t2: rgba(0,0,0,0.50); $black-t3: rgba(0,0,0,0.75); $white: rgb(255,255,255); +$white-t0: rgba(255,255,255,0.125); $white-t1: rgba(255,255,255,0.25); $white-t2: rgba(255,255,255,0.50); $white-t3: rgba(255,255,255,0.75); diff --git a/cms/templates/alerts.html b/cms/templates/alerts.html index 9b5ba70411..12c605d863 100644 --- a/cms/templates/alerts.html +++ b/cms/templates/alerts.html @@ -37,15 +37,15 @@ $(this.hash).addClass('is-shown'); }); - $('.hide-prompt').click(function(e) { - (e).preventDefault(); - $('.wrapper-prompt').removeClass('is-hiding is-shown'); - $(this.hash).addClass('is-hiding'); + $('.hide-prompt').click(function(e){ + (e).preventDefault(); + $body.removeClass('prompt-is-shown'); }); $('.show-prompt').click(function(e) { - (e).preventDefault(); - $('.wrapper-prompt').removeClass('is-shown is-hiding'); + (e).preventDefault(); + $body.toggleClass('prompt-is-shown'); + $('.wrapper-prompt').removeClass('is-shown'); $(this.hash).addClass('is-shown'); }); }); @@ -53,6 +53,122 @@ <%block name="content"> +
    +
    +

    Section Release Date

    +
    + + +
    +

    On the date set above, this section – – will be released to students. Any units marked private will only be visible to admins.

    +
    +
    + SaveCancel +
    +
    + +
    +
    +
    + UX Design +

    Alerts & Notifications

    +
    +
    +
    + +
    +
    +
    +
    +
    +

    Alerts

    + persistant, static messages to the user +
    + +

    In Studio, alerts are 1) general warnings/notes (e.g. drafts, published content, next steps) about the current view a user is interacting with or 2) notes about the status (e.g. saved confirmations, errors, next system steps) of any previous state that need to communicated to the user when arriving at the current view.

    + +

    Different Static Examples of Alerts

    +

    Note: alerts will probably never been shown based on click or page action and will primarily be loaded along with a pageload and initial display

    + + +
    + +
    +
    +

    Notifications

    + contextual, feedback-based, and temporal messages to the user +
    + +

    In Studio, notifications are meant to inform the user of 1) any system status (e.g. saving, processing/validating) occurring based on any action they have taken or 2) any decisions (e.g. saving/discarding) a user must make to confirm.

    + +

    Different Static Examples of Notifications

    + + +
    + +
    +
    +

    Prompts

    + presents a user with a choice, based on their previous interaction, that must be decided before they can proceed +
    + +

    In Studio, prompts are dialogs that are presented above all other page components and present a user with a choice, based on their previous interaction, that must be decided before they can proceed (or return to the previous interaction step).

    + +

    Different Static Examples of Prompts

    + + +
    +
    +
    +
    + + +<%block name="view_alerts">
    @@ -234,115 +350,9 @@
    + -
    -
    -

    Section Release Date

    -
    - - -
    -

    On the date set above, this section – – will be released to students. Any units marked private will only be visible to admins.

    -
    -
    - SaveCancel -
    -
    - -
    -
    -
    - UX Design -

    Alerts & Notifications

    -
    -
    -
    - -
    -
    -
    -
    -
    -

    Alerts

    - persistant, static messages to the user -
    - -

    In Studio, alerts are 1) general warnings/notes (e.g. drafts, published content, next steps) about the current view a user is interacting with or 2) notes about the status (e.g. saved confirmations, errors, next system steps) of any previous state that need to communicated to the user when arriving at the current view.

    - -

    Different Static Examples of Alerts

    -

    Note: alerts will probably never been shown based on click or page action and will primarily be loaded along with a pageload and initial display

    - - -
    - -
    -
    -

    Notifications

    - contextual, feedback-based, and temporal messages to the user -
    - -

    In Studio, notifications are meant to inform the user of 1) any system status (e.g. saving, processing/validating) occurring based on any action they have taken or 2) any decisions (e.g. saving/discarding) a user must make to confirm.

    - -

    Different Static Examples of Notifications

    - - -
    - -
    -
    -

    Prompts

    - presents a user with a choice, based on their previous interaction, that must be decided before they can proceed -
    - -

    In Studio, prompts are dialogs that are presented above all other page components and present a user with a choice, based on their previous interaction, that must be decided before they can proceed (or return to the previous interaction step).

    - -

    Different Static Examples of Notifications

    - - -
    -
    -
    -
    - +<%block name="view_notifications">
    @@ -388,11 +398,6 @@ - - - ␡ - close notification -
    @@ -458,22 +463,66 @@
    + - +<%block name="view_prompts"> +
    -

    Are You Sure You Want to Do That?

    +

    Delete "Introduction & Overview"?

    +

    Deleting a section cannot be undone and its contents cannot be recovered.

    +
    +
    + + +
    +
    +
    +

    Use Advanced Problem Editor?

    +

    If you proceed, you cannot edit this problem using the simple problem editor.

    +
    + + +
    +
    + + +
    +
    +
    +

    There Were Errors in Your Submission

    +

    Please correct the errors noted on the page and try again.

    +
    + + diff --git a/cms/templates/base.html b/cms/templates/base.html index 498897bd11..387b45a0d1 100644 --- a/cms/templates/base.html +++ b/cms/templates/base.html @@ -6,12 +6,12 @@ - <%block name="title"></%block> | - % if context_course: - <% ctx_loc = context_course.location %> - ${context_course.display_name} | - % endif - edX Studio + <%block name="title"></%block> | + % if context_course: + <% ctx_loc = context_course.location %> + ${context_course.display_name} | + % endif + edX Studio @@ -22,14 +22,13 @@ - + <%block name="header_extras"> - <%include file="widgets/header.html" /> - <%include file="courseware_vendor_js.html"/> + <%include file="courseware_vendor_js.html"/> @@ -48,15 +47,23 @@ - <%block name="content"> - <%include file="widgets/footer.html" /> + +
    + <%include file="widgets/header.html" /> + + <%block name="view_alerts"> + + <%block name="content"> + <%include file="widgets/footer.html" /> + <%block name="view_notifications"> +
    + + <%block name="view_prompts"> <%block name="jsextra"> - - - + \ No newline at end of file From eb1658730a6d258286e3d2134941015de91d8e2f Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Mon, 4 Mar 2013 12:30:04 -0500 Subject: [PATCH 16/48] studio - alerts: revised border styling on all elements and button/color inheritance --- cms/static/sass/_alerts.scss | 300 +++++++++++++++-------------------- 1 file changed, 126 insertions(+), 174 deletions(-) diff --git a/cms/static/sass/_alerts.scss b/cms/static/sass/_alerts.scss index c507034284..a6ce1f9830 100644 --- a/cms/static/sass/_alerts.scss +++ b/cms/static/sass/_alerts.scss @@ -24,6 +24,112 @@ } } +.alert, .notification, .prompt { + + // types - confirm + &.confirm { + + .nav-actions .action-primary { + @include blue-button(); + border-color: $blue-d2; + } + + a { + color: $blue; + + &:hover { + color: $blue-s2; + } + } + } + + // types - warning + &.warning { + + .nav-actions .action-primary { + @include orange-button(); + border-color: $orange-d2; + color: $gray-d4; + } + + a { + color: $orange; + + &:hover { + color: $orange-s2; + } + } + } + + // types - error + &.error { + + .nav-actions .action-primary { + @include red-button(); + border-color: $red-d2; + } + + a { + color: $red-l1; + + &:hover { + color: $red; + } + } + } + + // types - announcement + &.announcement { + + .nav-actions .action-primary { + @include blue-button(); + border-color: $blue-d2; + } + + a { + color: $blue; + + &:hover { + color: $blue-s2; + } + } + } + + // types - confirmation + &.confirmation { + + .nav-actions .action-primary { + @include green-button(); + border-color: $green-d2; + } + + a { + color: $green; + + &:hover { + color: $green-s2; + } + } + } + + // types - step required + &.step-required { + + .nav-actions .action-primary { + border-color: $pink-d2; + @include pink-button(); + } + + a { + color: $pink; + + &:hover { + color: $pink-s1; + } + } + } +} + // prompts .wrapper-prompt { @include transition(all 0.05s ease-in-out); @@ -73,9 +179,7 @@ } .action-primary { - @include blue-button(); @include font-size(13); - border-color: $blue-d2; font-weight: 600; } @@ -125,73 +229,48 @@ // notifications .wrapper-notification { @include clearfix(); - @include box-shadow(0 -1px 3px $shadow); + @include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $blue); position: fixed; bottom: 0; z-index: 1000; width: 100%; - padding: ($baseline*0.75) ($baseline*2); + border-top: 4px solid $black; + padding: $baseline ($baseline*2); &.wrapper-notification-warning { - border-top-color: $orange; + @include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $orange); .icon-warning { color: $orange; } - - &:hover { - border-top-color: $orange-s2; - - .icon-warning { - color: $orange-s2; - } - } } &.wrapper-notification-error { - border-top-color: $red-l1; + @include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $red-l1); .icon-error { color: $red-l1; } - - &:hover { - border-top-color: $red; - - .icon-error { - color: $red; - } - } } &.wrapper-notification-confirmation { - border-top-color: $green; + @include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $green); .icon-confirmation { color: $green; } - - &:hover { - border-top-color: $green-s1; - - .icon-confirmation { - color: $green-s1; - } - } } &.wrapper-notification-saving { - border-top-color: $pink; - - &:hover { - border-top-color: $pink-s1; - } + @include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $pink); } // shorter/status notifications &.wrapper-notification-status { + @include border-top-radius(3px); width: ($baseline*8); right: ($baseline); + border: 4px solid $black; padding: ($baseline/2) $baseline; .notification { @@ -222,8 +301,10 @@ // help notifications &.wrapper-notification-help { + @include border-top-radius(3px); width: ($baseline*14); right: ($baseline); + border: 4px solid $black; padding: ($baseline/2) $baseline; .notification { @@ -304,7 +385,7 @@ .nav-actions { width: flex-grid(4, 12); float: right; - margin-top: ($baseline/2); + margin-top: ($baseline/4); text-align: right; .nav-item { @@ -355,95 +436,55 @@ // alerts .wrapper-alert { @include box-sizing(border-box); - @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1); + @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue); position: relative; top: -($baseline*1.5); z-index: 100; overflow: hidden; width: 100%; - border-bottom: 4px solid $gray-l1; + border-bottom: 2px solid $black; border-top: 1px solid $black; - padding: $baseline ($baseline*2); + padding: $baseline ($baseline*2) ($baseline*1.5) ($baseline*2); background: $gray-d3; &.wrapper-alert-warning { - border-bottom-color: $orange; + @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $orange); .icon-warning { color: $orange; } - - &:hover { - border-bottom-color: $orange-s2; - - .icon-warning { - color: $orange-s2; - } - } } &.wrapper-alert-error { - border-bottom-color: $red-l1; + @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $red-l1); .icon-error { color: $red-l1; } - - &:hover { - border-bottom-color: $red; - - .icon-error { - color: $red; - } - } } &.wrapper-alert-confirmation { - border-bottom-color: $green; + @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $green); .icon-confirmation { color: $green; } - - &:hover { - border-bottom-color: $green-s2; - - .icon-confirmation { - color: $green-s2; - } - } } &.wrapper-alert-announcement { - border-bottom-color: $blue; + @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue); .icon-announcement { color: $blue; } - - &:hover { - border-bottom-color: $blue-s2; - - .icon-announcement { - color: $blue-s2; - } - } } &.wrapper-alert-step-required { - border-bottom-color: $pink; + @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $pink); .icon-step-required { color: $pink; } - - &:hover { - border-bottom-color: $pink-s2; - - .icon-announcement { - color: $pink-s2; - } - } } } @@ -552,95 +593,6 @@ } } -.alert, .notification, .prompt { - - // types - warning - &.warning { - - .nav-actions .action-primary { - @include orange-button(); - border-color: $orange-d2; - color: $gray-d4; - } - - a { - color: $orange; - - &:hover { - color: $orange-s2; - } - } - } - - // types - error - &.error { - - .nav-actions .action-primary { - @include red-button(); - border-color: $red-d2; - } - - a { - color: $red-l1; - - &:hover { - color: $red; - } - } - } - - // types - announcement - &.announcement { - - .nav-actions .action-primary { - @include blue-button(); - border-color: $blue-d2; - } - - a { - color: $blue; - - &:hover { - color: $blue-s2; - } - } - } - - // types - confirmation - &.confirmation { - - .nav-actions .action-primary { - @include green-button(); - border-color: $green-d2; - } - - a { - color: $green; - - &:hover { - color: $green-s2; - } - } - } - - // types - step required - &.step-required { - - .nav-actions .action-primary { - border-color: $pink-d2; - @include pink-button(); - } - - a { - color: $pink; - - &:hover { - color: $pink-s1; - } - } - } -} - // js enabled .js { From ec90d349e20ed76b2b53e4281aeb5e7ad70727fc Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Mon, 4 Mar 2013 12:47:07 -0500 Subject: [PATCH 17/48] studio - alerts: revisited advanced editor notification UI to marry new styles/behavior - WIP --- cms/static/js/base.js | 2 +- cms/static/js/views/settings/advanced_view.js | 4 ++-- cms/templates/settings_advanced.html | 23 +++++++++++-------- 3 files changed, 17 insertions(+), 12 deletions(-) diff --git a/cms/static/js/base.js b/cms/static/js/base.js index a6e8190e17..3cb1829ffb 100644 --- a/cms/static/js/base.js +++ b/cms/static/js/base.js @@ -57,7 +57,7 @@ $(document).ready(function () { }); // alert and notifications - manual & action-based close - $('.action-notification-close, .notification.has-actions .nav-actions a').click(function(e) { + $('.action-notification-close').click(function(e) { (e).preventDefault(); $(this).closest('.wrapper-notification').removeClass('is-shown').addClass('is-hiding'); }); diff --git a/cms/static/js/views/settings/advanced_view.js b/cms/static/js/views/settings/advanced_view.js index d20a21f7e7..dc9adb30ed 100644 --- a/cms/static/js/views/settings/advanced_view.js +++ b/cms/static/js/views/settings/advanced_view.js @@ -141,13 +141,13 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({ event.keyCode === 8 || event.keyCode === 46)) return; } this.$el.find(".message-status").removeClass("is-shown"); - $('.wrapper-notification').addClass('is-shown'); + $('.wrapper-notification').removeClass('is-hiding').addClass('is-shown'); this.buttonsVisible = true; } }, hideSaveCancelButtons: function() { - $('.wrapper-notification').removeClass('is-shown'); + $('.wrapper-notification').removeClass('is-shown').addClass('is-hiding'); this.buttonsVisible = false; }, diff --git a/cms/templates/settings_advanced.html b/cms/templates/settings_advanced.html index ceee406398..f04015a4a9 100644 --- a/cms/templates/settings_advanced.html +++ b/cms/templates/settings_advanced.html @@ -105,20 +105,25 @@ editor.render();
    -
    +
    + ⚠ +
    - ⚠ - -

    Note: Your changes will not take effect until you save your - progress. Take care with key and value formatting, as validation is not implemented.

    +

    You've Made Some Changes

    +

    Your changes will not take effect until you save your progress. Take care with key and value formatting, as validation is not implemented.

    -
    +
    +
    \ No newline at end of file From cbdf9ea25bc9ffd43ffd6213a0e20cdfb6670364 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Tue, 5 Mar 2013 09:57:14 -0500 Subject: [PATCH 18/48] studio - alerts: proofing older, but still needed in page alerts (unit drafts) styling --- cms/static/sass/_alerts.scss | 117 +++++++++++++++++++---------------- cms/templates/unit.html | 4 +- 2 files changed, 64 insertions(+), 57 deletions(-) diff --git a/cms/static/sass/_alerts.scss b/cms/static/sass/_alerts.scss index a6ce1f9830..395519f867 100644 --- a/cms/static/sass/_alerts.scss +++ b/cms/static/sass/_alerts.scss @@ -271,6 +271,7 @@ width: ($baseline*8); right: ($baseline); border: 4px solid $black; + border-bottom: none; padding: ($baseline/2) $baseline; .notification { @@ -305,6 +306,7 @@ width: ($baseline*14); right: ($baseline); border: 4px solid $black; + border-bottom: none; padding: ($baseline/2) $baseline; .notification { @@ -690,69 +692,74 @@ body.uxdesign.alerts { } } +// ==================== + // artifact styles -// .alert { -// padding: 15px 20px; -// margin-bottom: 30px; -// border-radius: 3px; -// border: 1px solid #edbd3c; -// border-radius: 3px; -// background: #fbf6e1; -// // background: #edbd3c; -// font-size: 14px; -// @include clearfix; +.main-wrapper { + .alert { + padding: 15px 20px; + margin-bottom: 30px; + border-radius: 3px; + border: 1px solid #edbd3c; + border-radius: 3px; + background: #fbf6e1; + // background: #edbd3c; + font-size: 14px; + @include clearfix; -// .alert-message { -// float: left; -// margin-top: 4px; -// } + .alert-message { + float: left; + margin: 4px 0 0 0; + color: $gray-d3; + } -// strong { -// font-weight: 700; -// } + strong { + font-weight: 700; + } -// .alert-action { -// float: right; + .alert-action { + float: right; -// &.secondary { -// @include orange-button; -// } -// } -// } + &.secondary { + @include orange-button; + } + } + } +} -// body.error { -// background: $darkGrey; -// color: #3c3c3c; +body.error { + background: $gray-d4; + color: $gray-d3; -// .primary-header { -// display: none; -// } + .primary-header { + display: none; + } -// .error-prompt { -// width: 700px; -// margin: 150px auto; -// padding: 60px 50px 90px; -// border-radius: 3px; -// background: #fff; -// text-align: center; -// } + .error-prompt { + width: 700px; + margin: 150px auto; + padding: 60px 50px 90px; + border-radius: 3px; + background: $white; + text-align: center; + } -// h1 { -// float: none; -// margin: 0; -// font-size: 60px; -// font-weight: 300; -// color: #3c3c3c; -// } + h1 { + float: none; + margin: 0; + font-size: 60px; + font-weight: 300; + color: $gray-d3; + } -// .description { -// margin-bottom: 50px; -// font-size: 21px; -// } + .description { + margin-bottom: 50px; + font-size: 21px; + } -// .back-button { -// @include blue-button; -// padding: 14px 40px 18px; -// font-size: 18px; -// } -// } + .back-button { + @include blue-button; + padding: 14px 40px 18px; + font-size: 18px; + } +} diff --git a/cms/templates/unit.html b/cms/templates/unit.html index fa4b5dc20b..63d04a837f 100644 --- a/cms/templates/unit.html +++ b/cms/templates/unit.html @@ -33,7 +33,7 @@ <%block name="content">
    -
    +

    You are editing a draft. % if published_date: This unit was originally published on ${published_date}. @@ -143,7 +143,7 @@

    -
    +

    This unit has been published. To make changes, you must edit a draft.

    This is a draft of the published unit. To update the live version, you must replace it with this draft.

    From 62514d85a37fdfa5e60fa676902554e9c8eb1b19 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 6 Mar 2013 15:36:38 -0500 Subject: [PATCH 19/48] studio - alerts: loosely wired advanced settings with new notification and alert messages --- cms/static/js/views/settings/advanced_view.js | 6 ++-- cms/static/sass/_alerts.scss | 2 +- cms/templates/settings_advanced.html | 33 +++++++++++++++++++ 3 files changed, 37 insertions(+), 4 deletions(-) diff --git a/cms/static/js/views/settings/advanced_view.js b/cms/static/js/views/settings/advanced_view.js index dc9adb30ed..1aaa7d0c1e 100644 --- a/cms/static/js/views/settings/advanced_view.js +++ b/cms/static/js/views/settings/advanced_view.js @@ -114,13 +114,13 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({ }, showMessage: function (type) { - this.$el.find(".message-status").removeClass("is-shown"); + $(".wrapper-alert").removeClass("is-shown"); if (type) { if (type === this.error_saving) { - this.$el.find(".message-status.error").addClass("is-shown"); + $(".wrapper-alert-error").addClass("is-shown"); } else if (type === this.successful_changes) { - this.$el.find(".message-status.confirm").addClass("is-shown"); + $(".wrapper-alert-confirmation").addClass("is-shown"); this.hideSaveCancelButtons(); } } diff --git a/cms/static/sass/_alerts.scss b/cms/static/sass/_alerts.scss index 395519f867..07ac1e7913 100644 --- a/cms/static/sass/_alerts.scss +++ b/cms/static/sass/_alerts.scss @@ -234,7 +234,7 @@ bottom: 0; z-index: 1000; width: 100%; - border-top: 4px solid $black; + border-width: 2px; padding: $baseline ($baseline*2); &.wrapper-notification-warning { diff --git a/cms/templates/settings_advanced.html b/cms/templates/settings_advanced.html index f04015a4a9..00325f01b4 100644 --- a/cms/templates/settings_advanced.html +++ b/cms/templates/settings_advanced.html @@ -102,7 +102,9 @@ editor.render();
    + +<%block name="view_notifications">
    @@ -126,4 +128,35 @@ editor.render();
    + + +<%block name="view_alerts"> + +
    +
    + ✓ + +
    +

    Your policy changes have been saved.

    +

    Please note that validation of your policy key and value pairs is not currently in place yet. If you are having difficulties, please review your policy pairs.

    +
    + + + ␡ + close alert + +
    +
    + + +
    +
    + ⚠ + +
    +

    There was an error saving your information

    +

    Please see the error below and correct it to ensure there are no problems in rendering your course.

    +
    +
    +
    \ No newline at end of file From 559a311acbc093ded0a7da9d0d57e90a2b0687d3 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Thu, 7 Mar 2013 11:37:15 -0500 Subject: [PATCH 20/48] studio - alerts: refactored static alerts demo view to have a different template/view/url name to help with user facing views vs. documentation views --- cms/djangoapps/contentstore/views.py | 4 ++-- cms/templates/{alerts.html => ux-alerts.html} | 0 cms/urls.py | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) rename cms/templates/{alerts.html => ux-alerts.html} (100%) diff --git a/cms/djangoapps/contentstore/views.py b/cms/djangoapps/contentstore/views.py index df40a1972d..464342f3e1 100644 --- a/cms/djangoapps/contentstore/views.py +++ b/cms/djangoapps/contentstore/views.py @@ -110,8 +110,8 @@ def howitworks(request): else: return render_to_response('howitworks.html', {}) -def alerts(request): - return render_to_response('alerts.html', {}) +def ux_alerts(request): + return render_to_response('ux-alerts.html', {}) # ==== Views for any logged-in user ================================== diff --git a/cms/templates/alerts.html b/cms/templates/ux-alerts.html similarity index 100% rename from cms/templates/alerts.html rename to cms/templates/ux-alerts.html diff --git a/cms/urls.py b/cms/urls.py index b2c5670913..7a384b3f20 100644 --- a/cms/urls.py +++ b/cms/urls.py @@ -82,7 +82,7 @@ urlpatterns = ('', # User creation and updating views urlpatterns += ( - url(r'^alerts$', 'contentstore.views.alerts', name='alerts'), + url(r'^ux-alerts$', 'contentstore.views.ux_alerts', name='ux-alerts'), url(r'^howitworks$', 'contentstore.views.howitworks', name='howitworks'), url(r'^signup$', 'contentstore.views.signup', name='signup'), From 994ced3c61e159e3d27893c94bed663e6c103b51 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 20 Mar 2013 16:34:21 -0400 Subject: [PATCH 21/48] studio - notifications: organizing base variables --- cms/static/sass/_variables.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index 7998d0b199..7d2e0af00c 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -12,7 +12,6 @@ $fg-min-width: 900px; // type $sans-serif: 'Open Sans', $verdana; $body-line-height: golden-ratio(.875em, 1); -$error-red: rgb(253, 87, 87); // colors - new for re-org $black: rgb(0,0,0); @@ -164,4 +163,5 @@ $brightGreen: rgb(22, 202, 87); $disabledGreen: rgb(124, 206, 153); $darkGreen: rgb(52, 133, 76); $lightBluishGrey: rgb(197, 207, 223); -$lightBluishGrey2: rgb(213, 220, 228); \ No newline at end of file +$lightBluishGrey2: rgb(213, 220, 228); +$error-red: rgb(253, 87, 87); \ No newline at end of file From e3d35afb7a31bf6d44399a0cb362ef3d89963335 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 3 Apr 2013 15:49:26 -0400 Subject: [PATCH 22/48] studio - changing visual padding around alerts --- cms/static/sass/elements/_alerts.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cms/static/sass/elements/_alerts.scss b/cms/static/sass/elements/_alerts.scss index 92231179e5..80b489a3e9 100644 --- a/cms/static/sass/elements/_alerts.scss +++ b/cms/static/sass/elements/_alerts.scss @@ -307,7 +307,7 @@ right: ($baseline); border: 4px solid $black; border-bottom: none; - padding: ($baseline/2) $baseline; + padding: $baseline; .notification { @include box-sizing(border-box); From 3c3a6e7503cfa289f0d9f8ad740459798aa0142a Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Thu, 4 Apr 2013 16:46:38 -0400 Subject: [PATCH 23/48] studio - adding in view-based banners UI tweaks and removing global banner UI for now --- cms/static/sass/_cms_mixins.scss | 6 +- cms/static/sass/elements/_alerts.scss | 168 +++++++++++++++++++++++++- cms/templates/base.html | 5 +- cms/templates/overview.html | 21 ++++ cms/templates/ux-alerts.html | 85 ++++++++++--- 5 files changed, 259 insertions(+), 26 deletions(-) diff --git a/cms/static/sass/_cms_mixins.scss b/cms/static/sass/_cms_mixins.scss index 5bcbc11d95..73a566ccb3 100644 --- a/cms/static/sass/_cms_mixins.scss +++ b/cms/static/sass/_cms_mixins.scss @@ -185,14 +185,14 @@ // button - grey dark @mixin dark-grey-button { @include button; - border: 1px solid #1c1e20; + border: 1px solid $gray-d2; border-radius: 3px; - background: -webkit-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)) $extraDarkGrey; + background: -webkit-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)) $gray-d1; box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset; color: $white; &:hover { - background-color: #595f64; + background-color: $gray-d4; color: $white; } } diff --git a/cms/static/sass/elements/_alerts.scss b/cms/static/sass/elements/_alerts.scss index 80b489a3e9..87af5a5915 100644 --- a/cms/static/sass/elements/_alerts.scss +++ b/cms/static/sass/elements/_alerts.scss @@ -2,13 +2,19 @@ // ==================== // shared -.wrapper-notification, .wrapper-alert, .prompt { +.wrapper-notification, .wrapper-alert, .prompt, .wrapper-banner { @include box-sizing(border-box); + + .copy { + @include font-size(13); + } +} + +.wrapper-notification, .wrapper-alert, .prompt { background: $gray-d3; border-top: 4px solid $gray-d4; .copy { - @include font-size(13); color: $gray-l2; .title { @@ -24,7 +30,7 @@ } } -.alert, .notification, .prompt { +.alert, .notification, .prompt, .banner { // types - confirm &.confirm { @@ -226,6 +232,8 @@ } } +// ==================== + // notifications .wrapper-notification { @include clearfix(); @@ -595,6 +603,137 @@ } } +// ==================== + +// banners +.wrapper-banner { + width: 100%; + padding: $baseline; + + .banner { + @include box-sizing(border-box); + @include clearfix(); + margin: 0 auto; + width: flex-grid(12); + max-width: $fg-max-width; + min-width: $fg-min-width; + + .icon, .copy { + float: left; + display: inline-block; + vertical-align: middle; + } + + .icon { + @include transition (color 0.5s ease-in-out); + @include font-size(18); + width: flex-grid(1, 12); + margin-right: flex-gutter(); + text-align: right; + } + + .copy { + @include font-size(13); + width: flex-grid(10, 12); + + + .title { + margin-bottom: 0; + } + } + + // with actions + &.has-actions { + + .copy { + width: flex-grid(8, 12); + margin-right: flex-gutter(); + } + + .nav-actions { + width: flex-grid(4, 12); + float: right; + margin-top: ($baseline/2); + text-align: right; + + .nav-item { + display: inline-block; + vertical-align: middle; + margin-right: ($baseline/2); + + &:last-child { + margin-right: 0; + } + + .action-primary { + + } + + .action-secondary { + @include font-size(13); + } + } + } + } + + // has hidden actions + &.actions-are-hidden { + + .nav-actions { + @include transition(opacity 0.25s ease-in-out); + opacity: 0.0; + } + + &:hover { + + .nav-actions { + opacity: 1.0; + } + } + } + } +} + +// view banner +.wrapper-banner-view { + @include linear-gradient($gray-l2 0%, $gray-l4 2%, $gray-l4 98%, $gray-l2 100%); + margin-top: -($baseline*1.5); + margin-bottom: $baseline; + + .banner { + + .copy { + margin-top: ($baseline/4); + color: $gray-d2; + } + + &.has-actions { + + .nav-actions { + margin-top: 0; + + .action-primary { + @include dark-grey-button(); + @include font-size(12); + } + } + } + } +} + +// view banner - course note +.banner.coursenote { + + .copy { + + .link-course { + margin-left: ($baseline/4); + } + } +} + +// ==================== + // js enabled .js { @@ -608,7 +747,7 @@ } } - // prompt showing + // prompt showing/hiding &.prompt-is-shown { .wrapper-view { @@ -627,6 +766,7 @@ } } + // alert showing/hiding .wrapper-alert { display: none; @@ -635,6 +775,7 @@ } } + // notification showing/hiding .wrapper-notification { bottom: -($notification-height); @@ -651,8 +792,19 @@ @include anim-notificationsSlideUpDown(2s); } } + + // banner showing/hiding + .wrapper-banner { + display: none; + + &.is-shown { + display: block; + } + } } +// ==================== + // temporary body.uxdesign.alerts { @@ -667,6 +819,14 @@ body.uxdesign.alerts { margin-right: flex-gutter(); padding: $baseline ($baseline*1.5); + > section { + margin-bottom: ($baseline*2); + + &:last-child { + margin-bottom: 0; + } + } + ul { li { diff --git a/cms/templates/base.html b/cms/templates/base.html index 74f68a79ee..3efd630a75 100644 --- a/cms/templates/base.html +++ b/cms/templates/base.html @@ -53,14 +53,17 @@ -
    +
    <%include file="widgets/header.html" /> <%block name="view_alerts"> + <%block name="view_banners"> <%block name="content"> + <%include file="widgets/footer.html" /> <%include file="widgets/tender.html" /> + <%block name="view_notifications">
    diff --git a/cms/templates/overview.html b/cms/templates/overview.html index 744add76e3..212e386d71 100644 --- a/cms/templates/overview.html +++ b/cms/templates/overview.html @@ -217,3 +217,24 @@
    + +<%block name="view_banners"> + + + \ No newline at end of file diff --git a/cms/templates/ux-alerts.html b/cms/templates/ux-alerts.html index f462b90ef9..e1454db596 100644 --- a/cms/templates/ux-alerts.html +++ b/cms/templates/ux-alerts.html @@ -25,6 +25,18 @@ $(this.hash).addClass('is-fleeting'); }); + $('.hide-banner').click(function(e) { + (e).preventDefault(); + $('.wrapper-banner').removeClass('is-hiding'); + $(this.hash).addClass('is-hiding'); + }); + + $('.show-banner').click(function(e) { + (e).preventDefault(); + $('.wrapper-banner').removeClass('is-shown'); + $(this.hash).addClass('is-shown'); + }); + $('.hide-alert').click(function(e) { (e).preventDefault(); $('.wrapper-alert').removeClass('is-hiding'); @@ -57,7 +69,7 @@
    UX Design -

    Alerts & Notifications

    +

    System Notifications

    @@ -65,6 +77,22 @@
    +
    +
    +

    Banners

    + app/global-level or view specific information +
    + +

    In Studio, banners are meant to communicate larger app and system-level status messages as well as static view specific information

    + +

    Different Static Examples of Banners

    +

    Note: banners will probably never been shown based on click or page action and will primarily be loaded along with a pageload and initial display

    + + +
    +

    Alerts

    @@ -162,7 +190,7 @@

    You are editing a draft

    -

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

    +

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

    @@ -222,7 +250,7 @@

    Your changes have been saved

    -

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Please see below

    +

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Please see below

    @@ -239,7 +267,7 @@

    X Has been removed

    -

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

    +

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

    @@ -251,7 +279,7 @@

    We're sorry, there was a error with Studio

    -

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

    +

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

    @@ -263,7 +291,7 @@

    There was an error in your submission

    -

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Please see below

    +

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Please see below

    @@ -320,7 +348,7 @@

    Your Studio account has been created, but needs to be activated

    -

    Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.

    +

    Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.