DIV-597: Visual design for child table

edivorce/apps/core/static/css/main.scss

@@ -186,6 +186,44 @@ input[type=number]::-webkit-outer-spin-button {
 	}
 }
 
+.fact-sheet-control {
+	&[readonly] {
+		color: #8c8c8c;
+		background: #f2f2f2;
+	}
+	border-bottom: 1px solid #ddd;
+	border-right: 1px solid #ddd;
+	border-left: 1px solid #ddd;
+	font-size: 16px;
+
+	a {
+		color: #494949;
+		i {
+			color: #494949;
+		}
+
+		&:hover {
+			text-decoration: none;
+		}
+	}
+
+	&:hover {
+		background: #d4dce5;
+	}
+}
+
+.fact-sheet-button {
+	a {
+		color: #494949;
+		i {
+			color: #494949;
+			&:hover {
+				color: #385dbc;
+			}
+		}
+	}
+}
+
 .table-cell-active {
 	border: 1px solid #66afe9;
 	border-radius: 4px;
@@ -204,15 +242,20 @@ input[type=number]::-webkit-outer-spin-button {
 
 .list-builder {
 	@extend .table;
-	border-collapse: separate;
+	border-collapse: collapse;
 }
 
 .list-builder-hide-column {
 	display: none;
+	border: none;
 }
 
 .child-item-row {
 	height: 50px;
+	// exclude last 3 columns because contain buttons
+	&:hover td:not(:nth-last-child(-n+3)) {
+		background: #d4dce5;
+	}
 }
 
 div.dollar-prefix {

edivorce/apps/core/static/js/main.js

@@ -246,7 +246,7 @@ $(function () {
         },
         {
             table_selector: "#claimant_children",
-            add_button_selector: "#btn_add_child",
+            add_button_selector: ".btn-add-child",
             delete_button_selector: ".btn-delete-child",
             input_field_selector: ".child-field",
             clone_group_class: "child-disabled-group",
@@ -275,7 +275,8 @@ $(function () {
 
                 // When click the delete button for a row, make sure any handlers attached to the inputs
                 // have been cleared.
-                newElement.find(settings.delete_button_selector).on('click', function() {
+                newElement.find(settings.delete_button_selector).on('click', function(e) {
+                    e.preventDefault();
                     $('[type=radio]').prop('checked', false);
                     $('.children-input-block').each(function() {
                         resetChildrenInputBlock($(this), 'null');
@@ -725,7 +726,8 @@ var deleteAddedTableRow = function(element) {
 };
 
 var registerTableRowAddRemoveHandlers = function(settings) {
-    var cleanUp = function() {
+    var cleanUp = function(e) {
+        e.preventDefault();
         if (settings.hasOwnProperty('customDeleteAction')) {
             settings.customDeleteAction(settings, $(this));
         } else {
@@ -734,7 +736,8 @@ var registerTableRowAddRemoveHandlers = function(settings) {
     };
 
     $(settings.delete_button_selector).on('click', cleanUp);
-    $(settings.add_button_selector).on('click', function() {
+    $(settings.add_button_selector).on('click', function(e) {
+        e.preventDefault();
         var newRow = $('.' + settings.clone_group_class).clone();
         newRow.show();
         newRow.removeClass(settings.clone_group_class);

edivorce/apps/core/templates/partials/your_children_child.html

@@ -31,10 +31,7 @@
 </td>
 {% if not exclude_delete_button %}
 <td class="fact-sheet-button">
-    <div class="form-group">
-        <input type="button" class="btn btn-danger btn-delete-child form-control" tabindex="-1" value="X" />
-        <input type="button" class="btn btn-default btn-edit-child form-control" tabindex="-1" value="E" />
-    </div>
+    <a href="#"><i class="fa fa-times btn-delete-child"></i></a>
 </td>
 {% endif %}
 <td class="list-builder-hide-column">

edivorce/apps/core/templates/question/06_children_your_children.html

@@ -14,13 +14,13 @@
 <div class="question-well children-list">
     <table id="claimant_children" class="list-builder">
         <thead>
-            <tr class="list-builder-header">
+            <tr class="">
                 <th class="table-bordered">Child's Name</th>
                 <th class="table-bordered">Birth date</th>
                 <th class="table-bordered">Child now living with</th>
                 <th class="table-bordered">Relationship to Claimant 1</th>
                 <th class="table-bordered">Relationship to Claimant 2</th>
-                <th></th>
+                <th class="list-builder-hide-column"></th>
                 <th class="list-builder-hide-column"></th>
             </tr>
         </thead>
@@ -38,10 +38,14 @@
             {% endfor %}
         {% endif %}
         </tbody>
+        <tbody>
+            <tr>
+                <td id="btn_add_child" class="btn-add-child fact-sheet-control" colspan="5" readonly>
+                    <a href="#add"><i class="fa fa-plus btn-add-child"></i>   Add Child</a>
+                </td>
+            </tr>
+        </tbody>
     </table>
-    <div class="form-button">
-        <input type="button" id="btn_add_child" class="btn btn-success" value="Add Child"/>
-    </div>
 </div>
 
 <div class="children-questions" hidden>