initial commit

client/General/snackbar/snackbar.css

@@ -0,0 +1,71 @@
+#snackbar {
+    visibility: hidden;
+    min-width: 250px;
+    margin-left: -125px;
+    background-color: #93b7d6;
+    color: #fff;
+    text-align: center;
+    border-radius: 4px;
+    padding: 16px;
+    position: fixed;
+    z-index: 22;
+    left: 50%;
+    bottom: 30px;
+    font-size: 17px;
+}
+
+#snackbar.shadow {
+    min-width: 250px;
+    padding: 15px;
+    box-shadow: -5px 7px 8px #2f2f2f;
+}
+
+#snackbar.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, fadeout 0.5s 4.0s;
+    animation: fadein 0.5s, fadeout 0.5s 4.0s;
+}
+
+@-webkit-keyframes fadein {
+    from {
+        bottom: 0;
+        opacity: 0;
+    }
+    to {
+        bottom: 30px;
+        opacity: 1;
+    }
+}
+
+@keyframes fadein {
+    from {
+        bottom: 0;
+        opacity: 0;
+    }
+    to {
+        bottom: 30px;
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes fadeout {
+    from {
+        bottom: 30px;
+        opacity: 1;
+    }
+    to {
+        bottom: 0;
+        opacity: 0;
+    }
+}
+
+@keyframes fadeout {
+    from {
+        bottom: 30px;
+        opacity: 1;
+    }
+    to {
+        bottom: 0;
+        opacity: 0;
+    }
+}

client/General/snackbar/snackbar.html

@@ -0,0 +1,3 @@
+<template name="snackbar">
+    <div class="snackbar shadow" id="snackbar"></div>
+</template>

client/General/snackbar/snackbar.js

@@ -0,0 +1,11 @@
+// This is called to display a temporary message to the user at the bottom of the screen
+
+showSnackbar = function(snackbarText, snackbarColor) {
+    var snackbarNotification = document.getElementById("snackbar");
+    snackbarNotification.innerHTML = snackbarText;
+    snackbarNotification.style.backgroundColor = snackbarColor;
+    snackbarNotification.className = "show";
+    setTimeout(function() {
+        snackbarNotification.className = snackbarNotification.className.replace("show", "");
+    }, 4000)
+}