Browse Source

DIV-112 Applying the new designs

DIV-112 applying new designs
pull/160/head
Foley Lynn 8 years ago
parent
commit
534fa27004
5 changed files with 285 additions and 600 deletions
  1. +1
    -353
      edivorce/apps/core/static/css/main.css
  2. +130
    -110
      edivorce/apps/core/static/css/main.scss
  3. +28
    -8
      edivorce/apps/core/static/js/main.js
  4. +33
    -30
      edivorce/apps/core/templates/base.html
  5. +93
    -99
      edivorce/apps/core/templates/question/04_marriage.html

+ 1
- 353
edivorce/apps/core/static/css/main.css
File diff suppressed because it is too large
View File


+ 130
- 110
edivorce/apps/core/static/css/main.scss View File

@ -1,19 +1,27 @@
// compileCompressed: $1.css
$body-copy: #494949; $body-copy: #494949;
$brand-blue: #003366;
$brand-gold: #fcba19;
$brand-blue: #042553;
$brand-gold: #dea61b;
$brand-titles: #213E86;
$brand-links: #365EBE;
$brand-buttons: #D7DFF2;
$brand-titles: #062652;
$brand-links: #2b5580;
$brand-buttons: #365ebe;
$color-blue-dark: $brand-titles; $color-blue-dark: $brand-titles;
$color-blue-medium: $brand-links; $color-blue-medium: $brand-links;
$color-blue-light: $brand-buttons; $color-blue-light: $brand-buttons;
$color-blue-lighter: #d4dce5;
$color-grey-dark: $body-copy; $color-grey-dark: $body-copy;
$color-grey-medium: #9D9D9D; $color-grey-medium: #9D9D9D;
$color-grey-lightest: #f2f2f2;
$color-grey-light: #d5d5d5;
$color-grey-lighter: #efefef;
$color-grey-lightest: #fdfdfd;
$color-green: #57b26a;
$color-green-light: #d9f6df;
$font-custom: Myriad-Pro, Calibri, Arial, Sans Serif; $font-custom: Myriad-Pro, Calibri, Arial, Sans Serif;
@ -26,8 +34,8 @@ $font-custom: Myriad-Pro, Calibri, Arial, Sans Serif;
body { body {
font-family: $font-custom; font-family: $font-custom;
font-size: 18px;
line-height: 27px;
font-size: 16px;
line-height: 24px;
color: $body-copy; color: $body-copy;
background: #ffffff; background: #ffffff;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -40,10 +48,18 @@ h1,h2,h3,h4 {
} }
h1 { h1 {
font-weight: 400;
font-weight: 600;
line-height: 54px; line-height: 54px;
color: $body-copy;
margin-bottom: 30px;
color: $brand-blue;
margin-bottom: 20px;
small {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
color: $brand-blue;
display: block;
letter-spacing: .1em;
}
} }
h2 { h2 {
@ -81,6 +97,11 @@ a {
} }
} }
.intro {
font-size: 18px;
line-height: 28px;
}
// Bootstrap Overrides // Bootstrap Overrides
.container-wrapper { .container-wrapper {
@ -120,12 +141,25 @@ a {
&b { &b {
font-size: 18px; font-size: 18px;
} }
a {
color: #ffffff;
text-decoration: underline;
&:hover, &:focus {
color: $color-grey-light;
}
}
}
span.toolip {
color: $brand-titles;
border-bottom: dotted 1px $brand-titles;
cursor: pointer;
} }
.collapse-trigger { .collapse-trigger {
& > div { & > div {
color: $brand-links;
border-bottom: solid 1px $brand-links;
color: $brand-titles;
border-bottom: solid 1px $brand-titles;
display: inline; display: inline;
cursor: pointer; cursor: pointer;
&:after { &:after {
@ -273,13 +307,13 @@ fieldset[disabled] .btn-radio.active {
input { input {
border-radius: 10px; border-radius: 10px;
background: #f2f2f2;
color: #494949; color: #494949;
padding: 15px 20px;
border: none;
padding: 12px 15px;
border: solid 1px $color-grey-light;
line-height: 1em;
&:focus { &:focus {
outline: 0; outline: 0;
box-shadow: inset 0 1px 1px rgba($color-grey-dark,.075), 0 0 8px rgba($color-grey-medium,.6);
box-shadow: inset 0 1px 1px rgba($color-grey-dark,.075), 0 0 4px rgba($color-grey-medium,.5);
} }
&+i.fa {margin-left: 10px;} &+i.fa {margin-left: 10px;}
&.form-block { &.form-block {
@ -293,7 +327,7 @@ input {
max-width: 100px; max-width: 100px;
} }
&.input-inline { &.input-inline {
padding: 0 20px;
padding: 5px 20px;
border-radius: 5px; border-radius: 5px;
margin-left: 5px; margin-left: 5px;
} }
@ -305,22 +339,25 @@ input {
#top_banner { #top_banner {
background-color: $brand-blue; background-color: $brand-blue;
border-bottom: 2px solid $brand-gold; border-bottom: 2px solid $brand-gold;
padding: 5px 0 10px;
padding: 5px 20px 10px;
.top_banner-logo img { .top_banner-logo img {
width: 148px; width: 148px;
height: auto; height: auto;
float: left; float: left;
} }
h4 {
color: $color-blue-light;
p {
color: #ffffff;
font-size: 16px;
line-height: 1em; line-height: 1em;
margin-top: 13px;
margin-left: 15px;
margin-top: 20px;
margin-left: 35px;
float: left; float: left;
.beta { .beta {
border: solid 1px $color-blue-light;
padding: 4px 5px 0;
border: solid 1px #ffffff;
padding: 4px 8px 3px;
margin-left: 10px; margin-left: 10px;
font-size: 12px;
text-transform: uppercase;
} }
} }
@ -340,55 +377,34 @@ input {
#mid_banner { #mid_banner {
background-color: $color-blue-medium; background-color: $color-blue-medium;
font-size: 16px;
font-size: 14px;
font-weight: 600; font-weight: 600;
text-transform: uppercase;
.mid_banner-dash { .mid_banner-dash {
float: left; float: left;
margin-right: 40px;
margin-top: 20px;
i {
color: #ffffff;
padding: 0 15px;
}
}
.mid_banner-tab {
float: left;
display: inline-block;
margin-top: 10px;
padding: 10px 15px;
border-radius: 10px 10px 0 0;
color: $color-blue-medium;
background: $color-blue-light;
margin-left: -20px;
} }
.mid_banner-link {
margin-top: 20px;
.mid_banner-dash a,
.mid_banner-link a,
.more_information-link a {
padding: 10px 20px;
float: right; float: right;
margin-left: 20px;
&:hover, &.active {
color: $brand-blue;
background-color: $color-grey-lighter;
text-decoration: none;
i {
color: $brand-blue;
}
}
}
i {
color: #ffffff;
padding: 0 10px 0 0;
} }
a { a {
color: #ffffff; color: #ffffff;
text-decoration: none; text-decoration: none;
&:hover,
&:focus {
color: #ffffff;
text-decoration: underline;
}
}
}
#bot_banner {
background-color: $color-blue-light;
padding: 10px 0;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
img {
max-width: 100%;
height: auto;
}
.bot_banner-link {
float: right;
margin-top: 8px;
} }
} }
@ -399,54 +415,58 @@ input {
} }
} }
#more_information {
position: absolute;
top: 191px;
right: 0;
background: $color-grey-dark;
color: #ffffff;
border-radius: 10px 0 0 10px;
padding: 15px;
cursor: pointer;
h1,h2,h3,h4 {
color: #ffffff;
.question-well {
min-height: 20px;
padding: 25px;
margin-bottom: 25px;
border: 1px solid $color-grey-light;
border-radius: 10px;
&.hasFocus {border: 1px solid $brand-blue;}
}
/* Column Grid in flexbox */
.row-flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 100%;
.col {
flex: 1 1 8%;
margin: 0 0 0.5rem 0;
padding: 0.5em 10px;
box-sizing: border-box;
} }
h4 {
font-size: 16px;
line-height: 1em;
margin-bottom: 0;
&:after {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
content: "\f067";
padding-left: 15px;
color: $brand-gold;
}
.content-column {
flex-basis: 100%;
max-width: 800px;
padding: 60px;
} }
&>:not(.more_information-title) {
display: none;
.progress-column {
flex: 0 0 262px;
background-color: $color-grey-lighter;
} }
&.active {
&>:not(.more_information-title) {
display: block;
.more_information-column {
flex: 0 0 306px;
background-color: $color-grey-lighter;
box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
padding: 45px 20px;
font-size: 14px;
line-height: 21px;
.more_information-close {
float: right;
font-size: 24px;
margin-top: 3px;
color: $brand-blue;
} }
h4 {
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: solid 1px $color-grey-medium;
&:after {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
content: "\f068";
padding-left: 60px;
color: $brand-gold;
}
h2 {
color: $brand-blue;
padding-right: 25px;
} }
} }
}
}

+ 28
- 8
edivorce/apps/core/static/js/main.js View File

@ -53,13 +53,33 @@ $(function () {
}); });
// Expand More Information boxes // Expand More Information boxes
// TODO this is fragile and really just a place holder until the sidebar is revised
$("#more_information").click(function () {
if ($(this).hasClass("active")) {
$(this).removeClass("col-md-4 active");
$(".container-wrapper .col-md-8").addClass("col-md-offset-2");
$(".more_information-link a").click(function () {
var moreInfo = $(".more_information-column");
if ($(moreInfo).hasClass("hidden")) {
$(moreInfo).removeClass("hidden");
} else { } else {
$(this).addClass("col-md-4 active");
$(".container-wrapper .col-md-8").removeClass("col-md-offset-2");
$(moreInfo).addClass("hidden");
} }
});
});
$("a.more_information-close").click(function () {
var moreInfo = $(".more_information-column");
$(moreInfo).addClass("hidden");
});
// Change border color on well when child has focus
$(".question-well").click(function () {
$(".question-well").removeClass('hasFocus');
$(this).addClass('hasFocus');
});
// $('.question-well > *')
// .focus(function() {
// $(this).parent('.question-well').addClass('hasFocus');
// console.log("FOCUS!");
// })
// .blur(function() {
// $(this).parent('.question-well').removeClass('hasFocus');
// console.log("NO FOCUS!");
// });

+ 33
- 30
edivorce/apps/core/templates/base.html View File

@ -29,12 +29,12 @@
</head> </head>
<body> <body>
<div id="top_banner"> <div id="top_banner">
<div class="container">
<div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-sm-8"> <div class="col-sm-8">
<div class="top_banner-logo"> <div class="top_banner-logo">
<a href="{% url 'intro' %}"><img src="{% static 'svg/bc-logo.svg' %}" /></a> <a href="{% url 'intro' %}"><img src="{% static 'svg/bc-logo.svg' %}" /></a>
<h4>Uncontested Divorce <span class="beta">beta</span></h4>
<p>Joint Divorce <span class="beta">beta</span></p>
</div> </div>
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
@ -55,31 +55,19 @@
{% if not hide_nav %} {% if not hide_nav %}
<div id="mid_banner"> <div id="mid_banner">
<div class="container">
<div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-md-9 col-lg-10">
<div class="mid_banner-dash"><a href="{% url 'overview' %}"><i class="fa fa-pie-chart" aria-hidden="true"></i>Dashboard</a>
<div class="col-md-5">
<div class="mid_banner-dash"><a href="{% url 'overview' %}"><i class="fa fa-arrow-circle-o-left" aria-hidden="true"></i>Back to Dashboard</a>
</div> </div>
<span class="mid_banner-tab">1: Prepare Notice of Joint Family Claim (f1)</span>
</div> </div>
<div class="col-md-3 col-lg-2">
<div class="mid_banner-link"><a href="#">Legal Support</a></div>
</div>
</div>
</div>
</div>
<div id="bot_banner">
<div class="container">
<div class="row">
<div class="col-sm-2 hidden-sm">
</div>
<div class="col-sm-10 col-md-8">
<img src="{% static 'img/FPO-progress.png' %}"/>
</div>
<div class="col-sm-2">
<div class="bot_banner-link"><a href="#">Preview Form</a></div>
<div class="col-md-7">
<div class="more_information-link">
<a href="#"><i class="fa fa-info-circle" aria-hidden="true"></i>More Information</a>
</div>
<div class="mid_banner-link">
<a href="#"><i class="fa fa-balance-scale" aria-hidden="true"></i>Legal Support</a>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -87,15 +75,30 @@
{% endif %} {% endif %}
{% block content %}{% endblock %}
<div class="row-flex">
<div class="col-flex progress-column">
<p>Stuff</p>
</div>
{% block sidebar %}
<div id="more_information" class="">
<h4 class="more_information-title">More Information</h4>
{% block sidebarText %}
<div class="col">
<div class="col-flex content-column">
{% block content %}{% endblock %}
</div>
</div>
{% block sidebar %}
<div class="col-flex more_information-column hidden">
<a href="#" class="more_information-close"><i class="fa fa-times" aria-hidden="true"></i></a>
{% block sidebarText %}
{% endblock %}
</div>
{% endblock %} {% endblock %}
</div> </div>
{% endblock %}
<script type="text/javascript" src="{% static 'js/vendor/jquery-1.12.4.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/vendor/jquery-1.12.4.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/vendor/bootstrap.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/vendor/bootstrap.min.js' %}"></script>


+ 93
- 99
edivorce/apps/core/templates/question/04_marriage.html View File

@ -4,115 +4,109 @@
{% block title %}{{ block.super }}: Your Marriage{% endblock %} {% block title %}{{ block.super }}: Your Marriage{% endblock %}
{% block content %} {% block content %}
<div class="container-wrapper">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1>Step 4: Your Marriage</h1>
<p>It is very important that you enter the information below as it appears on your official marriage
certificate
<i class="fa fa-question-circle" data-toggle="tooltip" data-placement="right" data-html="true"
title="<b>Original Marriage Certificate</b><br /><br />The marriage certificate you received at the church —
or any other place where you were married — isn't acceptable in court. You can get a marriage certificate
or a certified copy of the registration of marriage from
<a href=&quot;http://www2.gov.B.C..ca/gov/content/life-events/marriages/marriage-certificates&quot;>Vital Statistics</a>
(an office run by the provincial government)." aria-hidden="true"></i>
or registration of marriage
<i class="fa fa-question-circle" data-toggle="tooltip" data-placement="right" data-html="true"
title="<b>Registration Marriage Certificate</b><br /><br />The Registration of Marriage is the document issued by
Vital Statistics (an office run by the provincial government) along with the Marriage License. This document
would have been signed by you and your spouse, the person who married you (the officiant) and your wedding ceremony witnesses.
Within 48 hours of the wedding, the officiant would have submitted the registration to the Vital Statistics Agency
where the registration information becomes a permanent legal record. Vital Statistics cannot issue a marriage certificate
until the marriage is registered. <br/><br/> For more information, please refer to the
<a href=&quot;http://www2.gov.B.C..ca/gov/content/life-events/marriages/marriage-registration/certified-copies-and-certified-electronic-extracts-of-a-marriage-registration&quot;>Marriage Registration page</a>
on the B.C. Government web site." aria-hidden="true"></i>. Not doing this can result in delays and
your divorce request being returned for correction.</p>
<div id="when_married">
<h3>When were you married?</h3>
<p><span class="date-picker-group">{% input_field type="text" name="when_were_you_married" class="date-picker" id="marriage_date" placeholder="DD/MM/YYYY" %} <i class="fa fa-calendar circle" aria-hidden="true"></i></span></p>
</div>
<h1><small>Step 4: </small>Your Marriage</h1>
<p class="intro">It is very important that you enter the information below as it appears on your <span class="toolip"data-toggle="tooltip" data-placement="right" data-html="true"
title="<b>Original Marriage Certificate</b><br /><br />The marriage certificate you received at the church —
or any other place where you were married — isn't acceptable in court. You can get a marriage certificate
or a certified copy of the registration of marriage from
<a href=&quot;http://www2.gov.B.C..ca/gov/content/life-events/marriages/marriage-certificates&quot;>Vital Statistics</a>
(an office run by the provincial government).">official marriage
certificate
<i class="fa fa-question-circle" aria-hidden="true"></i></span>
or <span class="toolip" data-toggle="tooltip" data-placement="right" data-html="true"
title="<b>Registration Marriage Certificate</b><br /><br />The Registration of Marriage is the document issued by
Vital Statistics (an office run by the provincial government) along with the Marriage License. This document
would have been signed by you and your spouse, the person who married you (the officiant) and your wedding ceremony witnesses.
Within 48 hours of the wedding, the officiant would have submitted the registration to the Vital Statistics Agency
where the registration information becomes a permanent legal record. Vital Statistics cannot issue a marriage certificate
until the marriage is registered. <br/><br/> For more information, please refer to the
<a href=&quot;http://www2.gov.B.C..ca/gov/content/life-events/marriages/marriage-registration/certified-copies-and-certified-electronic-extracts-of-a-marriage-registration&quot;>Marriage Registration page</a>
on the B.C. Government web site."> registration of marriage
<i class="fa fa-question-circle" aria-hidden="true"></i></span>. Not doing this can result in delays and
your divorce request being returned for correction.</p>
<div id="lived_together">
<h3>When did you and {% if name_spouse %} {{ name_spouse }} {% else %} your spouse {% endif %} begin to live together in a marriage-like relationship?</h3>
<p><span class="date-picker-group">{% input_field type="text" name="when_were_you_live_married_like" class="date-picker" id="lived_start_date" placeholder="DD/MM/YYYY" %} <i class="fa fa-calendar circle" aria-hidden="true"></i></span></p>
<div id="when_married" class="question-well">
<h3>When were you married?</h3>
<p><span class="date-picker-group">{% input_field type="text" name="when_were_you_married" class="date-picker" id="marriage_date" placeholder="DD/MM/YYYY" %} <i class="fa fa-calendar circle" aria-hidden="true"></i></span></p>
</div>
<div class="collapse-trigger collapsed" data-toggle="collapse" aria-expanded="false" data-target="#collapse_start_date" aria-controls="collapse_start_date">
<div>
How do I determine the start date?
</div>
</div>
<div class="collapse" id="collapse_start_date">
<div>
<p>
Under the law, the start date of a spousal relationship is the day two individuals begin living together in
a marriage-like relationship, or the day they were married, whichever is first. The start date of
a spousal relationship determines when rights or responsibilities start under the Family Law Act,
particularly respecting property division.
</p>
</div>
</div>
<div id="lived_together" class="question-well">
<h3>When did you and {% if name_spouse %} {{ name_spouse }} {% else %} your spouse {% endif %} begin to live together in a marriage-like relationship?</h3>
<p><span class="date-picker-group">{% input_field type="text" name="when_were_you_live_married_like" class="date-picker" id="lived_start_date" placeholder="DD/MM/YYYY" %} <i class="fa fa-calendar circle" aria-hidden="true"></i></span></p>
<div class="collapse-trigger collapsed" data-toggle="collapse" aria-expanded="false" data-target="#collapse_exact_start_date" aria-controls="collapse_exact_start_date">
<div>
What do I do if I can't remember the exact date?
</div>
</div>
<div class="collapse" id="collapse_exact_start_date">
<div>
<p>If you cannot remember the exact date you sepearated then enter:</p>
<ul>
<li>the last day of that month in which you decided to separate from your spouse, and;</li>
<li>year</li>
</ul>
</div>
</div>
</div>
<div class="collapse-trigger collapsed" data-toggle="collapse" aria-expanded="false" data-target="#collapse_start_date" aria-controls="collapse_start_date">
<div>
How do I determine the start date?
</div>
</div>
<div class="collapse" id="collapse_start_date">
<div>
<p>
Under the law, the start date of a spousal relationship is the day two individuals begin living together in
a marriage-like relationship, or the day they were married, whichever is first. The start date of
a spousal relationship determines when rights or responsibilities start under the Family Law Act,
particularly respecting property division.
</p>
</div>
</div>
<div>
<h3>Where were you married?</h3>
<p>Enter the location as it appears on the marriage certificate (e.g. city, province or state and country)</p>
<p>City</p>
{% input_field type="text" name="where_were_you_married_city" class="form-block input-wide response-textbox" %}
<p>Prov/State</p>
{% input_field type="text" name="where_were_you_married_prov" class="form-block input-narrow response-textbox" %}
<p>Country</p>
<div class="collapse-trigger collapsed" data-toggle="collapse" aria-expanded="false" data-target="#collapse_exact_start_date" aria-controls="collapse_exact_start_date">
<div>
What do I do if I can't remember the exact date?
</div>
</div>
<div class="collapse" id="collapse_exact_start_date">
<div>
<p>If you cannot remember the exact date you sepearated then enter:</p>
<ul>
<li>the last day of that month in which you decided to separate from your spouse, and;</li>
<li>year</li>
</ul>
</div>
</div>
</div>
<div class="radio"><label>{% input_field type="radio" class="radio-with-other" name="where_were_you_married_country" value="Canada" %}Canada</label></div>
<div class="radio"><label>{% input_field type="radio" class="radio-with-other" name="where_were_you_married_country" value="USA" %}USA</label></div>
<div class="radio"><label>{% input_field type="radio" class="radio-with-other radio_with_textbox" name="where_were_you_married_country" value="Other" %}Other {% input_field type="text" name="where_were_you_married_other_country" class="response-textbox other-textbox input-inline" tabindex="-1" %}</label></div>
</div>
<div class="question-well">
<h3>Where were you married?</h3>
<p>Enter the location as it appears on the marriage certificate (e.g. city, province or state and country)</p>
<p>City</p>
{% input_field type="text" name="where_were_you_married_city" class="form-block input-wide response-textbox" %}
<p>Prov/State</p>
{% input_field type="text" name="where_were_you_married_prov" class="form-block input-narrow response-textbox" %}
<p>Country</p>
<div>
<h3>Before you got married to your spouse, what was your marital status?</h3>
<div class="radio"><label>{% input_field type="radio" name="marital_status_before_you" value="Never married" %}Never married</label></div>
<div class="radio"><label>{% input_field type="radio" name="marital_status_before_you" value="Divorced" %}Divorced</label></div>
<div class="radio"><label>{% input_field type="radio" name="marital_status_before_you" value="Widowed" %}Widowed</label></div>
</div>
<div class="radio"><label>{% input_field type="radio" class="radio-with-other" name="where_were_you_married_country" value="Canada" %}Canada</label></div>
<div class="radio"><label>{% input_field type="radio" class="radio-with-other" name="where_were_you_married_country" value="USA" %}USA</label></div>
<div class="radio"><label>{% input_field type="radio" class="radio-with-other radio_with_textbox" name="where_were_you_married_country" value="Other" %}Other {% input_field type="text" name="where_were_you_married_other_country" class="response-textbox other-textbox input-inline" tabindex="-1" %}</label></div>
</div>
<div>
<h3>What was the marital status of your spouse before your marriage?</h3>
<div class="radio"><label>{% input_field type="radio" name="marital_status_before_spouse" value="Never married" %}Never married</label></div>
<div class="radio"><label>{% input_field type="radio" name="marital_status_before_spouse" value="Divorced" %}Divorced</label></div>
<div class="radio"><label>{% input_field type="radio" name="marital_status_before_spouse" value="Widowed" %}Widowed</label></div>
</div>
<div style="display: flex">
<form action="{% url 'question_steps' '03_respondent' %}">
<input type="submit" value="Back"/>
</form>
<form action="#">
<input type="submit" value="Save"/>
</form>
<form action="{% url 'question_steps' '05_separation' %}">
<input type="submit" value="Next"/>
</form>
</div>
</div>
</div>
</div>
<div class="question-well">
<h3>Before you got married to your spouse, what was your marital status?</h3>
<div class="radio"><label>{% input_field type="radio" name="marital_status_before_you" value="Never married" %}Never married</label></div>
<div class="radio"><label>{% input_field type="radio" name="marital_status_before_you" value="Divorced" %}Divorced</label></div>
<div class="radio"><label>{% input_field type="radio" name="marital_status_before_you" value="Widowed" %}Widowed</label></div>
</div> </div>
<div class="question-well">
<h3>What was the marital status of your spouse before your marriage?</h3>
<div class="radio"><label>{% input_field type="radio" name="marital_status_before_spouse" value="Never married" %}Never married</label></div>
<div class="radio"><label>{% input_field type="radio" name="marital_status_before_spouse" value="Divorced" %}Divorced</label></div>
<div class="radio"><label>{% input_field type="radio" name="marital_status_before_spouse" value="Widowed" %}Widowed</label></div>
</div>
<div style="display: flex">
<form action="{% url 'question_steps' '03_respondent' %}">
<input type="submit" value="Back"/>
</form>
<form action="#">
<input type="submit" value="Save"/>
</form>
<form action="{% url 'question_steps' '05_separation' %}">
<input type="submit" value="Next"/>
</form>
</div>
{% endblock %} {% endblock %}
{% block sidebarText %} {% block sidebarText %}


Loading…
Cancel
Save