From 8179b9fadc12e75610b64d9ce40d953755e9f5e9 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Mon, 25 Feb 2013 14:19:22 -0500 Subject: [PATCH] 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