Displays alert on error.

javascript/src/DragAndDrop.js

@@ -133,13 +133,24 @@ var QfqNS = QfqNS || {};
         console.log(JSON.stringify(object));
         var that = this;
         $.getJSON(this.api, object, function(data) {
-            that._succesHandler(data);
+            that._successHandler(data);
         });
     };
 
-    n.DragAndDrop.prototype._succesHandler = function(data) {
+    n.DragAndDrop.prototype._successHandler = function(data) {
         if (data.status === "error") {
+            var alert = new n.Alert({
+                type: data.status,
+                message: data.message,
+                modal: true,
+                buttons: [{
+                    label: "Ok", eventName: "ok"
+                }]
+            });
+            alert.show();
             console.error(data.message);
+        } else {
+            console.log(data.message);
         }
     };
 

less/qfq-bs.css.less

@@ -110,16 +110,23 @@ i.@{spinner_class} {
   width: auto;
 }
 
+
 .qfq-form-pill {
+  /*
   border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
+  border-top-left-radius: 4px; */
+  border: 1px solid #ccc;
+  border-top: none;
 }
 
+
 .qfq-form-body {
   padding-top: 5px;
   padding-bottom: 5px;
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
+  border: 1px solid #ccc;
+  border-top: none;
 }
 
 /* adjust BS padding of input elements: center */
@@ -134,6 +141,21 @@ i.@{spinner_class} {
   padding-top: 4px;
 }
 
+.qfq-form-title {
+  border: 1px solid #ccc;
+  border-radius: 10px 10px 0 0;
+  background-image: linear-gradient(to bottom, #fefefe 0, #dedede 100%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
+  height: 45px;
+  font-size: 1.2em;
+  padding: 10px 15px;
+  font-weight: bold;
+}
+
+.nav-pills>li>a {
+  border-radius: 0;
+}
+
 .qfq-color-white {
   background-color: #ffffff;
 }
@@ -412,14 +434,4 @@ i.@{spinner_class} {
 .alert-interactive p.buttons {
   margin-top: 20px;
   text-align: center;
-}
-
-.qfqDropTarget {
-  height: 50px;
-  margin: 1px;
-  border: 1px dashed #ccc;
-}
-
-.qfqTargetDisplay {
-  border: 1px dashed #25adf1;
 }
\ No newline at end of file