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,

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);
+    }
+}

front-ui/package.json

@@ -11,6 +11,7 @@
     "devDependencies": {
         "Backbone.Mutators": "~0.4.4",
         "browserify": "~8.1.0",
+
         "events": "^1.0.2",
         "flux": "^2.0.1",
         "grunt": "^0.4.5",
@@ -29,6 +30,7 @@
         "react": "~0.12.2",
         "backbone": "~1.1.2",
         "react-router": "~0.11.6",
-    "superagent": "~0.21.0"
+        "superagent": "~0.21.0",
+        "burnt-toast": "^0.1.6"
     }
 }