DIV-624: Visual design for all tables in fact sheets

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

@@ -182,7 +182,7 @@ input[type=number]::-webkit-outer-spin-button {
 	}
 
 	input {
-		text-align: right;
+		text-align: left;
 	}
 }
 
@@ -235,14 +235,17 @@ input[type=number]::-webkit-outer-spin-button {
 	border: none;
 }
 
-.table > thead > tr.list-builder-header {
-	border-top: 1px solid #ddd;
-	border-right: 1px solid #ddd;
+.table > thead > tr.list-builder-header > th:last-child,
+.table > tbody > tr > td:last-child {
+	width: 1px;
+	white-space: nowrap;
 }
 
 .list-builder {
 	@extend .table;
 	border-collapse: collapse;
+	width: 100%;
+	table-layout: fixed;
 }
 
 .list-builder-hide-column {
@@ -250,7 +253,7 @@ input[type=number]::-webkit-outer-spin-button {
 	border: none;
 }
 
-.child-item-row {
+.child-item-row, {
 	height: 50px;
 	// exclude last 3 columns because contain buttons
 	&:hover td:not(:nth-last-child(-n+3)) {
@@ -272,6 +275,10 @@ div.dollar-prefix {
 		align-items: center;
 		justify-content: center;
 	}
+
+	input {
+		text-align: right;
+	}
 }
 
 div.percent-prefix {
@@ -288,6 +295,10 @@ div.percent-prefix {
 		align-items: center;
 		justify-content: center;
 	}
+
+	input {
+		text-align: right;
+	}
 }
 
 .money {

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

@@ -198,7 +198,7 @@ $(function () {
     var listControlGroups = [
         {
             table_selector: "#claimant_debts",
-            add_button_selector: "#btn_add_debt",
+            add_button_selector: ".btn-add-debt",
             delete_button_selector: ".btn-delete-debt",
             input_field_selector: ".debt-input-field",
             clone_group_class: "debt-group",
@@ -206,7 +206,7 @@ $(function () {
         },
         {
             table_selector: "#claimant_expenses",
-            add_button_selector: "#btn_add_expense",
+            add_button_selector: ".btn-add-expense",
             delete_button_selector: ".btn-delete-expense",
             input_field_selector: ".expense-input-field",
             clone_group_class: "expense-group",
@@ -214,7 +214,7 @@ $(function () {
         },
         {
             table_selector: "#supporting_non_dependents",
-            add_button_selector: "#btn_add_supporting_non_dependent",
+            add_button_selector: ".btn-add-supporting-non-dependent",
             delete_button_selector: ".btn-delete-supporting-non-dependent",
             input_field_selector: ".supporting-non-dependent-input-field",
             clone_group_class: "supporting-non-dependent-group",
@@ -222,7 +222,7 @@ $(function () {
         },
         {
             table_selector: "#supporting_dependents",
-            add_button_selector: "#btn_add_supporting_dependent",
+            add_button_selector: ".btn-add-supporting-dependent",
             delete_button_selector: ".btn-delete-supporting-dependent",
             input_field_selector: ".supporting-dependent-input-field",
             clone_group_class: "supporting-dependent-group",
@@ -230,7 +230,7 @@ $(function () {
         },
         {
             table_selector: "#supporting_disabled",
-            add_button_selector: "#btn_add_supporting_disabled",
+            add_button_selector: ".btn-add-supporting-disabled",
             delete_button_selector: ".btn-delete-supporting-disabled",
             input_field_selector: ".supporting-disabled-input-field",
             clone_group_class: "supporting-disabled-group",
@@ -238,7 +238,7 @@ $(function () {
         },
         {
             table_selector: "#income_others",
-            add_button_selector: "#btn_add_income_others",
+            add_button_selector: ".btn-add-income-others",
             delete_button_selector: ".btn-delete-income-others",
             input_field_selector: ".income-others-input-field",
             clone_group_class: "income-others-group",

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

@@ -12,8 +12,6 @@
 </td>
 {% if not exclude_delete_button %}
 <td class="fact-sheet-button">
-    <div class="form-group">
-        <input type="button" class="btn btn-danger btn-delete-debt form-control" tabindex="-1" value="Delete"  data-save_select=".debt-input-field" />
-    </div>
+    <a href="#"><i class="fa fa-times btn-delete-debt"></i></a>
 </td>
 {% endif %}

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

@@ -9,8 +9,6 @@
 </td>
 {% if not exclude_delete_button %}
 <td class="fact-sheet-button">
-    <div class="form-group">
-        <input type="button" class="btn btn-danger btn-delete-expense form-control" tabindex="-1" value="Delete" />
-    </div>
+    <a href="#" tabindex="-1"><i class="fa fa-times btn-delete-expense"></i></a>
 </td>
 {% endif %}

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

@@ -10,8 +10,6 @@
 
 {% if not exclude_delete_button %}
 <td class="fact-sheet-button">
-    <div class="form-group">
-        <input type="button" class="btn btn-danger btn-delete-income-others form-control" tabindex="-1" value="Delete" />
-    </div>
+    <a href="#" tabindex="-1"><i class="fa fa-times btn-delete-income-others"></i></a>
 </td>
 {% endif %}

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

@@ -14,8 +14,6 @@
 
 {% if not exclude_delete_button %}
 <td class="fact-sheet-button">
-    <div class="form-group">
-        <input type="button" class="btn btn-danger form-control {{ delete_button_class  }}" tabindex="-1" value="Delete" />
-    </div>
+    <a href="#" tabindex="-1"><i class="fa fa-times {{ delete_button_class  }}"></i></a>
 </td>
 {% endif %}

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

@@ -651,10 +651,14 @@
                         </tr>
                     {% endif %}
                 </tbody>
+                <tbody>
+                    <tr>
+                        <td class="btn-add-debt fact-sheet-control" colspan="3" readonly>
+                            <a href=""><i class="fa fa-plus btn-add-debt"></i>   Add Debt</a>
+                        </td>
+                    </tr>
+                </tbody>
             </table>
-            <div>
-                <input type="button" id="btn_add_debt" class="btn btn-success" value="Add Debt"/>
-            </div>
             <br />
 
             <p><strong>Unusually high expenses for parenting time, contact with, or access to a child.</strong></p>
@@ -686,10 +690,14 @@
                         </tr>
                     {% endif %}
                 </tbody>
+                <tbody>
+                    <tr>
+                        <td class="btn-add-expense fact-sheet-control" colspan="2" readonly>
+                            <a href=""><i class="fa fa-plus btn-add-expense"></i>   Add Expense</a>
+                        </td>
+                    </tr>
+                </tbody>
             </table>
-            <div>
-                <input type="button" id="btn_add_expense" class="btn btn-success" value="Add Expense"/>
-            </div>
 
 
             <br />
@@ -723,10 +731,14 @@
                         </tr>
                     {% endif %}
                 </tbody>
+                <tbody>
+                    <tr>
+                        <td class="btn-add-supporting-non-dependent fact-sheet-control" colspan="3" readonly>
+                            <a href=""><i class="fa fa-plus btn-add-supporting-non-dependent"></i>   Add Person</a>
+                        </td>
+                    </tr>
+                </tbody>
             </table>
-            <div>
-                <input type="button" id="btn_add_supporting_non_dependent" class="btn btn-success" value="Add Person"/>
-            </div>
 
             <br />
             <p><strong>Supporting dependent child/children from another relationship.</strong></p>
@@ -761,10 +773,14 @@
                         </tr>
                     {% endif %}
                 </tbody>
+                <tbody>
+                    <tr>
+                        <td class="btn-add-supporting-dependent fact-sheet-control" colspan="3" readonly>
+                            <a href=""><i class="fa fa-plus btn-add-supporting-dependent"></i>   Add Person</a>
+                        </td>
+                    </tr>
+                </tbody>
             </table>
-            <div>
-                <input type="button" id="btn_add_supporting_dependent" class="btn btn-success" value="Add Person"/>
-            </div>
 
             <br />
             <p><strong>Support for a disabled or ill person.</strong></p>
@@ -794,10 +810,15 @@
                         </tr>
                     {% endif %}
                 </tbody>
+                <tbody>
+                    <tr>
+                        <td class="btn-add-supporting-disabled fact-sheet-control" colspan="3" readonly>
+                            <a href=""><i class="fa fa-plus btn-add-supporting-disabled"></i>   Add Person</a>
+                        </td>
+                    </tr>
+                </tbody>
             </table>
-            <div class="form-group">
-                <input type="button" id="btn_add_supporting_disabled" class="btn btn-success" value="Add Person"/>
-            </div>
+
 
             <p>Other undue hardship circumstances</p>
             {% input_field type="textarea" name="undue_hardship" value="" maxlength="500"  multiple='true' class="fact-sheet-input form-control" placeholder="" %}
@@ -841,10 +862,15 @@
                         </td>
                     </tr>
                 </tbody>
+                <tbody>
+                    <tr>
+                        <td class="btn-add-income-others fact-sheet-control" colspan="2" readonly>
+                            <a href="" tabindex="-1"><i class="fa fa-plus btn-add-income-others"></i>   Add Person</a>
+                        </td>
+                    </tr>
+                </tbody>
             </table>
-            <div>
-                <input type="button" id="btn_add_income_others" class="btn btn-success" value="Add Person"/>
-            </div>
+
             <div id="undue_amount_question" hidden></div>
         </div>
     </div>

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

@@ -14,7 +14,7 @@
 <div class="question-well children-list">
     <table id="claimant_children" class="list-builder">
         <thead>
-            <tr class="">
+            <tr>
                 <th class="table-bordered">Child's Name</th>
                 <th class="table-bordered">Birth date</th>
                 <th class="table-bordered">Child now living with</th>