DIV-350 applied design to dashboard

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

@@ -803,7 +803,8 @@ textarea {
 /* Side Progress Navigation */
 
 .progress-column,
-.dashnav-column {
+.dashnav-column,
+.overview-progress {
 	h4 {
 		color: $color-grey-dark;
 		padding: 0 18px;
@@ -820,7 +821,9 @@ textarea {
 		margin-bottom: 12px;
 		padding: 0 12px 0 18px;
 		.progress-icon {
-			width: 46px;
+			-webkit-box-flex: 0;
+			    -ms-flex: 0 0 46px;
+			        flex: 0 0 46px;
 			i {
 				font-size: 20px;
 				border: solid 1px $color-grey-dark;
@@ -880,13 +883,78 @@ textarea {
 	}
 }
 
+.overview-progress {
+	border: solid 1px $color-grey-lighter;
+	.progress-question {
+		margin-bottom: 0;
+		border-bottom: solid 1px $color-grey-lighter;
+		&:last-of-type {
+			border-bottom: none;
+		}
+		.progress-icon {
+			-webkit-box-flex: 0;
+			    -ms-flex: 0 0 52px;
+			        flex: 0 0 52px;
+		}
+		.progress-content {
+			font-size: 16px;
+			font-weight: 600;
+			-webkit-box-flex: 2;
+			    -ms-flex: 2;
+			        flex: 2;
+		}
+		.progress-status {
+			font-size: 14px;
+			font-weight: 600;
+			-webkit-box-flex: 1;
+			    -ms-flex: 1;
+			        flex: 1;
+			i {
+				float: none;
+				margin-right: 5px;
+			}
+		}
+		&.complete {
+			background-color: rgba($color-green, .2);
+			.progress-icon i,
+			.progress-icon i:before,
+			.progress-content,
+			.progress-status {
+				color: $color-green;
+			}
+		}
+		.progress-icon i,
+		.progress-icon i::before,
+		.progress-content,
+		.progress-status {
+			color: $brand-blue;
+		}
+		&:hover, &:focus {
+			background-color: rgba($brand-blue, .3);
+			text-decoration: none;
+			.progress-icon i,
+			.progress-icon i::before,
+			.progress-content,
+			.progress-status,
+			.progress-status i {
+				color: $brand-blue;
+			}
+			.progress-icon i {
+				border: solid 1px $brand-blue;
+			}
+		}
+	}
+}
+
 .dashnav-column {
 	h4 {
 		color: #ffffff;
 	}
 	.progress-question {
 		.progress-icon {
-			width: 36px;
+			-webkit-box-flex: 0;
+			    -ms-flex: 0 0 36px;
+			        flex: 0 0 36px;
 			i {
 				font-size: 20px;
 				border: none;

edivorce/apps/core/templates/overview.html

@@ -8,50 +8,51 @@
 
 {% block content %}
 
-<h3>Answer the Questions Related to Your Divorce Questionnaire</h3>
-<div class="progress-column">
+<h1>Answer the Questions Related to Your Divorce Questionnaire</h1>
+
+<div class="overview-progress">
     <a href="{% url 'prequalification' '01' %}" class="progress-question complete">
         <span class="progress-icon"><i class="fa fa-share-alt" aria-hidden="true"></i></span>
         <span class="progress-content">Qualifying Questions</span>
-        <span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i></span>
+        <span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i> Completed</span>
     </a>
     <a href="{% url 'question_steps' 'orders' %}" class="progress-question {% if step_status.which_orders == 'Complete' %} 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></span>
-        {% elif step_status.which_orders == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i></span> {% endif %}
+        {% 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 %}
     </a>
     <a href="{% url 'question_steps' 'claimant' %}" class="progress-question {% if step_status.your_information == 'Complete' %} 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></span>
-        {% elif step_status.your_information == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i></span> {% endif %}
+        {% 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 %}
     </a>
     <a href="{% url 'question_steps' 'respondent' %}" class="progress-question {% if step_status.your_spouse == 'Complete' %} 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></span>
-        {% elif step_status.your_spouse == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i></span> {% endif %}
+        {% 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 %}
     </a>
     <a href="{% url 'question_steps' 'marriage' %}" class="progress-question {% if step_status.your_marriage == 'Complete' %} 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></span>
-        {% elif step_status.your_marriage == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i></span> {% endif %}
+        {% 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 %}
     </a>
     <a href="{% url 'question_steps' 'separation' %}" class="progress-question {% if step_status.your_separation == 'Complete' %} 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></span>
-        {% elif step_status.your_separation == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i></span> {% endif %}
+        {% 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 %}
     </a>
 
     {% if 'Spousal support' in which_orders.0.value|load_json %}
     <a href="{% url 'question_steps' 'support' %}" class="progress-question {% 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 6</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 %}
+        {% 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 %}
     </a>
     {% endif %}
 
@@ -59,8 +60,8 @@
     <a href="{% url 'question_steps' 'property' %}" class="progress-question {% if step_status.property_and_debt == 'Complete' %} 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></span>
-        {% elif step_status.property_and_debt == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i></span> {% endif %}
+        {% 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 %}
     </a>
     {% endif %}
 
@@ -68,22 +69,22 @@
     <a href="{% url 'question_steps' 'other_orders' %}" class="progress-question {% if step_status.other_orders == 'Complete' %} 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></span>
-        {% elif step_status.other_orders == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i></span> {% endif %}
+        {% 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 %}
     </a>
     {% endif %}
 
     <a href="{% url 'question_steps' 'other_questions' %}" class="progress-question {% if step_status.other_questions == 'Complete' %} 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></span>
-        {% elif step_status.other_questions == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i></span> {% endif %}
+        {% 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 %}
     </a>
     <a href="{% url 'question_steps' 'location' %}" class="progress-question {% if step_status.filing_locations == 'Complete' %} 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></span>
-        {% elif step_status.filing_locations == 'Complete' %}<span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i></span> {% endif %}
+        {% 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 %}
     </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>