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({
+        AppDispatcher.handleAction({
-          actionType: CartConstants.TAKE_ITEM_OUT,
+            actionType: CartConstants.TAKE_ITEM_OUT,
-          itemId: id
+            itemId: id
-      });
+        });
     },
     setItemCount: function(itemId, count) {
-      AppDispatcher.handleAction({
+        AppDispatcher.handleAction({
-          actionType: CartConstants.SET_ITEM_COUNT,
+            actionType: CartConstants.SET_ITEM_COUNT,
-          itemId: itemId,
+            itemId: itemId,
-          count: count
+            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);
+    }
+}

front-ui/package.json

@@ -1,34 +1,36 @@
 {
-  "name": "ribica-ui-stack",
+    "name": "ribica-ui-stack",
-  "version": "0.0.0",
+    "version": "0.0.0",
-  "description": "Ribica UI app",
+    "description": "Ribica UI app",
-  "main": "index.js",
+    "main": "index.js",
-  "scripts": {
+    "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+        "test": "echo \"Error: no test specified\" && exit 1"
-  },
+    },
-  "author": "",
+    "author": "",
-  "license": "BSD-2-Clause",
+    "license": "BSD-2-Clause",
-  "devDependencies": {
+    "devDependencies": {
-    "Backbone.Mutators": "~0.4.4",
+        "Backbone.Mutators": "~0.4.4",
-    "browserify": "~8.1.0",
+        "browserify": "~8.1.0",
-    "events": "^1.0.2",
+
-    "flux": "^2.0.1",
+        "events": "^1.0.2",
-    "grunt": "^0.4.5",
+        "flux": "^2.0.1",
-    "grunt-browserify": "~3.2.1",
+        "grunt": "^0.4.5",
-    "grunt-cli": "~0.1.13",
+        "grunt-browserify": "~3.2.1",
-    "grunt-config": "~0.2.2",
+        "grunt-cli": "~0.1.13",
-    "grunt-contrib-concat": "~0.5.0",
+        "grunt-config": "~0.2.2",
-    "grunt-contrib-connect": "~0.9.0",
+        "grunt-contrib-concat": "~0.5.0",
-    "grunt-contrib-uglify": "~0.7.0",
+        "grunt-contrib-connect": "~0.9.0",
-    "grunt-contrib-watch": "~0.6.1",
+        "grunt-contrib-uglify": "~0.7.0",
-    "grunt-replace": "~0.8.0",
+        "grunt-contrib-watch": "~0.6.1",
-    "reactify": "^1.1.1",
+        "grunt-replace": "~0.8.0",
-    "underscore": "^1.7.0"
+        "reactify": "^1.1.1",
-  },
+        "underscore": "^1.7.0"
-  "dependencies": {
+    },
-    "react": "~0.12.2",
+    "dependencies": {
-    "backbone": "~1.1.2",
+        "react": "~0.12.2",
-    "react-router": "~0.11.6",
+        "backbone": "~1.1.2",
-    "superagent": "~0.21.0"
+        "react-router": "~0.11.6",
-  }
+        "superagent": "~0.21.0",
-}
+        "burnt-toast": "^0.1.6"
+    }
+}