#57 notifications ui position tweak

src/com/ui/Notifications.js

@@ -1,87 +1,87 @@
-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');
-const iconWorking = document.getElementById('notify-working');
+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");
+const iconWorking = document.getElementById("notify-working");
 
 export default class Notfications {
-	//--------------------------
-	// constructor
-	//--------------------------
-	constructor() {}
-	//--------------------------
-	// methods
-	//--------------------------
+  //--------------------------
+  // constructor
+  //--------------------------
+  constructor() {}
+  //--------------------------
+  // methods
+  //--------------------------
 
-	alert(text, status) {
-		iconWorking.style.display = 'none';
-		iconGood.style.display = 'none';
-		iconLame.style.display = 'none';
+  alert(text, status) {
+    iconWorking.style.display = "none";
+    iconGood.style.display = "none";
+    iconLame.style.display = "none";
 
-		var color = '';
-		if (status !== null) {
-			if (status) {
-				color = '#32cd32';
-				iconWorking.style.display = 'none';
-				iconGood.style.display = 'block';
-			} else {
-				color = '#F64747';
-				iconWorking.style.display = 'none';
-				iconLame.style.display = 'block';
-			}
-		} else {
-			color = '#200317';
-			iconWorking.style.display = 'block';
-		}
-		messageText.innerHTML = text;
+    var color = "";
+    if (status !== null) {
+      if (status) {
+        color = "#32cd32";
+        iconWorking.style.display = "none";
+        iconGood.style.display = "block";
+      } else {
+        color = "#F64747";
+        iconWorking.style.display = "none";
+        iconLame.style.display = "block";
+      }
+    } else {
+      color = "#200317";
+      iconWorking.style.display = "block";
+    }
+    messageText.innerHTML = text;
 
-		anime({
-			targets: notifcation,
-			marginTop: '0',
-			easing: 'easeInOutQuint',
-			duration: 10,
-			complete: () => {
-				anime({
-					targets: notify,
-					rotateX: '0',
-					easing: 'easeInOutQuint',
-					duration: 700
-				});
-				anime({
-					targets: messageText,
-					backgroundColor: color,
-					easing: 'easeInOutQuint',
-					duration: 700,
-					complete: () => {
-						setTimeout(() => {
-							if (status !== null) {
-								anime({
-									targets: notify,
-									rotateX: '-120',
-									easing: 'easeInOutQuint',
-									duration: 700,
-									complete: () => {
-										anime({
-											targets: notifcation,
-											marginTop: '-55',
-											easing: 'easeInOutQuint',
-											delay: 700,
-											duration: 50
-										});
-										//notifcation.style.display = 'none';
-									}
-								});
-							}
-						}, 1000);
-					}
-				});
-			}
-		});
-	}
+    anime({
+      targets: notifcation,
+      marginTop: "-10",
+      easing: "easeInOutQuint",
+      duration: 10,
+      complete: () => {
+        anime({
+          targets: notify,
+          rotateX: "0",
+          easing: "easeInOutQuint",
+          duration: 700
+        });
+        anime({
+          targets: messageText,
+          backgroundColor: color,
+          easing: "easeInOutQuint",
+          duration: 700,
+          complete: () => {
+            setTimeout(() => {
+              if (status !== null) {
+                anime({
+                  targets: notify,
+                  rotateX: "-120",
+                  easing: "easeInOutQuint",
+                  duration: 700,
+                  complete: () => {
+                    anime({
+                      targets: notifcation,
+                      marginTop: "-55",
+                      easing: "easeInOutQuint",
+                      delay: 700,
+                      duration: 50
+                    });
+                    //notifcation.style.display = 'none';
+                  }
+                });
+              }
+            }, 1000);
+          }
+        });
+      }
+    });
+  }
 
-	//--------------------------
-	// event handlers
-	//--------------------------
+  //--------------------------
+  // event handlers
+  //--------------------------
 }