added toast notification that item is added to the cart

front-ui/app/actions/cartActions.js

@@ -1,5 +1,8 @@
 var AppDispatcher = require('../dispatcher/appDispatcher');
 var CartConstants = require('../constants/cartConstants');
+var BurntToast = require('burnt-toast');
+
+
 
 // Define action methods
 var CartActions = {
@@ -11,6 +14,12 @@ var CartActions = {
     },
 
     addNItems: function(item, count) {
+        var burntToast = new BurntToast();7
+        var message = "Ubacili ste " + item.get('name') + " u korpu!";
+        burntToast.makeToast(message, {
+            duration: 1500,
+            position: "top"
+        });
         AppDispatcher.handleAction({
             actionType: CartConstants.ADD_N_ITEMS,
             item: item,
@@ -45,18 +54,18 @@ var CartActions = {
     },
 
     takeItemOut: function(id) {
-      AppDispatcher.handleAction({
-          actionType: CartConstants.TAKE_ITEM_OUT,
-          itemId: id
-      });
+        AppDispatcher.handleAction({
+            actionType: CartConstants.TAKE_ITEM_OUT,
+            itemId: id
+        });
     },
     setItemCount: function(itemId, count) {
-      AppDispatcher.handleAction({
-          actionType: CartConstants.SET_ITEM_COUNT,
-          itemId: itemId,
-          count: count
-      });
+        AppDispatcher.handleAction({
+            actionType: CartConstants.SET_ITEM_COUNT,
+            itemId: itemId,
+            count: count
+        });
     }
 };
 
-module.exports = CartActions;
+module.exports = CartActions;

front-ui/app/css/toast.css

@@ -0,0 +1,71 @@
+#burnttoast {
+    width: auto;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    position: absolute;
+    visibility: hidden;
+    border-radius: 2px;
+    top: 1em;
+    left: 50vw;
+    opacity: 0;
+    filter: alpha(opacity=0);
+    z-index: 3000;
+    margin: 4px;
+    padding: 0.75em 1.25em;
+    cursor: pointer;
+    font-family: sans-serif;
+    font-size: 0.9em;
+    font-weight: 300;
+    transition-property: bottom, opacity;
+    transition: 0.4s cubic-bezier(0.44,0,0.2,0.8);
+    -webkit-justify-content: flex-start;
+        -ms-flex-pack: start;
+            justify-content: flex-start;
+    -webkit-transform: translateX(-50%);
+            transform: translateX(-50%);
+}
+
+#burnttoast.top {
+    bottom: auto;
+    top: -5em;
+}
+#burnttoast.left {
+    left: 0;
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+}
+#burnttoast.top.show {
+    bottom: auto;
+    top: 0;
+}
+
+#burnttoast.show {
+    transition-property: top, opacity;
+    visibility: visible;
+    opacity: 1;
+    filter: alpha(opacity=100);
+    top: 0;
+}
+
+.burnt-toast {
+    max-width: 100%;
+    width: 100%;
+    height: auto;
+    padding: 1em 2em;
+    color: rgb(240,240,240);
+    background: rgba(0,0,0,0.8);
+}
+.burnt-toast p {
+    margin: 0;
+}
+
+@media (max-width: 410px) {
+    #burnttoast {
+        width: 100%;
+        margin: 0;
+        left: 0;
+        -webkit-transform: translateX(0);
+                transform: translateX(0);
+    }
+}