Merge pull request #96 from bcgov/DIV-1018

DIV-1018: Update side nav / progress indicator

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

@@ -1,8 +1,8 @@
 /* compileCompressed: $1.css*/
 $body-copy: #494949;
 $brand-blue: #042553;
-$brand-gold: #dea61b;
-$brand-titles: #19355b;
+$brand-gold: #fcba19;
+$brand-titles: #003366;
 $brand-links: #365ebe;
 /*#2b5580;*/
 $brand-buttons: $brand-links;
@@ -16,7 +16,8 @@ $color-grey-light: #d5d5d5;
 $color-grey-lighter: #efefef;
 $color-grey-lightest: #fdfdfd;
 $color-green: #57b26a;
-$color-green-light: #d9f6df;
+$color-green-light: #d5e6d8;
+$color-green-dark: #246A33;
 $color-gold-light: #e6ca85;
 $color-red: #D8292F;
 $color-red-light: #F7D4D5;
@@ -1434,8 +1435,8 @@ textarea {
 
     .dashnav-column {
         -webkit-box-flex: 0;
-        -ms-flex: 0 0 280px;
-        flex: 0 0 280px;
+        -ms-flex: 0 0 290px;
+        flex: 0 0 289px;
         background-color: $brand-titles;
         -webkit-box-ordinal-group: 3;
         -ms-flex-order: 2;
@@ -1601,7 +1602,7 @@ textarea {
 .overview-progress,
 .progress-column {
 	h4 {
-		color: $color-grey-dark;
+		color: $color-blue-dark;
 		padding: 0 18px;
 		margin-top: 36px;
 		font-size: 14px;
@@ -1609,24 +1610,25 @@ textarea {
 	}
 
 	.progress-question {
-		display: -webkit-box;
-		display: -ms-flexbox;
-		display: flex;
-		-webkit-box-align: center;
-		-ms-flex-align: center;
-		align-items: center;
-		height: 72px;
-		margin-bottom: 12px;
-		padding: 0 18px;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        height: 70px;
+        margin-bottom: 12px;
+        padding: 0 24px;
+        font-weight: bold;
 
-		.progress-icon {
+        .progress-icon {
 			-webkit-box-flex: 0;
 			-ms-flex: 0 0 46px;
-			flex: 0 0 46px;
+			flex: 0 0 50px;
 
 			i {
 				font-size: 20px;
-				border: solid 1px $color-grey-dark;
+				border: solid 1px $color-blue-dark;
 				padding: 8px;
 				border-radius: 36px;
 
@@ -1643,7 +1645,6 @@ textarea {
 			width: 190px;
 			font-size: 14px;
 			line-height: 1.3;
-			color: $body-copy;
 			@media (min-width: 1920px) {
 				font-size: 16px;
 				width: 190px;
@@ -1652,29 +1653,22 @@ textarea {
 			small {
 				font-size: 11px;
 				text-transform: uppercase;
-				font-weight: 700;
+				font-weight: bolder;
 				letter-spacing: 0.1em;
 			}
 		}
 
-		.progress-status {
-			width: 28px;
-			text-align: right;
-
-			i {
-				float: right;
-			}
-		}
-
-		i {
-			color: $color-grey-dark;
-		}
+        i,
+        span {
+            color: $color-blue-dark;
+            border-color: $color-blue-dark;
+        }
 
 		&.complete {
 			i,
 			span {
-				color: $color-green;
-				border-color: $color-green;
+				color: $color-green-dark;
+				border-color: $color-green-dark;
 			}
 		}
 
@@ -1682,33 +1676,36 @@ textarea {
 		&:hover {
 			background-color: $color-gold-light;
 			text-decoration: none;
-
-			i,
-			span {
-				color: #ffffff;
-				border-color: #ffffff;
-			}
-		}
+        }
 
 		&.active {
 			background-color: $brand-gold;
 			text-decoration: none;
-
-			i,
-			span {
-				color: #ffffff;
-				border-color: #ffffff;
-			}
 		}
 	}
 
+    .progress-status {
+        width: 28px;
+        text-align: right;
+
+        i {
+            float: right;
+
+            &.incomplete, &.skipped {
+                color: $color-red-dark;
+            }
+            &.complete {
+                color: $color-green-dark;
+            }
+        }
+    }
 	.progress-sub-menu {
 
 		list-style-type: none;
 
 		li {
 			display:inline-block;
-    		padding: 5px 10px 5px 22px;
+    		padding: 5px 24px 5px 22px;
 			border-left:2px solid $brand-gold;
 			width: 100%;
 		}
@@ -1718,7 +1715,7 @@ textarea {
 			width: 190px;
 			font-size: 14px;
 			line-height: 1.3;
-			color: $body-copy;
+			color: $color-blue-dark;
 
 			@media (min-width: 1920px) {
 				font-size: 16px;
@@ -1728,6 +1725,7 @@ textarea {
 			.progress-content {
 				width: 190px;
 				font-size: 14px;
+                font-weight: bold;
 				line-height: 1.3;
 				@media (min-width: 1920px) {
 					font-size: 16px;
@@ -1740,11 +1738,16 @@ textarea {
 				color: $brand-gold;
 				text-decoration: none;
 				font-weight: 700;
-			}
+
+                &.active {
+                    border-bottom: 1px solid $brand-gold;
+                }
+            }
 
 			&.active {
-				color: $brand-gold;
 				text-decoration: none;
+                padding-bottom: 4px;
+                border-bottom: 1px solid $color-blue-dark;
 				font-weight: 700;
 			}
 		}
@@ -1756,13 +1759,13 @@ textarea {
 }
 
 .overview-progress {
-	border: solid 1px $color-grey-lighter;
+	border: solid 1px $color-grey-light;
 	border-radius: 10px;
 	background: #ffffff;
 
 	.progress-question {
 		margin-bottom: 0;
-		border-bottom: solid 1px $color-grey-lighter;
+		border-bottom: solid 1px $color-grey-light;
 
 		&:last-of-type {
 			border-bottom: none;
@@ -1790,62 +1793,31 @@ textarea {
 			flex: 1;
 
 			i {
-				float: none;
-				margin-right: 5px;
+                font-size: 20px;
+                float: none;
+				margin-left: 16px;
+                vertical-align: middle;
 			}
 		}
 
 		&.complete {
-			background-color: rgba($color-green, .2);
-
-			.progress-content,
-			.progress-icon i,
-			.progress-icon i:before,
-			.progress-status,
-			.progress-status i {
-				color: $color-green;
-			}
-
-			.progress-icon i {
-				border: solid 1px $color-green;
-			}
-		}
-
-		.progress-content,
-		.progress-icon i,
-		.progress-icon i::before,
-		.progress-status,
-		.progress-status i {
-			color: $brand-blue;
-		}
-
-		.progress-icon i {
-			border: solid 1px $brand-blue;
-		}
+            background-color: $color-green-light;
+        }
 
 		&:focus,
 		&:hover {
-			background-color: rgba($brand-blue, .3);
+			background-color: $color-blue-lighter;
 			text-decoration: none;
-
-			.progress-content,
-			.progress-icon i,
-			.progress-icon i::before,
-			.progress-status,
-			.progress-status i {
-				color: $brand-blue;
-				border-color: $brand-blue;
-			}
 		}
 
-		&:first-child:hover {
-			border-top-left-radius: 7px;
-			border-top-right-radius: 7px;
+		&:first-child {
+			border-top-left-radius: 9px;
+			border-top-right-radius: 9px;
 		}
 
-		&:last-child:hover {
-			border-bottom-left-radius: 7px;
-			border-bottom-right-radius: 7px;
+		&:last-child {
+			border-bottom-left-radius: 9px;
+			border-bottom-right-radius: 9px;
 		}
 
 		a {
@@ -1883,6 +1855,12 @@ textarea {
 			color: #ffffff;
 		}
 
+        &.active {
+            i, .progress-content {
+                color: $color-blue-dark;
+            }
+        }
+
 		&:focus,
 		&:hover {
 			background-color: $brand-gold;
@@ -1890,6 +1868,24 @@ textarea {
 	}
 }
 
+.progress-column {
+    .progress-question {
+        &.active {
+            &:not(.complete) .progress-icon i {
+                border: solid 1px $color-blue-dark;
+                background-color: $color-blue-dark;
+                color: $brand-gold;
+            }
+
+            &.complete .progress-icon i {
+                border: solid 1px $color-green-dark;
+                background-color: $color-green-dark;
+                color: $brand-gold;
+            }
+        }
+    }
+}
+
 .has-warning-box {
 	border: 3px solid $color-red;
 	padding-top: 8px;

edivorce/apps/core/templates/overview.html

@@ -11,89 +11,77 @@
 <h1>Complete This Divorce Questionnaire</h1>
 
 <div class="overview-progress">
-    <a href="{% url 'prequalification' '01' %}" class="progress-question {% if step_status.prequalification == 'Complete' %} complete {% endif %}">
+    <a href="{% url 'prequalification' '01' %}" class="progress-question {% if step_status.prequalification == 'Completed' %} complete {% endif %}">
         <span class="progress-icon"><i class="fa fa-share-alt" aria-hidden="true"></i></span>
         <span class="progress-content">Qualifying Questions</span>
-        {% if step_status.prequalification == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i> Started</span>
-        {% elif step_status.prequalification == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i> Completed</span> {% endif %}
+        {% include "partials/progress_icon.html" with step_status_string=step_status.prequalification with_status=True %}
     </a>
-    <a href="{% url 'question_steps' 'orders' %}" class="progress-question {% if step_status.which_orders == 'Complete' %} complete {% endif %}">
+    <a href="{% url 'question_steps' 'orders' %}" class="progress-question {% if step_status.which_orders == 'Completed' %} complete {% endif %}">
         <span class="progress-icon"><i class="fa fa-commenting" aria-hidden="true"></i></span>
         <span class="progress-content"><small>Step 1</small><br />What Are You Asking For?</span>
-        {% if step_status.which_orders == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i> Started</span>
-        {% elif step_status.which_orders == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i> Completed</span> {% endif %}
+        {% include "partials/progress_icon.html" with step_status_string=step_status.which_orders with_status=True %}
     </a>
-    <a href="{% url 'question_steps' 'claimant' %}" class="progress-question {% if step_status.your_information == 'Complete' %} complete {% endif %}">
+    <a href="{% url 'question_steps' 'claimant' %}" class="progress-question {% if step_status.your_information == 'Completed' %} complete {% endif %}">
         <span class="progress-icon"><i class="fa fa-info" aria-hidden="true"></i></span>
         <span class="progress-content"><small>Step 2</small><br />Your information</span>
-        {% if step_status.your_information == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i> Started</span>
-        {% elif step_status.your_information == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i> Completed</span> {% endif %}
+        {% include "partials/progress_icon.html" with step_status_string=step_status.your_information with_status=True %}
     </a>
-    <a href="{% url 'question_steps' 'respondent' %}" class="progress-question {% if step_status.your_spouse == 'Complete' %} complete {% endif %}">
+    <a href="{% url 'question_steps' 'respondent' %}" class="progress-question {% if step_status.your_spouse == 'Completed' %} complete {% endif %}">
         <span class="progress-icon"><i class="fa fa-user" aria-hidden="true"></i></span>
         <span class="progress-content"><small>Step 3</small><br />Your spouse</span>
-        {% if step_status.your_spouse == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i> Started</span>
-        {% elif step_status.your_spouse == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i> Completed</span> {% endif %}
+        {% include "partials/progress_icon.html" with step_status_string=step_status.your_spouse with_status=True %}
     </a>
-    <a href="{% url 'question_steps' 'marriage' %}" class="progress-question {% if step_status.your_marriage == 'Complete' %} complete {% endif %}">
+    <a href="{% url 'question_steps' 'marriage' %}" class="progress-question {% if step_status.your_marriage == 'Completed' %} complete {% endif %}">
         <span class="progress-icon"><i class="fa fa-link" aria-hidden="true"></i></span>
         <span class="progress-content"><small>Step 4</small><br />Your marriage</span>
-        {% if step_status.your_marriage == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i> Started</span>
-        {% elif step_status.your_marriage == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i> Completed</span> {% endif %}
+        {% include "partials/progress_icon.html" with step_status_string=step_status.your_marriage with_status=True %}
     </a>
-    <a href="{% url 'question_steps' 'separation' %}" class="progress-question {% if step_status.your_separation == 'Complete' %} complete {% endif %}">
+    <a href="{% url 'question_steps' 'separation' %}" class="progress-question {% if step_status.your_separation == 'Completed' %} complete {% endif %}">
         <span class="progress-icon"><i class="fa fa-chain-broken" aria-hidden="true"></i></span>
         <span class="progress-content"><small>Step 5</small><br />Your separation</span>
-        {% if step_status.your_separation == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i> Started</span>
-        {% elif step_status.your_separation == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i> Completed</span> {% endif %}
+        {% include "partials/progress_icon.html" with step_status_string=step_status.your_separation with_status=True %}
     </a>
     {% if children_of_marriage == 'YES' or derived.has_children_of_marriage %}
-    <a href="{% url 'question_steps' 'children' 'your_children'%}" class="progress-question {% if step_status.your_children == 'Complete' %} complete {% endif %}">
+    <a href="{% url 'question_steps' 'children' 'your_children'%}" class="progress-question {% if step_status.your_children == 'Completed' %} complete {% endif %}">
         <span class="progress-icon"><i class="fa fa-users" aria-hidden="true"></i></span>
         <span class="progress-content"><small>Step {% step_order step="children" %}</small><br />Your children</span>
-        {% if step_status.your_children == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i> Started</span>
-        {% elif step_status.your_children == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i> Completed</span> {% endif %}
+        {% include "partials/progress_icon.html" with step_status_string=step_status.your_children with_status=True %}
     </a>
     {% endif %}
 
     {% if 'Spousal support' in which_orders.0.value|load_json %}
-    <a href="{% url 'question_steps' 'support' %}" class="progress-question {% if step_status.spousal_support == 'Complete' %} complete {% endif %}">
+    <a href="{% url 'question_steps' 'support' %}" class="progress-question {% if step_status.spousal_support == 'Completed' %} complete {% endif %}">
         <span class="progress-icon"><i class="fa fa-life-ring" aria-hidden="true"></i></span>
         <span class="progress-content"><small>Step {% step_order step="support" %}</small><br />Spousal support</span>
-        {% if step_status.spousal_support == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i> Started</span>
-        {% elif step_status.spousal_support == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i> Completed</span> {% endif %}
+        {% include "partials/progress_icon.html" with step_status_string=step_status.spousal_support with_status=True %}
     </a>
     {% endif %}
 
     {% if 'Division of property and debts' in which_orders.0.value|load_json %}
-    <a href="{% url 'question_steps' 'property' %}" class="progress-question {% if step_status.property_and_debt == 'Complete' %} complete {% endif %}">
+    <a href="{% url 'question_steps' 'property' %}" class="progress-question {% if step_status.property_and_debt == 'Completed' %} complete {% endif %}">
         <span class="progress-icon"><i class="fa fa-home" aria-hidden="true"></i></span>
         <span class="progress-content"><small>Step {% step_order step="property" %}</small><br />Property and debt</span>
-        {% if step_status.property_and_debt == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i> Started</span>
-        {% elif step_status.property_and_debt == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i> Completed</span> {% endif %}
+        {% include "partials/progress_icon.html" with step_status_string=step_status.property_and_debt with_status=True %}
     </a>
     {% endif %}
 
     {% if 'Other orders' in which_orders.0.value|load_json %}
-    <a href="{% url 'question_steps' 'other_orders' %}" class="progress-question {% if step_status.other_orders == 'Complete' %} complete {% endif %}">
+    <a href="{% url 'question_steps' 'other_orders' %}" class="progress-question {% if step_status.other_orders == 'Completed' %} complete {% endif %}">
         <span class="progress-icon"><i class="fa fa-gavel" aria-hidden="true"></i></span>
         <span class="progress-content"><small>Step {% step_order step="other_orders" %}</small><br />Other orders</span>
-        {% if step_status.other_orders == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i> Started</span>
-        {% elif step_status.other_orders == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i> Completed</span> {% endif %}
+        {% include "partials/progress_icon.html" with step_status_string=step_status.other_orders with_status=True %}
     </a>
     {% endif %}
 
-    <a href="{% url 'question_steps' 'other_questions' %}" class="progress-question {% if step_status.other_questions == 'Complete' %} complete {% endif %}">
+    <a href="{% url 'question_steps' 'other_questions' %}" class="progress-question {% if step_status.other_questions == 'Completed' %} complete {% endif %}">
         <span class="progress-icon"><i class="fa fa-question" aria-hidden="true"></i></span>
         <span class="progress-content"><small>Step {% step_order step="other_questions" %}</small><br />Other questions</span>
-        {% if step_status.other_questions == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i> Started</span>
-        {% elif step_status.other_questions == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i> Completed</span> {% endif %}
+        {% include "partials/progress_icon.html" with step_status_string=step_status.other_questions with_status=True %}
     </a>
-    <a href="{% url 'question_steps' 'location' %}" class="progress-question {% if step_status.filing_locations == 'Complete' %} complete {% endif %}">
+    <a href="{% url 'question_steps' 'location' %}" class="progress-question {% if step_status.filing_locations == 'Completed' %} complete {% endif %}">
         <span class="progress-icon"><i class="fa fa-location-arrow" aria-hidden="true"></i></span>
         <span class="progress-content"><small>Step {% step_order step="location" %}</small><br />Filing location</span>
-        {% if step_status.filing_locations == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i> Started</span>
-        {% elif step_status.filing_locations == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i> Completed</span> {% endif %}
+        {% include "partials/progress_icon.html" with step_status_string=step_status.filing_locations with_status=True %}
     </a>
     <a href="{% url 'question_steps' 'review' %}" class="progress-question {% if active_page == 'review' %} active {% endif %}">
         <span class="progress-icon"><i class="fa fa-file" aria-hidden="true"></i></span>

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

@@ -6,122 +6,113 @@
     <a href="{% url 'prequalification' '01' %}" class="progress-question complete {% if active_page == 'prequalification' %} active {% endif %}">
         <span class="progress-icon"><i class="fa fa-share-alt" aria-hidden="true"></i></span>
         <span class="progress-content">Qualifying Questions</span>
-        {% if step_status.prequalification == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i></span>
-        {% elif step_status.prequalification == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i></span> {% endif %}
+    {% include "partials/progress_icon.html" with step_status_string=step_status.prequalification %}
     </a>
-    <a href="{% url 'question_steps' 'orders' %}" class="progress-question {% if step_status.which_orders == 'Complete' %} complete {% endif %} {% if active_page == 'orders' %} active {% endif %}">
+    <a href="{% url 'question_steps' 'orders' %}" class="progress-question {% if step_status.which_orders == 'Completed' %} complete {% endif %} {% if active_page == 'orders' %} active {% endif %}">
         <span class="progress-icon"><i class="fa fa-commenting" aria-hidden="true"></i></span>
         <span class="progress-content"><small>Step 1</small><br />What Are You Asking For?</span>
-        {% if step_status.which_orders == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i></span>
-        {% elif step_status.which_orders == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i></span> {% endif %}
+        {% include "partials/progress_icon.html" with step_status_string=step_status.which_orders %}
     </a>
-    <a href="{% url 'question_steps' 'claimant' %}" class="progress-question {% if step_status.your_information == 'Complete' %} complete {% endif %} {% if active_page == 'claimant' %} active {% endif %}">
+    <a href="{% url 'question_steps' 'claimant' %}" class="progress-question {% if step_status.your_information == 'Completed' %} complete {% endif %} {% if active_page == 'claimant' %} active {% endif %}">
         <span class="progress-icon"><i class="fa fa-info" aria-hidden="true"></i></span>
         <span class="progress-content"><small>Step 2</small><br />Your information (Claimant 1)</span>
-        {% if step_status.your_information == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i></span>
-        {% elif step_status.your_information == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i></span> {% endif %}
+        {% include "partials/progress_icon.html" with step_status_string=step_status.your_information %}
     </a>
-    <a href="{% url 'question_steps' 'respondent' %}" class="progress-question {% if step_status.your_spouse == 'Complete' %} complete {% endif %} {% if active_page == 'respondent' %} active {% endif %}">
+    <a href="{% url 'question_steps' 'respondent' %}" class="progress-question {% if step_status.your_spouse == 'Completed' %} complete {% endif %} {% if active_page == 'respondent' %} active {% endif %}">
         <span class="progress-icon"><i class="fa fa-user" aria-hidden="true"></i></span>
         <span class="progress-content"><small>Step 3</small><br />Your spouse (Claimant 2)</span>
-        {% if step_status.your_spouse == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i></span>
-        {% elif step_status.your_spouse == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i></span> {% endif %}
+        {% include "partials/progress_icon.html" with step_status_string=step_status.your_spouse%}
     </a>
-    <a href="{% url 'question_steps' 'marriage' %}" class="progress-question {% if step_status.your_marriage == 'Complete' %} complete {% endif %} {% if active_page == 'marriage' %} active {% endif %}">
+    <a href="{% url 'question_steps' 'marriage' %}" class="progress-question {% if step_status.your_marriage == 'Completed' %} complete {% endif %} {% if active_page == 'marriage' %} active {% endif %}">
         <span class="progress-icon"><i class="fa fa-link" aria-hidden="true"></i></span>
         <span class="progress-content"><small>Step 4</small><br />Your marriage</span>
-        {% if step_status.your_marriage == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i></span>
-        {% elif step_status.your_marriage == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i></span> {% endif %}
+        {% include "partials/progress_icon.html" with step_status_string=step_status.your_marriage%}
     </a>
-    <a href="{% url 'question_steps' 'separation' %}" class="progress-question {% if step_status.your_separation == 'Complete' %} complete {% endif %} {% if active_page == 'separation' %} active {% endif %}">
+    <a href="{% url 'question_steps' 'separation' %}" class="progress-question {% if step_status.your_separation == 'Completed' %} complete {% endif %} {% if active_page == 'separation' %} active {% endif %}">
         <span class="progress-icon"><i class="fa fa-chain-broken" aria-hidden="true"></i></span>
         <span class="progress-content"><small>Step 5</small><br />Your separation</span>
-        {% if step_status.your_separation == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i></span>
-        {% elif step_status.your_separation == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i></span> {% endif %}
+        {% include "partials/progress_icon.html" with step_status_string=step_status.your_separation%}
     </a>
 
     {% if children_of_marriage == 'YES' or derived.has_children_of_marriage %}
-    <a href="{% url 'question_steps' 'children' 'your_children' %}" class="progress-question collapse-trigger {% if step_status.your_children == 'Complete' %} complete {% endif %} {% if active_page == 'children' %} active {% endif %}"
+    <a href="{% url 'question_steps' 'children' 'your_children' %}" class="progress-question collapse-trigger {% if step_status.your_children == 'Completed' %} complete {% endif %} {% if active_page == 'children' %} active {% endif %}"
        data-toggle="collapse" aria-expanded="false" data-target="#children_nav" aria-controls="children_nav">
         <span class="progress-icon"><i class="fa fa-users" aria-hidden="true"></i></span>
         <span class="progress-content"><small>Step {% step_order step="children" %}</small><br />Your children</span>
-        {% if step_status.your_children == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i></span>
-        {% elif step_status.your_children == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i></span> {% endif %}
+        {% include "partials/progress_icon.html" with step_status_string=step_status.your_children%}
     </a>
 
-    <ul class="collapse {% if active_page == 'children' %} in {% endif %} progress-sub-menu" id="children_nav">
+    <ul class="collapse {% if active_page == 'children' %}in {% endif %}progress-sub-menu" id="children_nav">
         <li>
             <a href="{% url 'question_steps' 'children' 'your_children'%}" class="progress-sub-question {% if sub_step == 'your_children' %} active {% endif %}">
                 <span class="progress-content">Children details</span>
             </a>
+            {% include "partials/progress_icon.html" with step_status_string=step_status.children__your_children %}
         </li>
         <li>
             <a href="{% url 'question_steps' 'children' 'income_expenses'%}" class="progress-sub-question {% if sub_step == 'income_expenses' %} active {% endif %}">
                 <span class="progress-content">Income & expenses</span>
             </a>
+            {% include "partials/progress_icon.html" with step_status_string=step_status.children__income_expenses %}
         </li>
         <li>
             <a href="{% url 'question_steps' 'children' 'facts'%}" class="progress-sub-question {% if sub_step == 'facts' %} active {% endif %}">
                 <span class="progress-content">Payor & Fact sheets</span>
             </a>
+            {% include "partials/progress_icon.html" with step_status_string=step_status.children__facts %}
         </li>
         <li>
             <a href="{% url 'question_steps' 'children' 'payor_medical'%}" class="progress-sub-question {% if sub_step == 'payor_medical' %} active {% endif %}">
                 <span class="progress-content">Medical & other expenses</span>
             </a>
+            {% include "partials/progress_icon.html" with step_status_string=step_status.children__payor_medical %}
         </li>
         <li>
             <a href="{% url 'question_steps' 'children' 'what_for'%}" class="progress-sub-question {% if sub_step == 'what_for' %} active {% endif %}">
                 <span class="progress-content">What are you asking for</span>
             </a>
+            {% include "partials/progress_icon.html" with step_status_string=step_status.children__what_for %}
         </li>
 
     </ul>
     {% endif %}
 
     {% if 'Spousal support' in want_which_orders|load_json or 'Spousal support' in which_orders.0.value|load_json %}
-    <a href="{% url 'question_steps' 'support' %}" class="progress-question {% if step_status.spousal_support == 'Complete' %} complete {% endif %} {% if active_page == 'support' %} active {% endif %}">
+    <a href="{% url 'question_steps' 'support' %}" class="progress-question {% if step_status.spousal_support == 'Completed' %} complete {% endif %} {% if active_page == 'support' %} active {% endif %}">
         <span class="progress-icon"><i class="fa fa-life-ring" aria-hidden="true"></i></span>
         <span class="progress-content"><small>Step {% step_order step="support" %}</small><br />Spousal support</span>
-        {% if step_status.spousal_support == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i></span>
-        {% elif step_status.spousal_support == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i></span> {% endif %}
+        {% include "partials/progress_icon.html" with step_status_string=step_status.spousal_support%}
     </a>
     {% endif %}
 
     {% if 'Division of property and debts' in want_which_orders|load_json or 'Division of property and debts' in which_orders.0.value|load_json %}
-    <a href="{% url 'question_steps' 'property' %}" class="progress-question {% if step_status.property_and_debt == 'Complete' %} complete {% endif %} {% if active_page == 'property' %} active {% endif %}">
+    <a href="{% url 'question_steps' 'property' %}" class="progress-question {% if step_status.property_and_debt == 'Completed' %} complete {% endif %} {% if active_page == 'property' %} active {% endif %}">
         <span class="progress-icon"><i class="fa fa-home" aria-hidden="true"></i></span>
         <span class="progress-content"><small>Step {% step_order step="property" %}</small><br />Property and debt</span>
-        {% if step_status.property_and_debt == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i></span>
-        {% elif step_status.property_and_debt == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i></span> {% endif %}
+        {% include "partials/progress_icon.html" with step_status_string=step_status.property_and_debt%}
     </a>
     {% endif %}
 
     {% if 'Other orders' in want_which_orders|load_json or 'Other orders' in which_orders.0.value|load_json %}
-    <a href="{% url 'question_steps' 'other_orders' %}" class="progress-question {% if step_status.other_orders == 'Complete' %} complete {% endif %} {% if active_page == 'other_orders' %} active {% endif %}">
+    <a href="{% url 'question_steps' 'other_orders' %}" class="progress-question {% if step_status.other_orders == 'Completed' %} complete {% endif %} {% if active_page == 'other_orders' %} active {% endif %}">
         <span class="progress-icon"><i class="fa fa-gavel" aria-hidden="true"></i></span>
         <span class="progress-content"><small>Step {% step_order step="other_orders" %}</small><br />Other orders</span>
-        {% if step_status.other_orders == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i></span>
-        {% elif step_status.other_orders == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i></span> {% endif %}
+        {% include "partials/progress_icon.html" with step_status_string=step_status.other_orders%}
     </a>
     {% endif %}
 
-    <a href="{% url 'question_steps' 'other_questions' %}" class="progress-question {% if step_status.other_questions == 'Complete' %} complete {% endif %} {% if active_page == 'other_questions' %} active {% endif %}">
+    <a href="{% url 'question_steps' 'other_questions' %}" class="progress-question {% if step_status.other_questions == 'Completed' %} complete {% endif %} {% if active_page == 'other_questions' %} active {% endif %}">
         <span class="progress-icon"><i class="fa fa-question" aria-hidden="true"></i></span>
         <span class="progress-content"><small>Step {% step_order step="other_questions" %}</small><br />Other questions</span>
-        {% if step_status.other_questions == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i></span>
-        {% elif step_status.other_questions == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i></span> {% endif %}
+        {% include "partials/progress_icon.html" with step_status_string=step_status.other_questions%}
     </a>
-    <a href="{% url 'question_steps' 'location' %}" class="progress-question {% if step_status.filing_locations == 'Complete' %} complete {% endif %} {% if active_page == 'location' %} active {% endif %}">
+    <a href="{% url 'question_steps' 'location' %}" class="progress-question {% if step_status.filing_locations == 'Completed' %} complete {% endif %} {% if active_page == 'location' %} active {% endif %}">
         <span class="progress-icon"><i class="fa fa-location-arrow" aria-hidden="true"></i></span>
         <span class="progress-content"><small>Step {% step_order step="location" %}</small><br />Filing location</span>
-        {% if step_status.filing_locations == 'Started' %}<span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i></span>
-        {% elif step_status.filing_locations == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i></span> {% endif %}
+        {% include "partials/progress_icon.html" with step_status_string=step_status.filing_locations%}
     </a>
     <a href="{% url 'question_steps' 'review' %}" class="progress-question {% if active_page == 'review' %} active {% endif %}">
         <span class="progress-icon"><i class="fa fa-file" aria-hidden="true"></i></span>
         <span class="progress-content"><small>Step {% step_order step="review" %}</small><br />Review your answers</span>
     </a>
-
-
 </div>

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

@@ -0,0 +1,9 @@
+<span class="progress-status">
+    {% if with_status and step_status_string != 'Not started' %}
+        {{ step_status_string }}
+    {% endif %}
+    {% if step_status_string == 'Started' %}<i class="fa fa-adjust incomplete" aria-hidden="true"></i>
+    {% elif step_status_string == 'Completed' %}<i class="fa fa-check complete" aria-hidden="true"></i>
+    {% elif step_status_string == 'Skipped' %}<i class="fa fa-circle-o skipped" aria-hidden="true"></i>
+    {% endif %}
+</span>

edivorce/apps/core/templates/question/12_review.html

@@ -31,13 +31,13 @@
     	</div>
     </div>
 </div>
-<div class="question-well step-review {% if step_status.which_orders != 'Complete' %}error{% endif %}">
+<div class="question-well step-review {% if step_status.which_orders != 'Completed' %}error{% endif %}">
 	<div class="collapse-trigger" data-toggle="collapse" aria-expanded="true" data-target="#review_step_1" aria-controls="collapse_changed_name">
 		<div>
 			Step 1: What are you asking for
         </div>
     </div>
-    {% if step_status.which_orders != 'Complete' %}{% include 'partials/incomplete.html' %}{% endif %}
+    {% if step_status.which_orders != 'Completed' %}{% include 'partials/incomplete.html' %}{% endif %}
     <p class="review-buttons"><a class="btn btn-success" href="{% url 'question_steps' 'orders' %}">Edit</a> </p>
     <div class="clearfix"> </div>
 	<div class="collapse in" id="review_step_1">
@@ -47,13 +47,13 @@
 	</div>
 </div>
 
-<div class="question-well step-review {% if step_status.your_information != 'Complete' %}error{% endif %}">
+<div class="question-well step-review {% if step_status.your_information != 'Completed' %}error{% endif %}">
 	<div class="collapse-trigger" data-toggle="collapse" aria-expanded="true" data-target="#review_step_2" aria-controls="collapse_changed_name">
 		<div>
 			Step 2: Your information
         </div>
 	</div>
-    {% if step_status.your_information != 'Complete' %}{% include 'partials/incomplete.html' %}{% endif %}
+    {% if step_status.your_information != 'Completed' %}{% include 'partials/incomplete.html' %}{% endif %}
 	<p class="review-buttons"><a class="btn btn-success" href="{% url 'question_steps' 'claimant' %}">Edit</a> </p>
     <div class="clearfix"> </div>
 	<div class="collapse in" id="review_step_2">
@@ -63,13 +63,13 @@
 	</div>
 </div>
 
-<div class="question-well step-review {% if step_status.your_spouse != 'Complete' %}error{% endif %}">
+<div class="question-well step-review {% if step_status.your_spouse != 'Completed' %}error{% endif %}">
 	<div class="collapse-trigger" data-toggle="collapse" aria-expanded="true" data-target="#review_step_3" aria-controls="collapse_changed_name">
 		<div>
 			Step 3: Your spouse
 		</div>
 	</div>
-    {% if step_status.your_spouse != 'Complete' %}{% include 'partials/incomplete.html' %}{% endif %}
+    {% if step_status.your_spouse != 'Completed' %}{% include 'partials/incomplete.html' %}{% endif %}
     <p class="review-buttons"><a class="btn btn-success" href="{% url 'question_steps' 'respondent' %}">Edit</a> </p>
     <div class="clearfix"> </div>
 	<div class="collapse in" id="review_step_3">
@@ -79,13 +79,13 @@
 	</div>
 </div>
 
-<div class="question-well step-review {% if step_status.your_marriage != 'Complete' %}error{% endif %}">
+<div class="question-well step-review {% if step_status.your_marriage != 'Completed' %}error{% endif %}">
 	<div class="collapse-trigger" data-toggle="collapse" aria-expanded="true" data-target="#review_step_4" aria-controls="collapse_changed_name">
 		<div>
 			Step 4: Your marriage
 		</div>
 	</div>
-    {% if step_status.your_marriage != 'Complete' %}{% include 'partials/incomplete.html' %}{% endif %}
+    {% if step_status.your_marriage != 'Completed' %}{% include 'partials/incomplete.html' %}{% endif %}
     <p class="review-buttons"><a class="btn btn-success" href="{% url 'question_steps' 'marriage' %}">Edit</a> </p>
     <div class="clearfix"> </div>
 	<div class="collapse in" id="review_step_4">
@@ -95,13 +95,13 @@
 	</div>
 </div>
 
-<div class="question-well step-review {% if step_status.your_separation != 'Complete' %}error{% endif %}">
+<div class="question-well step-review {% if step_status.your_separation != 'Completed' %}error{% endif %}">
 	<div class="collapse-trigger" data-toggle="collapse" aria-expanded="true" data-target="#review_step_5" aria-controls="collapse_changed_name">
 		<div>
 			Step 5: Your separation
 		</div>
 	</div>
-    {% if step_status.your_separation != 'Complete' %}{% include 'partials/incomplete.html' %}{% endif %}
+    {% if step_status.your_separation != 'Completed' %}{% include 'partials/incomplete.html' %}{% endif %}
     <p class="review-buttons"><a class="btn btn-success" href="{% url 'question_steps' 'separation' %}">Edit</a> </p>
     <div class="clearfix"> </div>
 	<div class="collapse in" id="review_step_5">
@@ -112,13 +112,13 @@
 </div>
 
 {% if derived.has_children_of_marriage %}
-<div class="question-well step-review {% if step_status.your_children != 'Complete' %}error{% endif %}">
+<div class="question-well step-review {% if step_status.your_children != 'Completed' %}error{% endif %}">
 	<div class="collapse-trigger" data-toggle="collapse" aria-expanded="true" data-target="#review_step_6" aria-controls="collapse_changed_name">
 		<div>
 			Step {% step_order step="children" %}: Your children
 		</div>
 	</div>
-    {% if step_status.your_children != 'Complete' %}{% include 'partials/incomplete.html' %}{% endif %}
+    {% if step_status.your_children != 'Completed' %}{% include 'partials/incomplete.html' %}{% endif %}
     <p class="review-buttons"><a class="btn btn-success" href="{% url 'question_steps' 'children' 'your_children' %}">Edit</a> </p>
     <div class="clearfix"> </div>
 	<div class="collapse in" id="review_step_6">
@@ -130,13 +130,13 @@
 {% endif %}
 
 {% if 'Spousal support' in which_orders.0.value|load_json %}
-<div class="question-well step-review {% if step_status.spousal_support != 'Complete' %}error{% endif %}">
+<div class="question-well step-review {% if step_status.spousal_support != 'Completed' %}error{% endif %}">
 	<div class="collapse-trigger" data-toggle="collapse" aria-expanded="true" data-target="#review_step_7" aria-controls="collapse_changed_name">
 		<div>
 			Step {% step_order step="support" %}: Spousal support
 		</div>
 	</div>
-    {% if step_status.spousal_support != 'Complete' %}{% include 'partials/incomplete.html' %}{% endif %}
+    {% if step_status.spousal_support != 'Completed' %}{% include 'partials/incomplete.html' %}{% endif %}
     <p class="review-buttons"><a class="btn btn-success" href="{% url 'question_steps' 'support' %}">Edit</a> </p>
     <div class="clearfix"> </div>
 	<div class="collapse in" id="review_step_7">
@@ -148,13 +148,13 @@
 {% endif %}
 
 {% if 'Division of property and debts' in which_orders.0.value|load_json %}
-<div class="question-well step-review {% if step_status.property_and_debt != 'Complete' %}error{% endif %}">
+<div class="question-well step-review {% if step_status.property_and_debt != 'Completed' %}error{% endif %}">
     <div class="collapse-trigger" data-toggle="collapse" aria-expanded="true" data-target="#review_step_8" aria-controls="collapse_changed_name">
     	<div>
     		Step {% step_order step="property" %}: Property and debt
     	</div>
     </div>
-    {% if step_status.property_and_debt != 'Complete' %}{% include 'partials/incomplete.html' %}{% endif %}
+    {% if step_status.property_and_debt != 'Completed' %}{% include 'partials/incomplete.html' %}{% endif %}
     <p class="review-buttons"><a class="btn btn-success" href="{% url 'question_steps' 'property' %}">Edit</a> </p>
     <div class="clearfix"> </div>
     <div class="collapse in" id="review_step_8">
@@ -166,13 +166,13 @@
 {% endif %}
 
 {% if 'Other orders' in which_orders.0.value|load_json %}
-<div class="question-well step-review {% if step_status.other_orders != 'Complete' %}error{% endif %}">
+<div class="question-well step-review {% if step_status.other_orders != 'Completed' %}error{% endif %}">
     <div class="collapse-trigger" data-toggle="collapse" aria-expanded="true" data-target="#review_step_9" aria-controls="collapse_changed_name">
     	<div>
     		Step {% step_order step="other_orders" %}: Other orders
     	</div>
     </div>
-    {% if step_status.other_orders != 'Complete' %}{% include 'partials/incomplete.html' %}{% endif %}
+    {% if step_status.other_orders != 'Completed' %}{% include 'partials/incomplete.html' %}{% endif %}
     <p class="review-buttons"><a class="btn btn-success" href="{% url 'question_steps' 'other_orders' %}">Edit</a> </p>
     <div class="clearfix"> </div>
     <div class="collapse in" id="review_step_9">
@@ -183,13 +183,13 @@
 </div>
 {% endif %}
 
-<div class="question-well step-review {% if step_status.other_questions != 'Complete' %}error{% endif %}">
+<div class="question-well step-review {% if step_status.other_questions != 'Completed' %}error{% endif %}">
     <div class="collapse-trigger" data-toggle="collapse" aria-expanded="true" data-target="#review_step_10" aria-controls="collapse_changed_name">
     	<div>
     		Step {% step_order step="other_questions" %}: Other questions
     	</div>
     </div>
-    {% if step_status.other_questions != 'Complete' %}{% include 'partials/incomplete.html' %}{% endif %}
+    {% if step_status.other_questions != 'Completed' %}{% include 'partials/incomplete.html' %}{% endif %}
     <p class="review-buttons"><a class="btn btn-success" href="{% url 'question_steps' 'other_questions' %}">Edit</a> </p>
     <div class="clearfix"> </div>
     <div class="collapse in" id="review_step_10">
@@ -199,13 +199,13 @@
     </div>
 </div>
 
-<div class="question-well step-review {% if step_status.filing_locations != 'Complete' %}error{% endif %}">
+<div class="question-well step-review {% if step_status.filing_locations != 'Completed' %}error{% endif %}">
     <div class="collapse-trigger" data-toggle="collapse" aria-expanded="true" data-target="#review_step_11" aria-controls="collapse_changed_name">
     	<div>
     		Step {% step_order step="location" %}: Filing location
     	</div>
     </div>
-    {% if step_status.filing_locations != 'Complete' %}{% include 'partials/incomplete.html' %}{% endif %}
+    {% if step_status.filing_locations != 'Completed' %}{% include 'partials/incomplete.html' %}{% endif %}
     <p class="review-buttons"><a class="btn btn-success" href="{% url 'question_steps' 'location' %}">Edit</a> </p>
     <div class="clearfix"> </div>
     <div class="collapse in" id="review_step_11">

edivorce/apps/core/utils/question_step_mapping.py

@@ -109,7 +109,6 @@ children_substep_question_mapping = {
         'child_support_arrears_amount',
     },
     'what_for': {
-        'child_support_in_order',
         'order_monthly_child_support_amount',
         'child_support_in_order_reason',
         'claimants_agree_to_child_support_amount',

edivorce/apps/core/utils/step_completeness.py

@@ -35,21 +35,43 @@ def evaluate_numeric_condition(target, reveal_response):
 def get_step_completeness(questions_by_step):
     """
     Accepts a dictionary of {step: [{question__name, question_id, value, error}]} <-- from get_step_responses
-    Returns {step: status}, {step: [missing_question_key]}
+    Returns {step: status, substep: status}
     """
     status_dict = {}
-    for step, questions_dict in questions_by_step.items():
-        if not step_started(questions_dict):
-            status_dict[step] = "Not started"
-        else:
-            complete = is_complete(questions_dict)
-            if complete:
-                status_dict[step] = "Complete"
-            else:
-                status_dict[step] = "Started"
+    has_responses = False
+    reversed_steps = list(question_step_mapping.keys())[::-1]
+    for step in reversed_steps:
+        question_dicts = questions_by_step[step]
+        status, has_responses = _get_step_status(question_dicts, has_responses)
+        status_dict[step] = status
+
+    has_responses = False
+    reversed_substeps = list(children_substep_question_mapping.keys())[::-1]
+    for substep in reversed_substeps:
+        substep_questions = children_substep_question_mapping[substep]
+        question_dicts = [question_data for question_data in questions_by_step['your_children'] if question_data['question_id'] in substep_questions]
+        status, has_responses = _get_step_status(question_dicts, has_responses)
+        status_dict[f'children__{substep}'] = status
+
     return status_dict
 
 
+def _get_step_status(question_dicts, has_responses):
+    if not step_started(question_dicts):
+        if not has_responses:
+            status = "Not started"
+        else:
+            status = "Skipped"
+    else:
+        has_responses = True
+        complete = is_complete(question_dicts)
+        if complete:
+            status = "Completed"
+        else:
+            status = "Started"
+    return status, has_responses
+
+
 def step_started(question_list):
     for question_dict in question_list:
         if get_cleaned_response_value(question_dict['value']):