Merge pull request #135 from coltonb/master

Adjusted button positioning and animated notifications
pittcsc · Jun 1, 2017 · 8e36123 · 8e36123
2 parents 464637c + 037f9d5
commit 8e36123
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 7 deletions.
diff --git a/main.css b/main.css
@@ -69,6 +69,22 @@ html, body
     cursor: pointer;
 }
 
+@keyFrames vanish
+{
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+.vanish
+{
+    animation-duration: 1s;
+    animation-name: vanish;
+}
+
 .retry
 {
     position: relative;
@@ -304,11 +320,16 @@ html, body
     padding: 5px;
 }
 
-#dateSelection
+#dateSelection, #displaySelection
 {
     display: flex;
 }
 
+#dateSelection
+{
+    margin-top: 5px;
+}
+
 button
 {
     background-color: #fff;
@@ -318,11 +339,6 @@ button
     padding: 5px 5px;
 }
 
-#dateSelection:first-child
-{
-    margin-left: 1px;
-}
-
 button:hover
 {
     background-color: #eee;

diff --git a/map.js b/map.js
@@ -268,7 +268,7 @@
         closeButton.className = "close";
         closeButton.innerHTML = "x";
         closeButton.addEventListener("click", function() {
-            box.style.display = "none";
+            vanish();
         });
 
         box.appendChild(closeButton);
@@ -282,6 +282,17 @@
             box.appendChild(customDiv);
         }
 
+        function vanish() {
+            box.classList.add("vanish");
+            setTimeout(function() {
+                if (box.classList.contains("vanish")) {
+                    box.style.display = "none";
+                }
+            }, 1000);
+        }
+
+        setTimeout(vanish, 7000);
+
         const topNotification = notificationArea.firstChild;
         notificationArea.insertBefore(box, topNotification);
     }