Prevented error notification being visible on load

Fixes #897

Also made design a little more compact

diff --git a/resources/assets/js/components/notification.js b/resources/assets/js/components/notification.js
index c352a9c85328d7f9f412d83eb736f08569db48d7..c5c934a9f2159911e2a997b31a6d6870572ac178 100644 (file)
--- 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 dec087b9c510c2f35c0679f4df62fe2fced5387f..d00d1fe9a433f5497795d5fc765e577683f91d0a 100644 (file)
--- 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 d2b6acc9fa5074b25f8f0791cb15217372abca5c..e62d37efebb3c1c6463c64b642d7c83d859dd093 100644 (file)
--- 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 4c6766d2552d4197421353d43949f972ce6f5ab5..ac853a56cc01b79f7a1c7a681a9e0ec59da33158 100644 (file)
--- a/resources/views/partials/notifications.blade.php
+++ b/resources/views/partials/notifications.blade.php
@@ -1,12 +1,11 @@
-
-<div notification="success" data-autohide class="pos" @if(session()->has('success')) data-show @endif>
+<div notification="success" style="display: none;" data-autohide class="pos" @if(session()->has('success')) data-show @endif>
     @icon('check-circle') <span>{!! nl2br(htmlentities(session()->get('success'))) !!}</span>
 </div>
 
-<div notification="warning" class="warning" @if(session()->has('warning')) data-show @endif>
+<div notification="warning" style="display: none;" class="warning" @if(session()->has('warning')) data-show @endif>
     @icon('info') <span>{!! nl2br(htmlentities(session()->get('warning'))) !!}</span>
 </div>
 
-<div notification="error" class="neg" @if(session()->has('error')) data-show @endif>
+<div notification="error" style="display: none;" class="neg" @if(session()->has('error')) data-show @endif>
     @icon('danger') <span>{!! nl2br(htmlentities(session()->get('error'))) !!}</span>
 </div>