Implemented visual design & bootstrap templates

edivorce/apps/core/static/css/default.css

@@ -1,3 +0,0 @@
-body {
-  font: normal 10pt Helvetica;
-}

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

@@ -0,0 +1,429 @@
+$body-copy: #494949;
+
+$brand-blue: #003366;
+$brand-gold: #fcba19;
+
+$brand-titles: #213E86;
+$brand-links: #365EBE;
+$brand-buttons: #D7DFF2;
+
+$color-blue-dark: $brand-titles;
+$color-blue-medium: $brand-links;
+$color-blue-light: $brand-buttons;
+
+$color-grey-dark: $body-copy;
+$color-grey-medium: #9D9D9D;
+$color-grey-lightest: #f2f2f2;
+
+$font-custom:  Myriad-Pro, Calibri, Arial, Sans Serif;
+
+@font-face {
+	font-family: 'Myriad-Pro';
+	src: url('../fonts/MyriadWebPro.ttf');
+	font-weight: normal;
+	font-style: normal;
+}
+
+body {
+    font-family: $font-custom;
+    font-size: 18px;
+    line-height: 27px;
+    color: $body-copy;
+    background: #ffffff;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+h1,h2,h3,h4 {
+    margin-top: 0px;
+    margin-bottom: 10px;
+}
+
+h1 {
+    font-weight: 400;
+    line-height: 54px;
+    color: $body-copy;
+    margin-bottom: 30px;
+}
+
+h2 {
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 36px;
+    color: $body-copy;
+    margin-bottom: 20px;
+}
+
+h3 {
+    font-weight: 400;
+    font-size: 28px;
+    line-height: 42px;
+    color: $brand-titles;
+    margin-top: 15px;
+}
+
+h4 {
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 27px;
+    color: $brand-titles;
+    text-transform: uppercase;
+}
+
+a {
+  color: $brand-links;
+  text-decoration: none;
+  &:hover,
+  &:focus {
+    color: darken( $brand-links, 10% );
+    text-decoration: underline;
+    transition: color 0.1s ease;
+  }
+}
+
+// Bootstrap Overrides
+
+.container-wrapper {
+	padding: 40px 0;
+	&:nth-child(odd) {
+		background: $color-grey-lightest;
+		input {
+			background: #ffffff;
+		}
+	}
+}
+.bg-danger {
+	padding: 30px;
+	border-radius: 10px;
+	margin-bottom: 20px;
+}
+
+@media (max-width: 991px) {
+	.container {
+	    width: 100%;
+		min-width: 750px;
+	}
+}
+
+.tooltip-arrow {
+	border-top-color: $brand-titles;
+}
+.tooltip-inner {
+    text-align: left;
+    background-color: $brand-titles;
+    padding: 30px;
+	font-size: 16px;
+	line-height: 24px;
+	max-width: 400px;
+	border-radius: 10px;
+	&b {
+		font-size: 18px;
+	}
+}
+
+.collapse-trigger {
+	& > div {
+		color: $brand-links;
+		border-bottom: solid 1px $brand-links;
+		display: inline;
+		cursor: pointer;
+		&:after {
+			font-family: FontAwesome;
+			font-weight: normal;
+			font-style: normal;
+			display: inline-block;
+			text-decoration: inherit;
+			padding-left: 10px;
+			content: "\f077";
+			transform-origin: 65% 50%;
+			transition: transform 0.2s linear;
+		}
+		&:hover,
+	    &:focus {
+	      color: darken( $brand-links, 10% );
+		  border-bottom: solid 1px darken( $brand-links, 10% );
+	      transition: all 0.1s ease;
+	    }
+	}
+	margin-bottom: 20px;
+	&.collapsed div:after {
+		transform: rotate(-180deg);
+		transform-style: preserve-3D;
+		transform-origin: 65% 50%;
+	}
+}
+
+.collapse > div,
+.collapsing > div {
+	margin-bottom: 25px;
+}
+
+
+// Buttons & Icons
+
+i.fa {
+	color: $brand-links;
+	&.circle {
+		border-radius: 50%;
+	    padding: 10px;
+	    border: solid 1px $brand-links;
+	}
+}
+
+i.fa.fa-question-circle {margin-left: 5px;}
+
+.btn-primary {
+    font-size: 18px;
+    line-height: 32px;
+    border: none;
+    border-radius: 10px;
+    line-height: 32px;
+    padding: 6px 18px;
+    background-color: $brand-buttons;
+    color: $brand-titles;
+    &:hover {
+        background-color: $brand-titles;
+        color: #ffffff;
+    }
+}
+
+a.btn+a.btn {margin-right: 20px;}
+
+a.btn > i.fa {
+    padding-right: 5px;
+}
+
+a.btn:hover > i.fa {
+	color: #ffffff;
+}
+
+.btn-radio {
+	color: $brand-titles;
+	background-color: $brand-buttons;
+	border-color: $brand-buttons;
+	font-size: 18px;
+    text-transform: uppercase;
+    font-weight: 600;
+	line-height: 45px;
+	width: 60px;
+	height: 60px;
+	border-radius: 30px;
+	border: 3px solid $brand-buttons;
+}
+
+.btn-radio:hover,
+.btn-radio:focus,
+.btn-radio:active,
+.btn-radio.active,
+.open .dropdown-toggle.btn-radio {
+	color: #FFFFFF;
+	background-color: $brand-links;
+	border: 3px solid $brand-buttons;
+}
+
+.btn-radio:active,
+.btn-radio.active,
+.open .dropdown-toggle.btn-radio {
+  background-image: none;
+}
+
+.btn-radio.disabled,
+.btn-radio[disabled],
+fieldset[disabled] .btn-radio,
+.btn-radio.disabled:hover,
+.btn-radio[disabled]:hover,
+fieldset[disabled] .btn-radio:hover,
+.btn-radio.disabled:focus,
+.btn-radio[disabled]:focus,
+fieldset[disabled] .btn-radio:focus,
+.btn-radio.disabled:active,
+.btn-radio[disabled]:active,
+fieldset[disabled] .btn-radio:active,
+.btn-radio.disabled.active,
+.btn-radio[disabled].active,
+fieldset[disabled] .btn-radio.active {
+  background-color: $brand-buttons;
+  border-color: $brand-buttons;
+}
+
+.btn-radio + .btn-radio {
+	margin-left: 15px;
+}
+
+.btn-radio-group {
+	margin-bottom: 20px;
+	.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
+		outline: none;
+	}
+	.btn-radio-long {
+		width: auto;
+	    white-space: normal;
+	    text-transform: none;
+	    align-items: center;
+	    line-height: 1em;
+	    max-width: 500px;
+		display: inline-flex;
+		text-align: left;
+    	padding: 0 20px;
+	}
+}
+
+// Form Elements
+
+input {
+	border-radius: 10px;
+    background: #f2f2f2;
+    color: #494949;
+    padding: 15px 20px;
+    border: none;
+	&:focus {
+	    outline: 0;
+	    box-shadow: inset 0 1px 1px rgba($color-grey-dark,.075), 0 0 8px rgba($color-grey-medium,.6);
+	}
+	&+i.fa {margin-left: 10px;}
+}
+
+
+// Customizations
+
+#top_banner {
+    background-color: $brand-blue;
+	border-bottom: 2px solid $brand-gold;
+	padding: 5px 0 10px;
+	.top_banner-logo img {
+	    width: 148px;
+		height: auto;
+		float: left;
+	}
+	h4 {
+		color: $color-blue-light;
+		line-height: 1em;
+		margin-top: 13px;
+		margin-left: 15px;
+		float: left;
+		.beta {
+		    border: solid 1px $color-blue-light;
+		    padding: 4px 5px 0;
+		    margin-left: 10px;
+		}
+	}
+
+	.top_banner-user {
+		color: #fff;
+		font-size: 14px;
+		float: right;
+		margin-top: 9px;
+		a {
+			color: #ffffff;
+			&:hover, &:active {
+				color: #fcfcfc;
+			}
+		}
+	}
+}
+
+#mid_banner {
+	background-color: $color-blue-medium;
+	font-size: 16px;
+	font-weight: 600;
+	text-transform: uppercase;
+	.mid_banner-dash {
+		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;
+	}
+	.mid_banner-link {
+		margin-top: 20px;
+		float: right;
+	}
+	a {
+	  color: #ffffff;
+	  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;
+	}
+}
+
+#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;
+	}
+	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;
+		}
+	}
+	&>:not(.more_information-title) {
+		display: none;
+	}
+	&.active {
+		&>:not(.more_information-title) {
+			display: block;
+		}
+		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;
+			}
+		}
+	}
+}

edivorce/apps/core/static/css/weasyprint.css

@@ -0,0 +1,69 @@
+@media screen {
+    .print-wrapper {
+        font-size: 15px;
+    	max-width: 960px;
+    	margin: 20px auto;
+    }
+}
+
+@media print {
+    .force-break {
+        page-break-before: always;
+    }
+    .avoid-break {
+        page-break-inside: avoid;
+    }
+}
+
+@page {
+    margin: 0.75cm;
+}
+
+body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}
+
+h1, h2, h3 {
+    font-weight: bold;
+    margin-bottom: 30px;
+}
+
+h1 {font-size: 24px;}
+
+h2 {font-size: 21px;}
+
+h3 {
+    font-size: 18px;
+    margin-top:40px;
+    margin-bottom: 10px;
+}
+
+hr {
+    border-top: 1px solid #000000;
+    margin: 40px 0;
+}
+
+i.fa {
+    font-size: 30px;
+    vertical-align: middle;
+    margin: 0 5px;
+}
+
+.form-entry {
+    display: inline-block;
+    min-width: 200px;
+}
+
+.form-textarea {
+    display: block;
+    border: solid 1px #000000;
+    padding: 20px;
+    margin: 20px;
+    min-height: 200px;
+}
+
+.not-complete {
+    background-color: #fcf8e3;
+}
+
+.table-fixed {
+    table-layout: fixed;
+}

edivorce/apps/core/templates/base.html

@@ -1,15 +1,102 @@
 {% load static %}
 <!doctype html>
-<html lang="en">
-<head>
-  <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
-  <link rel="stylesheet" type="text/css" href="{% static 'css/default.css' %}">
-  <title>{% block title %}Ministry of Justice e-Divorce{% endblock %}</title>
-</head>
-<body>
-  <div class="container">
-{% block content %}{% endblock %}
-  </div>
-  <script type="text/javascript" src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
-</body>
+<html class="no-js" lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+        <title>{% block title %}Ministry of Justice e-Divorce{% endblock %}</title>
+
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <link rel="stylesheet" type="text/css" href="{% static "css/bootstrap.min.css" %}">
+        <link rel="stylesheet" type="text/css" href="{% static "css/font-awesome.min.css" %}">
+        {% load compress %}
+        {% compress css %}
+        <link rel="stylesheet" type="text/x-scss" href="{% static "css/main.scss" %}" />
+        {% endcompress %}
+
+        <!--[if lt IE 9]>
+            <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
+            <script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"><\/script>')</script>
+        <![endif]-->
+
+    </head>
+    <body>
+        <div id="top_banner">
+            <div class="container">
+                <div class="row">
+                    <div class="col-sm-8">
+                        <div class="top_banner-logo">
+                            <a href="{% url 'index' %}"><img src="{% static 'svg/bc-logo.svg' %}" /></a>
+                            <h4>Uncontested Divorce <span class="beta">beta</span></h4>
+                        </div>
+                    </div>
+                    <div class="col-sm-4">
+                        <div class="top_banner-user">
+                            {% if request.bceid_user.is_authenticated %}
+                            <span>
+                                {{ request.bceid_user.first_name}}
+                                {{ request.bceid_user.last_name}}
+                                &nbsp;&nbsp;|&nbsp;&nbsp; <a href="{% url 'logout' %}">Log out</a>
+                            </span>
+                            {% endif %}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        {% if not hide_nav %}
+
+            <div id="mid_banner">
+                <div class="container">
+                    <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>
+                            <span class="mid_banner-tab">1: Prepare Notice of Joint Family Claim (f1)</span>
+                        </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>
+                    </div>
+                </div>
+            </div>
+
+        {% endif %}
+
+        {% block content %}{% endblock %}
+
+        {% block sidebar %}
+        <div id="more_information" class="">
+            <h4 class="more_information-title">More Information</h4>
+            {% block sidebarText %}
+            {% endblock %}
+        </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/bootstrap.min.js' %}"></script>
+        <script type="text/javascript" src="{% static 'js/controllers.js' %}"></script>
+        <script type="text/javascript" src="{% static 'js/ajax.js' %}"></script>
+        <script type="text/javascript" src="{% static 'js/main.js' %}"></script>
+    </body>
 </html>

edivorce/apps/core/templates/styleguide/guide.html

@@ -0,0 +1,135 @@
+{% extends 'base.html' %}
+
+{% block title %}{{ super }}: Stylesheet{% endblock %}
+
+{% block content %}
+
+<div class="container-wrapper">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-8 col-md-offset-2">
+                <h1>Step 1: Your Marriage</h1>
+                <h2>Please provide the date and location of your marriage</h2>
+                <h3>When were you married?</h3>
+                <p><input type="text" id="date" placeholder="DD/MM/YYYY"> <i class="fa fa-calendar circle" aria-hidden="true"></i></p>
+                <p>
+                    <em>Enter exact date as it appears on your <i class="fa fa-question-circle" data-toggle="tooltip" data-placement="bottom" data-html="true" title="<b>ORIGINAL MARRIAGE CERTIFICATE</b><br />The marriage certi cate you received at the church — or any other place where you were married — isn't acceptable in court. You can get a copy of your marriage certificate or a certified copy of the registration of marriage from Vital Statistics (an office run by the provincial government)."
+                        aria-hidden="true"></i> marriage certificate</em>
+                </p>
+                <div class="btn-radio-group" data-toggle="buttons">
+                    <label class="btn btn-radio">
+                        <input type="radio" name="options" id="yes" autocomplete="off"> Yes
+                    </label>
+
+                    <label class="btn btn-radio btn-radio-long">
+                        <input type="radio" name="options" id="no" autocomplete="off"> No, it's impossible to obtain a Marriage Certificate (or registration of marriage)
+                    </label>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="container-wrapper">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-8 col-md-offset-2">
+                <h1>Your Seperation</h1>
+                <h2>Have you been seperated for at least one year?</h2>
+                <div class="btn-radio-group" data-toggle="buttons">
+                    <label class="btn btn-radio">
+                        <input type="radio" name="options" id="yes" autocomplete="off"> Yes
+                    </label>
+
+                    <label class="btn btn-radio">
+                        <input type="radio" name="options" id="no" autocomplete="off"> No
+                    </label>
+                </div>
+
+                <div class="collapse-trigger collapsed" data-toggle="collapse" aria-expanded="false" data-target="#collapseExample" aria-controls="collapseExample">
+                    <div>
+                        Where do I get a marriage certificate?
+                    </div>
+                </div>
+                <div class="collapse" id="collapseExample">
+                    <div>
+                        <p>
+                            You can get a copy of your marriage certificate Morbi ultricies justo ac nibh ullamcorper ultricies. Nam quis viverra metus. Sed tincidunt mi id varius volutpat. Maecenas venenatis in velit ac tincidunt.
+                        </p>
+                    </div>
+                </div>
+                <div class="collapse-trigger collapsed" data-toggle="collapse" aria-expanded="false" data-target="#collapseExample2" aria-controls="collapseExample">
+                    <div>
+                        What if I cannot get a copy of my marriage certificate? And what if this line is very, very long and runs into multiple lines? Then what?
+                    </div>
+                </div>
+                <div class="collapse" id="collapseExample2">
+                    <div>
+                        <p>
+                            You can get a copy of your marriage certificate Morbi ultricies justo ac nibh ullamcorper ultricies. Nam quis viverra metus. Sed tincidunt mi id varius volutpat. Maecenas venenatis in velit ac tincidunt.
+                        </p>
+                    </div>
+                </div>
+                <div class="bg-danger">
+                    <p>
+                        In order to be considered a spouse for the purposes of dividing property or debt you must have lived together in a marriage-like relationship for at least two years.
+                    </p>
+                    <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>
+                <h1>Step 1: Your Marriage</h1>
+                <h2>Please provide the date and location of your marriage</h2>
+                <h3>When were you married?</h3>
+                <p><input type="text" id="date" placeholder="DD/MM/YYYY"> <i class="fa fa-calendar circle" aria-hidden="true"></i></p>
+                <p>
+                    <em>Enter exact date as it appears on your <i class="fa fa-question-circle" data-toggle="tooltip" data-placement="bottom" data-html="true" title="<b>ORIGINAL MARRIAGE CERTIFICATE</b><br />The marriage certi cate you received at the church — or any other place where you were married — isn't acceptable in court. You can get a copy of your marriage certificate or a certified copy of the registration of marriage from Vital Statistics (an office run by the provincial government)."
+                        aria-hidden="true"></i> marriage certificate</em>
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="container-wrapper">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-8 col-md-offset-2">
+                <h1>Heading 1</h1>
+                <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Nam iaculis tortor nec mollis condimentum.</p>
+                <h2>Heading 2</h2>
+                <h3>Heading 3</h3>
+                <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Nam iaculis tortor nec mollis condimentum.</p>
+                <h4>Heading 4</h4>
+                <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Nam iaculis tortor nec mollis condimentum.</p>
+                <ul>
+                    <li>Nam iaculis tortor nec mollis condimentum.</li>
+                    <li>Nam iaculis tortor nec mollis condimentum.</li>
+                    <li>Morbi ultricies justo ac nibh ullamcorper ultricies. Nam quis viverra metus. Sed tincidunt mi id varius volutpat. Maecenas venenatis in velit ac tincidunt.</li>
+                </ul>
+                <h3>Heading 3</h3>
+                <p>Phasellus sit amet ex diam. Morbi ultricies justo ac nibh ullamcorper ultricies. Nam quis viverra metus. Sed tincidunt mi id varius volutpat. Maecenas venenatis in velit ac tincidunt. Donec vulputate quam a metus sodales, eu aliquet lectus
+                    iaculis. Nam finibus enim sit amet ex fringilla rhoncus. Maecenas dictum nisi ac mauris faucibus pretium. Nulla varius massa in urna dignissim mattis. In eget cursus est. Nulla facilisi. Donec fringilla urna ac luctus suscipit.</p>
+                <ol>
+                    <li>Nam iaculis tortor nec mollis condimentum.</li>
+                    <li>Nam iaculis tortor nec mollis condimentum.</li>
+                    <li>Morbi ultricies justo ac nibh ullamcorper ultricies. Nam quis viverra metus. Sed tincidunt mi id varius volutpat. Maecenas venenatis in velit ac tincidunt.</li>
+                </ol>
+                <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Nam iaculis tortor nec mollis condimentum.</p>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="container-wrapper">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-8 col-md-offset-2">
+                <h2>Heading 2</h2>
+                <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Nam iaculis tortor nec mollis condimentum.</p>
+                <h4>Heading 4</h4>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %} {% block sidebarText %}
+<p>Phasellus sit amet ex diam. Morbi ultricies justo ac nibh ullamcorper ultricies. Nam quis viverra metus. Sed tincidunt mi id varius volutpat. Maecenas venenatis in velit ac tincidunt. Donec vulputate quam a metus sodales, eu aliquet lectus iaculis. Nam
+    finibus enim sit amet ex fringilla rhoncus. Maecenas dictum nisi ac mauris faucibus pretium. Nulla varius massa in urna dignissim mattis. In eget cursus est. Nulla facilisi. Donec fringilla urna ac luctus suscipit.</p>
+{% endblock %}