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