#57 notifications ui position tweak

src/com/ui/Notifications.js

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