From 59ac99778c384fc9b33416b988e98e3d05506ce7 Mon Sep 17 00:00:00 2001 From: Lisa Passing Date: Thu, 19 Mar 2015 17:31:13 +0100 Subject: [PATCH] add new flash message styles --- app/styles/app.scss | 3 +- app/styles/app/layout.sass | 84 +++++++++++----------- app/styles/app/modules/flash.sass | 52 ++++++++++++++ app/styles/app/modules/icons.sass | 6 ++ app/styles/app/modules/section.sass | 2 +- app/templates/layouts/home.hbs | 3 +- app/templates/layouts/profile.hbs | 3 +- app/templates/layouts/simple.hbs | 3 +- app/views/flash.coffee | 2 +- public/images/svg/icon-error-dismiss.svg | 8 +++ public/images/svg/icon-success-dismiss.svg | 8 +++ 11 files changed, 126 insertions(+), 48 deletions(-) create mode 100644 app/styles/app/modules/flash.sass create mode 100644 public/images/svg/icon-error-dismiss.svg create mode 100644 public/images/svg/icon-success-dismiss.svg diff --git a/app/styles/app.scss b/app/styles/app.scss index cc6bbe52..6cdbc7b1 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -10,7 +10,7 @@ @import "app/auth"; @import "app/caches"; @import "app/charm"; -@import "app/flash"; +// @import "app/flash"; @import "app/forms"; @import "app/getting_started"; @import "app/github"; @@ -49,6 +49,7 @@ @import "app/modules/dropdown"; @import "app/modules/tabs"; @import "app/modules/tooltips"; +@import "app/modules/flash"; @import "app/layout"; @import "app/layouts/dashboard"; diff --git a/app/styles/app/layout.sass b/app/styles/app/layout.sass index a6127a8c..358cf42a 100644 --- a/app/styles/app/layout.sass +++ b/app/styles/app/layout.sass @@ -96,56 +96,56 @@ a margin-left: 5px -@media screen and (max-width: 1400px) - #left .duration_label - display: inline-block - width: 11px - height: 11px - margin-right: 1px - text-indent: 10px - overflow: hidden - background: inline-image('ui/clock.svg') no-repeat 0px 0px - background-size: contain +// @media screen and (max-width: 1400px) +// #left .duration_label +// display: inline-block +// width: 11px +// height: 11px +// margin-right: 1px +// text-indent: 10px +// overflow: hidden +// background: inline-image('ui/clock.svg') no-repeat 0px 0px +// background-size: contain -@media screen and (max-width: 1400px) - #left .finished_at_label - display: none +// @media screen and (max-width: 1400px) +// #left .finished_at_label +// display: none -@media screen and (max-width: 1400px) - table#builds .committer - display: none +// @media screen and (max-width: 1400px) +// table#builds .committer +// display: none -@media handheld, only screen and (max-device-width: 980px) - #left - display: none - #main - min-width: 99% - max-width: 99% - padding: 0px +// @media handheld, only screen and (max-device-width: 980px) +// #left +// display: none +// #main +// min-width: 99% +// max-width: 99% +// padding: 0px - .tabs - margin-top: 5px +// .tabs +// margin-top: 5px - p.description - margin: 5px 0px +// p.description +// margin: 5px 0px - #repo - padding: 15px 10px - width: 95% +// #repo +// padding: 15px 10px +// width: 95% - #top - width: 100% - min-width: 960px - #tools - display: none +// #top +// width: 100% +// min-width: 960px +// #tools +// display: none -a - text-decoration : none +// a +// text-decoration : none -.application, -.dashboard - height: 100% +// .application, +// .dashboard +// height: 100% -.no-padding - padding : 0 +// .no-padding +// padding : 0 diff --git a/app/styles/app/modules/flash.sass b/app/styles/app/modules/flash.sass new file mode 100644 index 00000000..f2248c0c --- /dev/null +++ b/app/styles/app/modules/flash.sass @@ -0,0 +1,52 @@ +.flash + @include resetul + font-size: 18px + text-align: center + li + opacity: 0 + position: relative + max-height: 3.5rem + height: 0 + animation: comeIn 7s 1 ease + + .close + @extend .icon + position: absolute + top: 1em + right: 1em + width: 1.1rem + height: 1.1rem + + p + padding: .7em 0 + margin: 0 + + .success, + .notice + color: #3ba85b + background-color: #deebdd + .close + @extend .icon--dismiss-green + + .error + color: #de4248 + background-color: #f1b6ad + .close + @extend .icon--dismiss-red + +@keyframes comeIn + 0% + opacity: 1 + height: 0 + top: -10em + 5% + height: 3.5rem + top: 0 + 95% + height: 3.5rem + opacity: 1 + 99% + height: 3.5em + 100% + height: 0 + opacity: 0 \ No newline at end of file diff --git a/app/styles/app/modules/icons.sass b/app/styles/app/modules/icons.sass index 0a9e72b3..8564d57b 100644 --- a/app/styles/app/modules/icons.sass +++ b/app/styles/app/modules/icons.sass @@ -135,6 +135,12 @@ .icon--search background-image: inline-image('svg/search.svg') +.icon--dismiss-green + background-image: inline-image('svg/icon-success-dismiss.svg') +.icon--dismiss-red + background-image: inline-image('svg/icon-error-dismiss.svg') + + .icon--plus &:after content: "+" diff --git a/app/styles/app/modules/section.sass b/app/styles/app/modules/section.sass index 5e7a96d7..4bdd6285 100644 --- a/app/styles/app/modules/section.sass +++ b/app/styles/app/modules/section.sass @@ -5,4 +5,4 @@ background-color: $white .section--maxheight - height: 3.3em \ No newline at end of file + height: 3.3em diff --git a/app/templates/layouts/home.hbs b/app/templates/layouts/home.hbs index afb3b277..e0a94ab5 100644 --- a/app/templates/layouts/home.hbs +++ b/app/templates/layouts/home.hbs @@ -4,9 +4,10 @@ {{render "top"}} + {{render "flash"}} +
- {{render "flash"}} {{yield}}
diff --git a/app/templates/layouts/profile.hbs b/app/templates/layouts/profile.hbs index 5213e7dd..68dad4c8 100644 --- a/app/templates/layouts/profile.hbs +++ b/app/templates/layouts/profile.hbs @@ -3,9 +3,10 @@ {{render "top"}} + {{render "flash"}} +
- {{render "flash"}} {{yield}}
diff --git a/app/templates/layouts/simple.hbs b/app/templates/layouts/simple.hbs index de550ddf..a15f299f 100644 --- a/app/templates/layouts/simple.hbs +++ b/app/templates/layouts/simple.hbs @@ -2,7 +2,8 @@ {{render "top"}} +{{render "flash"}} +
- {{render "flash"}} {{yield}}
diff --git a/app/views/flash.coffee b/app/views/flash.coffee index f23d3fc6..1d7d4f01 100644 --- a/app/views/flash.coffee +++ b/app/views/flash.coffee @@ -2,7 +2,7 @@ View = BasicView.extend classNames: ['flash'] - tagname: 'ul' + tagName: 'ul' templateName: 'layouts/flash' `export default View` diff --git a/public/images/svg/icon-error-dismiss.svg b/public/images/svg/icon-error-dismiss.svg new file mode 100644 index 00000000..a0131f0e --- /dev/null +++ b/public/images/svg/icon-error-dismiss.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/public/images/svg/icon-success-dismiss.svg b/public/images/svg/icon-success-dismiss.svg new file mode 100644 index 00000000..ea40e426 --- /dev/null +++ b/public/images/svg/icon-success-dismiss.svg @@ -0,0 +1,8 @@ + + + + + +