diff --git a/resources/assets/js/components/notification.js b/resources/assets/js/components/notification.js index c352a9c85..c5c934a9f 100644 --- a/resources/assets/js/components/notification.js +++ b/resources/assets/js/components/notification.js @@ -6,11 +6,16 @@ class Notification { this.type = elem.getAttribute('notification'); this.textElem = elem.querySelector('span'); this.autohide = this.elem.hasAttribute('data-autohide'); + this.elem.style.display = 'grid'; + window.$events.listen(this.type, text => { this.show(text); }); elem.addEventListener('click', this.hide.bind(this)); - if (elem.hasAttribute('data-show')) this.show(this.textElem.textContent); + + if (elem.hasAttribute('data-show')) { + setTimeout(() => this.show(this.textElem.textContent), 100); + } this.hideCleanup = this.hideCleanup.bind(this); } diff --git a/resources/assets/sass/_components.scss b/resources/assets/sass/_components.scss index dec087b9c..d00d1fe9a 100644 --- a/resources/assets/sass/_components.scss +++ b/resources/assets/sass/_components.scss @@ -4,17 +4,18 @@ top: 0; right: 0; margin: $-xl*2 $-xl; - padding: $-l $-xl; + padding: $-m $-l; background-color: #EEE; border-radius: 3px; - box-shadow: $bs-med; + box-shadow: $bs-card; z-index: 999999; cursor: pointer; max-width: 360px; transition: transform ease-in-out 280ms; - transform: translate3d(580px, 0, 0); + transform: translateX(580px); display: grid; - grid-template-columns: 64px 1fr; + grid-template-columns: 42px 1fr; + color: #FFF; span, svg { vertical-align: middle; justify-self: center; @@ -22,9 +23,9 @@ } svg { fill: #EEEEEE; - width: 4em; - height: 4em; - padding-right: $-m; + width: 2.8rem; + height: 2.8rem; + padding-right: $-s; } span { vertical-align: middle; @@ -32,18 +33,15 @@ } &.pos { background-color: $positive; - color: #EEE; } &.neg { background-color: $negative; - color: #EEE; } &.warning { background-color: $secondary; - color: #EEE; } &.showing { - transform: translate3d(0, 0, 0); + transform: translateX(0); } &.showing:hover { transform: translate3d(0, -2px, 0); diff --git a/resources/assets/sass/_variables.scss b/resources/assets/sass/_variables.scss index d2b6acc9f..e62d37efe 100644 --- a/resources/assets/sass/_variables.scss +++ b/resources/assets/sass/_variables.scss @@ -59,4 +59,5 @@ $text-light: #EEE; // Shadows $bs-light: 0 0 4px 1px #CCC; $bs-med: 0 1px 3px 1px rgba(76, 76, 76, 0.26); +$bs-card: 0 1px 3px 1px rgba(76, 76, 76, 0.26), 0 1px 12px 0px rgba(76, 76, 76, 0.2); $bs-hover: 0 2px 2px 1px rgba(0,0,0,.13); \ No newline at end of file diff --git a/resources/views/partials/notifications.blade.php b/resources/views/partials/notifications.blade.php index 4c6766d25..ac853a56c 100644 --- a/resources/views/partials/notifications.blade.php +++ b/resources/views/partials/notifications.blade.php @@ -1,12 +1,11 @@ - -