make confirm msg auto-fade

espterm · Sep 26, 2017 · c846cff · c846cff
1 parent 64c1ebb
commit c846cff
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/js/appcommon.js b/js/appcommon.js
@@ -112,8 +112,15 @@ $.ready(function () {
   let msgAt = window.location.search.indexOf('msg=')
   if (msgAt !== -1 && qs('.Box.message')) {
     let msg = decodeURIComponent(window.location.search.substr(msgAt + 4))
-    qs('.Box.message').innerHTML = msg
-    qs('.Box.message').classList.remove('hidden')
+    let box = qs('.Box.message')
+    box.innerHTML = msg
+    box.classList.remove('hidden')
+    setTimeout(() => {
+      box.classList.add('hiding')
+      setTimeout(() => {
+        box.classList.add('hidden')
+      }, 1000)
+    }, 2000)
   }
 
   modal.init()

diff --git a/sass/form/_form_layout.scss b/sass/form/_form_layout.scss
@@ -15,6 +15,11 @@ form { @include naked(); }
 .Box.message {
 	font-weight: bold;
 	color: #0fca50;
+	transition: opacity linear 1s;
+	opacity: 1;
+	&.hiding {
+		opacity: 0;
+	}
 }
 
 .Row {