notifications position fix, bumped version number

brain/views/frame.pug

@@ -12,8 +12,8 @@ html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en")
         //meta(name="twitter:image" content="https://thetwelfth.house/base-assets/images/current.png")
         link(rel='stylesheet', href="/assets/css/dash.css", type='text/css')
     body
-      #notifications.notifications.notify-close
-        #notifyMessage.notifyMessage
+      #notifications.notifications
+        #notifyMessage.notifyMessage.notify-close
           .notify-icon#notify-good
             svg(viewBox="0 0 20 20" class="icons")
               use#submit-update(xlink:href='/assets/images/global/sprite.svg#entypo-emoji-flirt')

package.json

@@ -1,6 +1,6 @@
 {
     "name": "fipamo-development",
-    "version": "1.2.2",
+    "version": "1.2.3",
     "private": true,
     "description": "The most chill blog framework ever.",
     "repository": "https://code.playvicio.us/Are0h/Fipamo",

src/com/ui/Notifications.js

@@ -1,5 +1,6 @@
 import anime from 'animejs/lib/anime.es.js';
 const notifcation = document.getElementById('notifications');
+const notify = document.getElementById('notifyMessage');
 const messageText = document.getElementById('message-text');
 const iconGood = document.getElementById('notify-good');
 const iconLame = document.getElementById('notify-lame');
@@ -15,7 +16,7 @@ export default class Notfications {
 	//--------------------------
 
 	alert(text, status) {
-		//notifcation.style.display = 'flex';
+		notifcation.style.display = 'block';
 		iconWorking.style.display = 'none';
 		iconGood.style.display = 'none';
 		iconLame.style.display = 'none';
@@ -35,8 +36,8 @@ export default class Notfications {
 			iconWorking.style.display = 'block';
 		}
 
-		notifcation.classList.remove('notify-close');
-		notifcation.classList.add('notify-open');
+		notify.classList.remove('notify-close');
+		notify.classList.add('notify-open');
 		messageText.innerHTML = text;
 		anime({
 			targets: messageText,
@@ -46,8 +47,11 @@ export default class Notfications {
 			complete: () => {
 				if (status !== null) {
 					setTimeout(() => {
-						notifcation.classList.add('notify-close');
-						notifcation.classList.remove('notify-open');
+						notify.addEventListener('transitionend', () => {
+							notifcation.style.display = 'none';
+						});
+						notify.classList.add('notify-close');
+						notify.classList.remove('notify-open');
 					}, 1000);
 				}
 			}

src/styles/main/_structure.styl

@@ -2,7 +2,6 @@ html, body
   background-color $primary - 60%
   font 400 1em $baseType
   height 100%
-  perspective: 1000px
 
 a
   font 300 1em $baseType
@@ -18,19 +17,21 @@ svg.icons
   fill $secondary
 
 #notifications
+  perspective 1000px
   position fixed
   z-index 2000
   height 10%
   width 100%
-  display block
+  display none
   align-items center
   justify-content center
   padding 0 
   margin 0
-  transform-origin: 50% 0;
-  transition all 0.5s cubic-bezier(.83,.05,.28,1.0)//ks-easing( "out-back" );
+  
+  
   #notifyMessage
     margin 0 auto
+    transition all 0.5s cubic-bezier(.83,.05,.28,1.0)//ks-easing( "out-back" );
     //padding-top -125px
     height 50px;
     width 500px
@@ -38,6 +39,7 @@ svg.icons
     align-items center
     justify-content center
     opacity: 1
+    transform-origin: 50% 0;
     #notify-good, #notify-lame, #notify-working
       display: none
     .notify-icon
@@ -63,12 +65,10 @@ svg.icons
 
 .notify-close
   transform-style preserve-3d
-  
   transform: rotateX(-120deg)
 
 .notify-open
   transform-style preserve-3d
-  //-origin: 50% 0;
   transform: rotateX(0deg)
 .blog-container
   width 100%