Преглед изворни кода

Create and add style for the notifier.

Lee Morgan пре 11 месеци
родитељ
комит
157e53931b
2 измењених фајлова са 39 додато и 0 уклоњено
  1. 23 0
      src/views/css/index.css
  2. 16 0
      src/views/js/Notifier.js

+ 23 - 0
src/views/css/index.css

@@ -83,3 +83,26 @@ body{
     text-decoration: underline;
     margin: 0;
 }
+
+.notifier{
+    position: absolute;
+    bottom: 35px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+    max-width: 750px;
+    padding: 15px 35px;
+    font-size: 18px;
+    font-weight: bold;
+    text-align: center;
+    z-index: 100;
+    color: white;
+}
+
+.notifier.error{
+    background: var(--error);
+}
+
+.notifier.success{
+    background: var(--success);
+}

+ 16 - 0
src/views/js/Notifier.js

@@ -0,0 +1,16 @@
+import Elem from "./Elem.js";
+
+export default class Notifier{
+    constructor(type, message){
+        this.elem = new Elem("p")
+            .addClass("notifier")
+            .addClass(type)
+            .text(message)
+            .appendTo(document.body)
+            .get();
+
+        setTimeout(()=>{
+            document.body.removeChild(this.elem);
+        }, 7500);
+    }
+}