DIV-1135 - Layout updates to match new wireframes

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

@@ -616,27 +616,34 @@ select.form-control {
 	}
 }
 
+.alias-header {
+	width: 100%;
+}
+
 .form-group.name-group {
+	@media (min-width: 992px) {
+		display: flex !important;
+		flex-direction: row;
+		justify-content: space-between;
+		margin-top: 20px;
+    	margin-bottom: 8px;
+	}
+
+	> div {
+		width: 80%;
 
-	&--indented {
 		@media (min-width: 992px) {
-			padding-left: 24px;
+			width: 24%;
+		}
+
+		input {
+			width: 99%;
 		}
 	}
-	
+
 	p {
 		margin-bottom: 3px;
 	}
-
-	input[type=text] {
-		width: 70% !important;
-		@media (min-width: 992px) and (max-width: 1199px) {
-			width: 55% !important;
-		}
-		@media (min-width: 1200px) {
-			width: 45% !important;
-		}		
-	}	
 }
 
 /* Buttons & Icons*/

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

@@ -9,17 +9,27 @@
         </select>
     {% endcomment %}
     
-    <label>Also known as</label>
-        <span class="form-group name-group name-group--indented">
-            <p>Last name</p>
-            {% input_field type="text" name=name value=last_name multiple="true" class="form-block response-textbox alias-last-name" %}
-            <p>First name</p>
+    <div class="alias-header">
+        <label>Also known as</label>
+        <input type="button" class="btn btn-danger btn-delete-name form-control pull-right" value="Delete" />    
+    </div>
+    <div class="form-group name-group alias-body">
+        <div>
+            <p>First Name</p>
             {% input_field type="text" name=name value=given_1 multiple="true" class="form-block response-textbox alias-given-1" %}
-            <p>Middle name <span class="optional inline">If applicable</span></p>
+        </div>
+        <div>
+            <p>Middle Name 1</p>
             {% input_field type="text" name=name value=given_2 multiple="true" ignore_error=True class="form-block response-textbox alias-given-2" %}
-            <p>Middle name #2 <span class="optional inline">If applicable</span></p>        
+        </div>
+        <div>
+            <p>Middle Name 2</p>        
             {% input_field type="text" name=name value=given_3 multiple="true" ignore_error=True class="form-block response-textbox alias-given-3" %}
-        </span>
+        </div>
+        <div>
+            <p>Last Name</p>
+            {% input_field type="text" name=name value=last_name multiple="true" class="form-block response-textbox alias-last-name" %}
+        </div>        
+    </div>
 
-        <input type="button" class="btn btn-danger btn-delete-name form-control" value="Delete" />
 </div>

edivorce/apps/core/templates/question/02_claimant.html

@@ -13,16 +13,24 @@
 <div class="question-well {% if last_name_you_error or given_name_1_you_error %}error{% endif %}">
     <h3>Please enter your name (as it appears on your marriage certificate or registration of marriage)
         {% if last_name_you_error or given_name_1_you_error %}{% include 'partials/required.html' %}{% endif %}</h3>
-    <span class="form-group name-group">
-        <p>Last name</p>
-        {% input_field type="text" name="last_name_you" class="form-block response-textbox" %}
-        <p>First name</p>
-        {% input_field type="text" name="given_name_1_you" class="form-block response-textbox" %}
-        <p>Middle name <span class="optional inline">If applicable</span></p>
-        {% input_field type="text" name="given_name_2_you" class="form-block response-textbox" %}
-        <p>Middle name #2 <span class="optional inline">If applicable</span></p>        
-        {% input_field type="text" name="given_name_3_you" class="form-block response-textbox" %}
-    </span>
+    <div class="form-group name-group">
+        <div>
+            <p>First Name</p>
+            {% input_field type="text" name="given_name_1_you" class="form-block response-textbox" %}
+        </div>
+        <div>
+            <p>Middle Name 1</p>
+            {% input_field type="text" name="given_name_2_you" class="form-block response-textbox" %}
+        </div>        
+        <div>
+            <p>Middle Name 2</p>        
+            {% input_field type="text" name="given_name_3_you" class="form-block response-textbox" %}
+        </div>
+        <div>
+            <p>Last Name</p>
+            {% input_field type="text" name="last_name_you" class="form-block response-textbox" %}
+        </div>        
+    </div>
 
     <div class="collapse-trigger collapsed" data-toggle="collapse" aria-expanded="false" data-target="#collapse_changed_name" aria-controls="collapse_changed_name">
         <div>

edivorce/apps/core/templates/question/03_respondent.html

@@ -16,16 +16,25 @@
 <div class="question-well {% if last_name_spouse_error or given_name_1_spouse_error %}error{% endif %}">
     <h3>What is your spouse's name (enter name as it appears on the marriage certificate or registration of marriage)?
         {% if last_name_spouse_error or given_name_1_spouse_error %}{% include 'partials/required.html' %}{% endif %}</h3>
-    <span class="form-group name-group">
-        <p>Last name</p>
-        {% input_field type="text" name="last_name_spouse" class="form-block response-textbox" %}
-        <p>First name</p>
-        {% input_field type="text" name="given_name_1_spouse" class="form-block response-textbox" %}
-        <p>Middle name <span class="optional inline">If applicable</span></p>
-        {% input_field type="text" name="given_name_2_spouse" class="form-block response-textbox" %}
-        <p>Middle name #2 <span class="optional inline">If applicable</span></p>        
-        {% input_field type="text" name="given_name_3_spouse" class="form-block response-textbox" %}
-    </span>
+    <div class="form-group name-group">
+        <div>
+            <p>First Name</p>
+            {% input_field type="text" name="given_name_1_spouse" class="form-block response-textbox" %}
+        </div>
+        <div>
+            <p>Middle Name 1</p>
+            {% input_field type="text" name="given_name_2_spouse" class="form-block response-textbox" %}
+        </div>        
+        <div>
+            <p>Middle Name 2</p>        
+            {% input_field type="text" name="given_name_3_spouse" class="form-block response-textbox" %}
+        </div>
+        <div>
+            <p>Last Name</p>
+            {% input_field type="text" name="last_name_spouse" class="form-block response-textbox" %}
+        </div>        
+    </div>
+
     <div class="collapse-trigger collapsed" data-toggle="collapse" aria-expanded="false"
          data-target="#collapse_legal_name" aria-controls="collapse_legal_name">
         <div>