Prevented error notification being visible on load

Fixes #897

Also made design a little more compact

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);
     }

resources/assets/sass/_components.scss

@@ -4,46 +4,44 @@
   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;
     align-self: center;
   }
   svg {
     fill: #EEEEEE;
-    width: 4em;
-    height: 4em;
-    padding-right: $-m;
+    width: 2.8rem;
+    height: 2.8rem;
+    padding-right: $-s;
   }
   span {
     vertical-align: middle;
     line-height: 1.3;
   }
   &.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);

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);

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>