css design tweaks -- readjusted media query for increasing type size, adjusted print & review form page, modal tweaks and form labels are bolded

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

@@ -44,8 +44,9 @@ body {
 	-moz-osx-font-smoothing: grayscale;
 	min-width: 768px;
 
-	@media (min-width: 1680px) {
+	@media (min-width: 1920px) {
 		font-size: 18px;
+		line-height: 1.5;
 	}
 }
 
@@ -130,6 +131,15 @@ img {
 
 /* Bootstrap Overrides*/
 
+.table>tbody>tr>td,
+.table>tbody>tr>th,
+.table>tfoot>tr>td,
+.table>tfoot>tr>th,
+.table>thead>tr>td,
+.table>thead>tr>th {
+	padding: 12px 16px;
+}
+
 .container-wrapper {
 	padding: 40px 0;
 	&:nth-child(odd) {
@@ -506,7 +516,7 @@ input {
 	&+i.fa {margin-left: 10px;}
 	&.form-block  {
 		display: block;
-		margin-bottom: 10px;
+		margin-bottom: 16px;
 	}
 	&.input-wide {
 		width: 70%;
@@ -525,6 +535,10 @@ input {
 	margin-bottom: 8px;
 }
 
+.checkbox label, .radio label {
+		font-weight: 700;
+}
+
 textarea {
     width: 100%;
 	border-radius: 10px;
@@ -756,6 +770,7 @@ textarea {
 }
 
 .review-well {
+	border-radius: 10px;
 	min-height: 20px;
 	margin-bottom: 10px;
 	border: 1px solid $color-grey-light;
@@ -769,36 +784,59 @@ textarea {
 	.collapse,
 	.collapsing {
 		border-top: 1px solid $color-grey-light;
-		padding: 20px 15px 10px 50px;
+		padding: 24px 47px 24px;
 	}
 	.collapse>div, .collapsing>div {
 	    margin-bottom: 0;
 	}
 	.review-butons {
+		float: left;
+		padding: 0 15px 20px;
+		margin: 0 0 0 32px;
+
+		@media (min-width: 991px) {
 		float: right;
 		padding: 10px 15px;
-    	margin: 0;
+    margin: 0;
+	}
+
+			.fa {
+				color: white;
+				margin-right: 6px;
+			}
 	}
 	.collapse-trigger {
 		margin-bottom: 0;
 		display: inline-block;
+		width: 100%;
+		@media (min-width: 991px) {
+			width: initial;
+		}
+
 		&>div {
 			border-bottom: none;
 			font-size: 18px;
 			font-weight: 600;
+			padding-left: 8px;
+			position: relative;
 			&:before {
 			    font-family: FontAwesome;
 			    font-weight: normal;
 			    font-style: normal;
-			    display: inline-block;
+			    position: absolute;
 			    text-decoration: inherit;
-			    padding-right: 10px;
+					left: 0;
+			    // padding-right: 10px;
 			    content: "\f077";
-			    -webkit-transform-origin: 65% 50%;
-			    transform-origin: 65% 50%;
+			    -webkit-transform-origin: 50%;
+			    transform-origin: 50%;
 			    -webkit-transition: all 0.1s ease-in-out;
 			    transition: all 0.1s ease-in-out;
 			}
+			span {
+				display: inline-block;
+				margin-left: 24px;
+			}
 			&:after {
 				display: none;
 			}
@@ -811,8 +849,34 @@ textarea {
 					transform: rotate(-180deg);
 			-webkit-transform-style: preserve-3D;
 					transform-style: preserve-3D;
-			-webkit-transform-origin: 30% 50%;
-					transform-origin: 30% 50%;
+			-webkit-transform-origin: 50%;
+					transform-origin: 50%;
+		}
+	}
+}
+
+.review-well-no-icon {
+		padding-left: 47px;
+}
+
+.review-well-child {
+	display: inline-block;
+	width: 100%;
+
+	.review-butons {
+		margin: 0;
+		padding-left: 8px;
+		@media (min-width: 991px) {
+			margin: initial;
+			padding-left: initial;
+		}
+	}
+
+	.collapse-trigger {
+		padding-left: 0;
+		&>div {
+			color: $color-grey-dark;
+			font-weight: normal;
 		}
 	}
 }
@@ -918,7 +982,7 @@ textarea {
 		        order: 1;
 		height: auto;
 
-		@media (min-width: 1680px) {
+		@media (min-width: 1920px) {
 			font-size: 16px;
 			line-height: 1.5;
 		}
@@ -1061,7 +1125,7 @@ textarea {
 			line-height: 1.3;
 			color: $body-copy;
 
-			@media (min-width: 1680px) {
+			@media (min-width: 1920px) {
 			font-size: 16px;
 			width: 190px;
 		}
@@ -1108,8 +1172,14 @@ textarea {
 	}
 }
 
+.dashnav-column .progress-question {
+	height: 60px;
+}
+
 .overview-progress {
 	border: solid 1px $color-grey-lighter;
+	border-radius: 10px;
+	background: #ffffff;
 	.progress-question {
 		margin-bottom: 0;
 		border-bottom: solid 1px $color-grey-lighter;
@@ -1175,6 +1245,19 @@ textarea {
 			}
 
 		}
+		&:first-child:hover {
+			border-top-left-radius: 7px;
+			border-top-right-radius: 7px;
+		}
+		&:last-child:hover {
+			border-bottom-left-radius: 7px;
+			border-bottom-right-radius: 7px;
+		}
+		a {
+			transition: 0.1s background ease-in-out;
+			-webkit-transition: 0.1s background ease-in-out;
+		}
+
 	}
 }
 
@@ -1216,6 +1299,7 @@ textarea {
 .modal-header {
 	border: 0;
 	padding-bottom: 0;
+	padding-top: 24px;
 }
 
 .modal-title {
@@ -1224,12 +1308,11 @@ textarea {
 }
 
 .modal-body {
-	padding-left: 64px;
-	padding-right: 64px;
+	padding: 0 64px 36px;
 
 	p {
 		font-size: 18px;
-		text-align: center;
+		margin-top: 12px;
 	}
 }
 
@@ -1237,9 +1320,6 @@ textarea {
 	background: #f5f5f5;
 	border-bottom-left-radius: 10px;
 	border-bottom-right-radius: 10px;
-	.btn {
-		margin-top: 12px;
-	}
 }
 
 #questions_modal {
@@ -1261,7 +1341,7 @@ textarea {
 	.modal-footer {
 		text-align: center;
 		border: none;
-		padding-bottom: 30px;
+		padding-bottom: 18px;
 	}
 }
 

edivorce/apps/core/templates/dashboard/print_form.html

@@ -22,10 +22,10 @@
 <div class="review-well clearfix">
     <div class="collapse-trigger collapsed" data-toggle="collapse" aria-expanded="false" data-target="#collapseF1" aria-controls="collapseF1">
        <div>
-           Notice of Joint Family Claim Form (F1)
+           <span>Notice of Joint Family Claim Form (F1)</span>
        </div>
     </div>
-    <p class="review-butons"><a class="btn btn-primary" href="{% url 'pdf_form' '1' %}?html">Preview</a> <a href="{% url 'pdf_form' '1' %}" class="btn btn-primary spinner">Print</a> </p>
+    <p class="review-butons"><a class="btn btn-primary" href="{% url 'pdf_form' '1' %}?html"><i class="fa fa-eye" aria-hidden="true"></i> Preview</a> <a href="{% url 'pdf_form' '1' %}" class="btn btn-primary spinner"><i class="fa fa-print" aria-hidden="true"></i> Print</a> </p>
     <div class="clearfix"> </div>
     <div class="collapse" id="collapseF1">
        <div>
@@ -38,10 +38,10 @@
 <div class="review-well clearfix">
     <div class="collapse-trigger collapsed" data-toggle="collapse" aria-expanded="false" data-target="#collapseF35" aria-controls="collapseF35">
        <div>
-           Requisition Form (F35)
+           <span>Requisition Form (F35)</span>
        </div>
     </div>
-    <p class="review-butons"><a class="btn btn-primary" href="{% url 'pdf_form' '35' %}?html">Preview</a> <a href="{% url 'pdf_form' '35' %}" class="btn btn-primary spinner">Print</a></p>
+    <p class="review-butons"><a class="btn btn-primary" href="{% url 'pdf_form' '35' %}?html"><i class="fa fa-eye" aria-hidden="true"></i> Preview</a> <a href="{% url 'pdf_form' '35' %}" class="btn btn-primary spinner"><i class="fa fa-print" aria-hidden="true"></i> Print</a></p>
     <div class="clearfix"> </div>
     <div class="collapse" id="collapseF35">
        <div>
@@ -54,10 +54,10 @@
 <div class="review-well clearfix">
     <div class="collapse-trigger collapsed" data-toggle="collapse" aria-expanded="false" data-target="#collapseF52" aria-controls="collapseF52">
        <div>
-           Draft Final Order Form (F52)
+           <span>Draft Final Order Form (F52)</span>
        </div>
     </div>
-    <p class="review-butons"><a class="btn btn-primary" href="{% url 'pdf_form' '52' %}?html">Preview</a> <a href="{% url 'pdf_form' '52' %}" class="btn btn-primary spinner">Print</a></p>
+    <p class="review-butons"><a class="btn btn-primary" href="{% url 'pdf_form' '52' %}?html"><i class="fa fa-eye" aria-hidden="true"></i> Preview</a> <a href="{% url 'pdf_form' '52' %}" class="btn btn-primary spinner"><i class="fa fa-print" aria-hidden="true"></i> Print</a></p>
     <div class="clearfix"> </div>
     <div class="collapse" id="collapseF52">
        <div>
@@ -76,10 +76,10 @@
 <div class="review-well clearfix">
     <div class="collapse-trigger collapsed" data-toggle="collapse" aria-expanded="false" data-target="#collapseF36" aria-controls="collapseF36">
        <div>
-           Certificate of Pleadings Form (F36)
+           <span>Certificate of Pleadings Form (F36)</span>
        </div>
     </div>
-    <p class="review-butons"><a class="btn btn-primary" href="{% url 'pdf_form' '36' %}?html">Preview</a> <a href="{% url 'pdf_form' '36' %}" class="btn btn-primary spinner">Print</a></p>
+    <p class="review-butons"><a class="btn btn-primary" href="{% url 'pdf_form' '36' %}?html"><i class="fa fa-eye" aria-hidden="true"></i> Preview</a> <a href="{% url 'pdf_form' '36' %}" class="btn btn-primary spinner"><i class="fa fa-print" aria-hidden="true"></i> Print</a></p>
     <div class="clearfix"> </div>
     <div class="collapse" id="collapseF36">
        <div>
@@ -100,10 +100,10 @@
 <div class="review-well clearfix">
     <div class="collapse-trigger collapsed" data-toggle="collapse" aria-expanded="false" data-target="#collapseF38" aria-controls="collapseF38">
        <div>
-           Affidavit Desk Order Divorce Form (F38) - signing together
+           <span>Affidavit Desk Order Divorce Form (F38) - signing together</span>
        </div>
     </div>
-    <p class="review-butons"><a class="btn btn-primary" href="{% url 'pdf_form' '38_we' %}?html">Preview</a> <a href="{% url 'pdf_form' '38_we' %}" class="btn btn-primary spinner">Print</a></p>
+    <p class="review-butons"><a class="btn btn-primary" href="{% url 'pdf_form' '38_we' %}?html"><i class="fa fa-eye" aria-hidden="true"></i> Preview</a> <a href="{% url 'pdf_form' '38_we' %}" class="btn btn-primary spinner"><i class="fa fa-print" aria-hidden="true"></i> Print</a></p>
     <div class="clearfix"> </div>
     <div class="collapse" id="collapseF38">
        <div>
@@ -126,35 +126,38 @@
     </div>
 </div>
 <div class="review-well clearfix">
-    <div class="collapse-trigger empty">
+  <div class="collapse-trigger collapsed" data-toggle="collapse" aria-expanded="false" data-target="#collapseF38b" aria-controls="collapseF38b">
        <div>
-           Affidavit Desk Order Divorce Form (F38) - signing separately
+           <span>Affidavit Desk Order Divorce Form (F38) - signing separately</span>
        </div>
    </div>
-    <div class="review-well clearfix">
+   <div class="collapse" id="collapseF38b">
+    <div class="review-well-child clearfix">
         <div class="collapse-trigger empty">
            <div>
                Claimant 1
            </div>
        </div>
-        <p class="review-butons"><a class="btn btn-primary" href="{% url 'pdf_form' '38_claimant1' %}?html">Preview</a> <a href="{% url 'pdf_form' '38_claimant1' %}" class="btn btn-primary spinner">Print</a></p>
+        <p class="review-butons"><a class="btn btn-primary" href="{% url 'pdf_form' '38_claimant1' %}?html"><i class="fa fa-eye" aria-hidden="true"></i> Preview</a> <a href="{% url 'pdf_form' '38_claimant1' %}" class="btn btn-primary spinner"><i class="fa fa-print" aria-hidden="true"></i> Print</a></p>
         <div class="clearfix"> </div>
     </div>
-    <div class="review-well clearfix">
+    <div class="review-well-child clearfix">
         <div class="collapse-trigger empty">
            <div>
                Claimant 2
            </div>
        </div>
-        <p class="review-butons"><a class="btn btn-primary" href="{% url 'pdf_form' '38_claimant2' %}?html">Preview</a> <a href="{% url 'pdf_form' '38_claimant2' %}" class="btn btn-primary spinner">Print</a></p>
+
+        <p class="review-butons"><a class="btn btn-primary" href="{% url 'pdf_form' '38_claimant2' %}?html"><i class="fa fa-eye" aria-hidden="true"></i> Preview</a> <a href="{% url 'pdf_form' '38_claimant2' %}" class="btn btn-primary spinner"><i class="fa fa-print" aria-hidden="true"></i> Print</a></p>
         <div class="clearfix"> </div>
     </div>
+  </div>
 </div>
 {% else %}
 <div class="review-well clearfix">
     <div class="collapse-trigger collapsed" data-toggle="collapse" aria-expanded="false" data-target="#collapseF30" aria-controls="collapseF30">
        <div>
-           Affidavit Form (F30)
+           <span>Affidavit Form (F30)</span>
        </div>
     </div>
     <div class="clearfix"> </div>

edivorce/apps/core/templates/question/07_property.html

@@ -39,8 +39,8 @@
 
 <div class="question-well">
     <h3>How have you and {% if name_spouse %} {{ name_spouse }} {% else %} your spouse {% endif %} agreed to deal with your property and debt?</h3>
-    <div class="radio"><label>{% input_field type="radio" name="deal_with_property_debt" value="Equal division" data_target_id="property_debt_division_method" data_reveal_target="false" %}<b>Equal division</b> of family property and debt</label></div>
-    <div class="radio"><label>{% input_field type="radio" name="deal_with_property_debt" value="Unequal division" data_target_id="property_debt_division_method" data_reveal_target="true" %}<b>Unequal division</b> of family property and family debt</label></div>
+    <div class="radio"><label>{% input_field type="radio" name="deal_with_property_debt" value="Equal division" data_target_id="property_debt_division_method" data_reveal_target="false" %}<em>Equal division</em> of family property and debt</label></div>
+    <div class="radio"><label>{% input_field type="radio" name="deal_with_property_debt" value="Unequal division" data_target_id="property_debt_division_method" data_reveal_target="true" %}<em>Unequal division</em> of family property and family debt</label></div>
     <p><em>Note: the court will only order an unequal division when an equal division is significantly unfair.</em></p>
 
     <div class="collapse-trigger collapsed" data-toggle="collapse" aria-expanded="false" data-target="#collapse_unequal_division" aria-controls="collapse_unequal_division">
@@ -176,4 +176,4 @@
             family property.</li>
     </ul>
 </div>
-{% endblock %}
+{% endblock %}

edivorce/apps/core/templates/question/09_other_questions.html

@@ -15,11 +15,11 @@
     <div>
         <h3>What is the best address to send you official court documents?</h3>
         <h2>Your Contact Information</h2>
-        <p><em>House and street number</em></p>
+        <p>House and street number</p>
         {% input_field type="text" name="address_to_send_official_document_street_you" class="form-block input-wide response-textbox" %}
-        <p><em>City</em></p>
+        <p>City</p>
         {% input_field type="text" name="address_to_send_official_document_city_you" class="form-block input-wide response-textbox" %}
-        <p><em>Prov/State</em></p>
+        <p>Prov/State</p>
         {% input_field type="text" name="address_to_send_official_document_prov_you" class="form-block input-narrow response-textbox" %}
 
         <p>Country</p>
@@ -28,7 +28,7 @@
         <div class="radio"><label>{% input_field type="radio" class="radio-with-other" name="address_to_send_official_document_country_you" value="USA" %}USA</label></div>
         <div class="radio"><label>{% input_field type="radio" class="radio-with-other radio_with_textbox" name="address_to_send_official_document_country_you" value="Other" %}Other {% input_field type="text" name="address_to_send_official_document_other_country_you" class="response-textbox other-textbox input-inline" tabindex="-1" %}</label></div>
 
-        <p><em>Postal code</em></p>
+        <p>Postal code</p>
         {% input_field type="text" name="address_to_send_official_document_postal_code_you" class="form-block input-wide response-textbox" %}
     </div>
 
@@ -37,10 +37,10 @@
             If you main address is a PO box, you can list this instead of the fax or email but you must also list
             an address that’s not a PO box.</em></p>
 
-        <p><em>Fax number (optional)</em></p>
+        <p>Fax number (optional)</p>
         {% input_field type="text" name="address_to_send_official_document_fax_you" class="form-block input-wide response-textbox" %}
         <div class="form-group">
-        <p><em>Email Address (optional)</em></p>
+        <p>Email Address (optional)</p>
         {% input_field type="text" id="email_textbox" name="address_to_send_official_document_email_you" class="form-block input-wide response-textbox form-control" %}
         </div>
     </div>
@@ -49,11 +49,11 @@
 <div class="question-well">
     <div>
         <h2>Your Spouse's Contact Information</h2>
-        <p><em>House and street number</em></p>
+        <p>House and street number</p>
         {% input_field type="text" name="address_to_send_official_document_street_spouse" class="form-block input-wide response-textbox" %}
-        <p><em>City</em></p>
+        <p>City</p>
         {% input_field type="text" name="address_to_send_official_document_city_spouse" class="form-block input-wide response-textbox" %}
-        <p><em>Prov/State</em></p>
+        <p>Prov/State</p>
         {% input_field type="text" name="address_to_send_official_document_prov_spouse" class="form-block input-narrow response-textbox" %}
 
         <p>Country</p>
@@ -62,7 +62,7 @@
         <div class="radio"><label>{% input_field type="radio" class="radio-with-other" name="address_to_send_official_document_country_spouse" value="USA" %}USA</label></div>
         <div class="radio"><label>{% input_field type="radio" class="radio-with-other radio_with_textbox" name="address_to_send_official_document_country_spouse" value="Other" %}Other {% input_field type="text" name="address_to_send_official_document_other_country_spouse" class="response-textbox other-textbox input-inline" tabindex="-1" %}</label></div>
 
-        <p><em>Postal code</em></p>
+        <p>Postal code</p>
         {% input_field type="text" name="address_to_send_official_document_postal_code_spouse" class="form-block input-wide response-textbox" %}
     </div>
 
@@ -71,10 +71,10 @@
             If your spouse's main address is a PO box, your spouse can list this instead of the fax or email but your spouse must also list
             an address that’s not a PO box.</em></p>
 
-        <p><em>Fax number (optional)</em></p>
+        <p>Fax number (optional)</p>
         {% input_field type="text" name="address_to_send_official_document_fax_spouse" class="form-block input-wide response-textbox" %}
         <div class="form-group">
-        <p><em>Email Address (optional)</em></p>
+        <p>Email Address (optional)</p>
         {% input_field type="text" id="email_textbox" name="address_to_send_official_document_email_spouse" class="form-block input-wide response-textbox form-control" %}
         </div>
     </div>