Arrays now look less horrible

Not final design yet though.

Author: davidlgj

dist/bootstrap-decorator.min.js

@@ -839,6 +839,7 @@ function(sfSelect, schemaForm) {
         };
 
         scope.deleteFromArray = function(index) {
+          console.log('delete from array',index,list)
           list.splice(index,1);
         };
 

dist/schema-form.min.js

@@ -84,6 +84,7 @@ function(sfSelect, schemaForm) {
         };
 
         scope.deleteFromArray = function(index) {
+          console.log('delete from array',index,list)
           list.splice(index,1);
         };
 

src/directives/array.js

@@ -1,10 +1,22 @@
 <div sf-array="form">
   <h3 ng-show="form.title && form.notitle !== true">{{ form.title }}</h3>
-  <ul>
-    <li ng-repeat="item in modelArray track by $index">
+  <ul class="list-group">
+    <li class="list-group-item" ng-repeat="item in modelArray track by $index">
+      <button ng-click="deleteFromArray($index)"
+              style="position: relative; z-index: 20;"
+              type="button" class="close pull-right">
+              <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
+      </button>
       <sf-decorator form="copyWithIndex($index)"></sf-decorator>
-      <button ng-click="deleteFromArray($index)" type="button" class="btn btn-default">-</button>
+
+    </li>
+    <li class="list-group-item clearfix">
+      <button ng-click="appendToArray()"
+              type="button"
+              class="btn btn-default pull-right">
+        <i class="glyphicon glyphicon-plus"></i>
+        {{ form.add || 'Add'}}
+      </button>
     </li>
   </ol>
-  <button ng-click="appendToArray()" type="button" class="btn btn-default">+</button>
 </div>