diff --git a/app/partials/issues.jade b/app/partials/issues.jade index acdb022f..989f745a 100644 --- a/app/partials/issues.jade +++ b/app/partials/issues.jade @@ -4,15 +4,14 @@ block head title Taiga Project management web application with scrum in mind! block content - include views/components/notification-message div.wrapper + include views/components/notification-message sidebar.menu-secondary.sidebar header h1 Filters include views/modules/search-in include views/modules/filter-tags - section.main.issues-page header include views/components/mainTitle diff --git a/app/partials/views/components/notification-message.jade b/app/partials/views/components/notification-message.jade index 2441489b..04e0c1b3 100644 --- a/app/partials/views/components/notification-message.jade +++ b/app/partials/views/components/notification-message.jade @@ -1,2 +1,13 @@ -div.notification-message.notification-message-success - div.icon.icon +//div.notification-message.notification-message-success +// div.icon.icon-notification-success +// div.text +// h4.warning Everything is ok +// p Our oompa Loompas saved all your changes! +// a.icon.icon-delete(href="", title="Close notification") + +div.notification-message.notification-message-error + div.icon.icon-notification-error + div.text + h4.warning Oops, something happened... + p Our oompa Loompas are sad, your changes were not saved! + a.icon.icon-delete(href="", title="Close notification") diff --git a/app/styles/components/notification-message.scss b/app/styles/components/notification-message.scss index e69de29b..e6dae507 100644 --- a/app/styles/components/notification-message.scss +++ b/app/styles/components/notification-message.scss @@ -0,0 +1,44 @@ +.notification-message { + background: $grayer; + color: $white; + padding: 1rem; + padding-bottom: .5em; + position: relative; + width: 100%; + z-index: 999; + .text { + display: inline-block; + margin-left: .5rem; + width: 80%; + } + .warning { + @extend %xlarge; + color: $white; + font-family: 'DroidSans-Bold'; + line-height: 2.4rem; + } + .icon-delete { + color: $white; + position: absolute; + right: 1rem; + top: 1rem; + } +} + +.notification-message-success { + background: $fresh-taiga; + .icon-notification-success { + @extend %xxlarge; + display: inline; + vertical-align: sub; + } +} + +.notification-message-error { + background: $red; + .icon-notification-error { + @extend %xxlarge; + display: inline; + vertical-align: sub; + } +}