fix form submission message

CHANGELOG.md

@@ -1,3 +1,9 @@
+# v1.4.13
+## 21/12/2019
+
+1. [](#bugfix)
+	* Fixed form submission message not being visible (and made it bigger).
+
 # v1.4.12
 ## 20/12/2019
 

blueprints.yaml

@@ -1,5 +1,5 @@
 name: Hotdoy
-version: 1.4.12
+version: 1.4.13
 description: Hotdoy starter theme. 
 icon: angellist
 author:

css/notify.css

@@ -1,47 +1,41 @@
 .notify{
     position: fixed;
     right: 1rem;
-    bottom: 30px;
+    bottom: 1rem;
     left: 1rem;
-    text-align: center;
-    /*display: flex;*/
+    margin-left: auto;
+    margin-right: auto;
+
+    max-width: var(--width-tight);
+    height: 20vh;
+
+    display: flex;
     justify-content: center;
-    margin: 0 auto;
+    align-items: center;
+    text-align: center;
+
     padding: 20px;
     border-radius: 8px;
     background-color: var(--bg-color-alt);
     color: var(--fg-color-alt);
     box-shadow: var(--shadow-2);
-    transition: all 0.2s;
-    z-index: 2000;
+    transition: all 0.5s;
+    z-index: 5000;
 }
 
 .notify *:first-child {margin-top: 0;}
 .notify *:last-child {margin-bottom: 0;}
 
-.notify-done{
+.notify__done{
     position: absolute;
     top: 5px;
     right: 5px;
-    opacity: 0.7;
+    opacity: 0.8;
     color: white;
     cursor: pointer;
 }
 
-.notify-in {
+.notify--destroy{
     opacity: 0;
-    animation-name: reveal;
-    animation-delay: 0.5s;
-    animation-duration: 0.5s;
-    animation-fill-mode: forwards;
-    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
-}
-
-.notify-out {
-    opacity: 1;
-    animation-name: fadeouttobottom;
-    animation-delay: 0.1s;
-    animation-duration: 0.2s;
-    animation-fill-mode: forwards;
-    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
-}
+    transform: translateY(50vh);
+}

js/notify.js

@@ -1,28 +1,27 @@
 function notify(message, bg_color, fg_color, bg_src){
     var done = document.createElement('div');
-    done.setAttribute('class', 'notify-done material-icons');
+    done.setAttribute('class', 'notify__done material-icons');
     done.innerHTML = 'done';
     done.addEventListener("click", function () {
-        $(this).parent().addClass('notify-out');
+        $(this).parent().addClass('notify--destroy');
         setTimeout(function(){
             done.parentNode.remove();
-        }, 500);
+        }, 1000);
     });
 
-    var notification = document.createElement('div');
-    notification.setAttribute('class', 'notify notify-in tight');
+    var notice = document.createElement('div');
+    notice.setAttribute('class', 'notify');
     if (bg_color) {
-        notification.style.backgroundColor = bg_color;
+        notice.style.backgroundColor = bg_color;
     }
     if (fg_color) {
-        notification.style.color = fg_color;
+        notice.style.color = fg_color;
     }
     if (bg_src) {
-        notification.style.backgroundImage = bg_src;
+        notice.style.backgroundImage = bg_src;
     }
-    notification.setAttribute('data-ts', Date.now());
-    notification.innerHTML = message;
-    notification.appendChild(done);
+    notice.innerHTML = message;
+    notice.appendChild(done);
 
-    $('body').append(notification);
+    $('body').append(notice);
 }