creylopez
/
django-ex
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 2 Wiki Activity
Browse Source

Merge pull request #151 from bcgov/DIV-1089 

DIV-1089: Update visual design
pull/172/head
Arianne 5 years ago
committed by GitHub
parent
6db45a7331 b00b4a4ed2
commit
6081f2e065
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 250 additions and 149 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      edivorce/apps/core/static/css/main.css
  2. +214
    -126
      edivorce/apps/core/static/css/main.scss
  3. +2
    -1
      edivorce/apps/core/static/js/vendor/autogrow.js
  4. +4
    -3
      edivorce/apps/core/templates/partials/alias_field.html
  5. +0
    -1
      edivorce/apps/core/templates/question/12_review.html
  6. +21
    -11
      edivorce/apps/core/templates/success.html
  7. +2
    -0
      edivorce/apps/core/utils/question_step_mapping.py
  8. +2
    -2
      vue/src/components/Uploader/Image.vue
  9. +2
    -2
      vue/src/components/Uploader/ItemTile.vue
  10. +2
    -2
      vue/src/components/Uploader/Uploader.vue

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


+ 214
- 126
edivorce/apps/core/static/css/main.scss View File

@ -7,21 +7,24 @@ $brand-links: #365ebe;
$brand-buttons: $brand-links; $brand-buttons: $brand-links;
$color-blue-dark: $brand-titles; $color-blue-dark: $brand-titles;
$color-blue-medium: #38598A; $color-blue-medium: #38598A;
$color-blue-light: $brand-buttons;
$color-blue: $brand-buttons;
$color-blue-light: #265EBE;
$color-blue-lighter: #d7dff2; $color-blue-lighter: #d7dff2;
$color-grey-dark: $body-copy; $color-grey-dark: $body-copy;
$color-grey-medium: #9D9D9D;
$color-grey-medium: #606060;
$color-grey-light: #d5d5d5; $color-grey-light: #d5d5d5;
$color-grey-lighter: #efefef; $color-grey-lighter: #efefef;
$color-grey-lightest: #f2f2f2; $color-grey-lightest: #f2f2f2;
$color-green: #57b26a;
$color-green: #2e8540;
$color-green-light: #d5e6d8; $color-green-light: #d5e6d8;
$color-green-dark: #2e8540;
$color-gold-light: #e6ca85;
$color-red: #D8292F;
$color-green-darker: #246A33;
$color-green-darkest: #1c5428;
$color-gold-dark: #925E00;
$color-gold-light: #FEEABA;
$color-red-light: #F7D4D5; $color-red-light: #F7D4D5;
$color-red-dark: #AC2025;
$color-yellow-light: #fcf8e3;
$color-red: #D8292F;
$color-red-darker: #AC2025;
$color-red-darkest: #9A1C21;
$font-custom: Myriad-Pro, Calibri, Arial, Sans Serif; $font-custom: Myriad-Pro, Calibri, Arial, Sans Serif;
$font-custom-bold: Myriad-Pro-Bold, Calibri, Arial, Sans Serif; $font-custom-bold: Myriad-Pro-Bold, Calibri, Arial, Sans Serif;
@ -221,15 +224,15 @@ input[type=number]::-webkit-outer-spin-button {
color: #8c8c8c; color: #8c8c8c;
background: $color-grey-lightest; background: $color-grey-lightest;
} }
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
border-bottom: 1px solid $color-grey-light;
border-right: 1px solid $color-grey-light;
border-left: 1px solid $color-grey-light;
font-size: 16px; font-size: 16px;
a { a {
color: #494949;
color: $color-grey-medium;
i { i {
color: #494949;
color: $color-grey-medium;
} }
&:hover { &:hover {
@ -238,18 +241,18 @@ input[type=number]::-webkit-outer-spin-button {
} }
&:hover { &:hover {
background: #d4dce5;
background: $color-blue-lighter;
} }
} }
.fact-sheet-button { .fact-sheet-button {
a { a {
padding-right: 6px; padding-right: 6px;
color: #494949;
color: $color-grey-medium;
i { i {
color: #494949;
color: $color-grey-medium;
&:hover { &:hover {
color: #385dbc;
color: $brand-buttons;
} }
} }
} }
@ -305,7 +308,7 @@ input[type=number]::-webkit-outer-spin-button {
height: 50px; height: 50px;
// exclude last 2 columns because contain buttons // exclude last 2 columns because contain buttons
&:hover td:not(:nth-last-child(-n+2)) { &:hover td:not(:nth-last-child(-n+2)) {
background: #d4dce5;
background: $color-blue-lighter;
} }
} }
@ -320,7 +323,7 @@ div.dollar-prefix {
content: '$ '; content: '$ ';
top: 0; top: 0;
height: 100%; height: 100%;
padding-left: 5px;
padding-left: 10px;
position: absolute; position: absolute;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -373,7 +376,7 @@ div.percent-suffix {
padding: 30px 30px 30px 75px; padding: 30px 30px 30px 75px;
border-radius: 8px; border-radius: 8px;
margin-bottom: 20px; margin-bottom: 20px;
background-color: $color-yellow-light;
background-color: $color-gold-light;
&:after { &:after {
content: "\f071"; content: "\f071";
@ -383,7 +386,7 @@ div.percent-suffix {
text-decoration: inherit; text-decoration: inherit;
position: absolute; position: absolute;
font-size: 24px; font-size: 24px;
color: #f0ad4e;
color: $color-gold-dark;
top: 30px; top: 30px;
left: 27px; left: 27px;
} }
@ -393,7 +396,10 @@ div.percent-suffix {
} }
&.hard-stop { &.hard-stop {
background-color: #faebe9;
background-color: $color-red-light;
hr {
border-top: 1px solid $color-red-darkest;
}
&:after { &:after {
content: "\f05e"; content: "\f05e";
@ -403,7 +409,7 @@ div.percent-suffix {
text-decoration: inherit; text-decoration: inherit;
position: absolute; position: absolute;
font-size: 24px; font-size: 24px;
color: #d9534f;
color: $color-red-darkest;
top: 30px; top: 30px;
left: 27px; left: 27px;
} }
@ -424,7 +430,7 @@ div.percent-suffix {
} }
.checkmark { .checkmark {
background: $color-green-dark;
background: $color-green;
position: relative; position: relative;
padding: 22px 20px 20px 90px; padding: 22px 20px 20px 90px;
color: #ffffff; color: #ffffff;
@ -540,8 +546,8 @@ div.percent-suffix {
.collapse-trigger { .collapse-trigger {
& > div { & > div {
color: $color-blue-light;
border-bottom: solid 1px $color-blue-light;
color: $color-blue;
border-bottom: solid 1px $color-blue;
display: inline; display: inline;
cursor: pointer; cursor: pointer;
@ -654,10 +660,12 @@ div#other_names_fields {
} }
} }
label {
width: calc(100% - 90px);
text-align: left;
}
.label-group {
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
}
} }
} }
@ -669,6 +677,7 @@ div#other_names_fields {
.btn-primary { .btn-primary {
background: $brand-buttons; background: $brand-buttons;
font-weight: bold;
&:hover { &:hover {
background-color: darken($brand-buttons, 20%); background-color: darken($brand-buttons, 20%);
@ -693,10 +702,10 @@ i.fa.fa-question-circle {
margin: 30px 0; margin: 30px 0;
.btn { .btn {
font-size: 18px;
font-size: 16px;
border: none; border: none;
border-radius: 10px;
padding: 12px 15px;
border-radius: 4px;
padding: 16px;
background-color: $brand-buttons; background-color: $brand-buttons;
color: #ffffff; color: #ffffff;
margin-bottom: 12px; margin-bottom: 12px;
@ -704,7 +713,7 @@ i.fa.fa-question-circle {
transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;
&:hover { &:hover {
background-color: darken($brand-buttons, 20%);
background-color: $brand-blue;
-webkit-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;
} }
@ -720,7 +729,7 @@ i.fa.fa-question-circle {
transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;
&:hover { &:hover {
background-color: darken($color-green, 20%);
background-color: $color-green-darkest;
-webkit-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;
} }
@ -737,7 +746,7 @@ i.fa.fa-question-circle {
border-radius: 8px; border-radius: 8px;
position: relative; position: relative;
padding: 30px 30px 30px 75px; padding: 30px 30px 30px 75px;
margin-bottom: 20px;
margin-top: 30px;
ul { ul {
padding-left: 15px; padding-left: 15px;
@ -751,12 +760,12 @@ i.fa.fa-question-circle {
text-decoration: inherit; text-decoration: inherit;
position: absolute; position: absolute;
font-size: 24px; font-size: 24px;
color: $color-red-dark;
color: $color-red-darker;
top: 30px; top: 30px;
left: 27px;
left: 30px;
} }
.warning, .progress-status i { .warning, .progress-status i {
color: $color-red-dark;
color: $color-red-darker;
font-weight: bolder; font-weight: bolder;
margin: 0 3px; margin: 0 3px;
} }
@ -774,6 +783,34 @@ i.fa.fa-question-circle {
} }
} }
.has-error {
input {
border: 2px solid $color-red !important;
}
.help-block {
color: $color-red;
font-weight: bolder;
}
}
.btn-danger {
background-color: $color-red;
border: 1px solid $color-red;
font-weight: bold;
&:hover {
background-color: lighten($color-red, 5%);
}
}
.btn-success {
background-color: $color-green;
border: 1px solid $color-green;
font-weight: bold;
&:hover {
background-color: lighten($color-green, 5%);
}
}
.error-text { .error-text {
color: $color-red; color: $color-red;
} }
@ -795,19 +832,32 @@ i.fa.fa-question-circle {
} }
.btn-radio { .btn-radio {
color: $brand-titles;
background-color: $color-blue-lighter;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
padding: 20px 0;
width: 60px;
height: 60px;
border-radius: 30px;
border: 3px solid $color-blue-lighter;
-webkit-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
color: $color-blue-light;
background-color: $color-blue-lighter;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
padding: 18px 0;
width: 52px;
height: 52px;
margin-left: 7px;
margin-top: 7px;
border-radius: 26px;
-webkit-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
&:before {
content: " ";
position: absolute;
display: block;
width: 64px;
height: 64px;
border-radius: 32px;
margin-top: -25.2px;
margin-left: -7.2px;
border: 1px solid $color-grey-medium;
}
} }
.btn-radio.active, .btn-radio.active,
@ -849,7 +899,7 @@ fieldset[disabled] .btn-radio:hover {
} }
.btn-radio + .btn-radio { .btn-radio + .btn-radio {
margin-left: 15px;
margin-left: 27px;
} }
.btn-radio-group { .btn-radio-group {
@ -884,9 +934,9 @@ fieldset[disabled] .btn-radio:hover {
/* Form Elements*/ /* Form Elements*/
input { input {
border-radius: 4px; border-radius: 4px;
color: #494949;
padding: 12px 15px;
border: solid 1px $color-grey-light;
color: $color-grey-medium;
padding: 12px 15px 12px 20px;
border: solid 1px $color-grey-medium;
line-height: 1em; line-height: 1em;
&:focus { &:focus {
@ -949,7 +999,7 @@ input {
textarea { textarea {
width: 100%; width: 100%;
border-radius: 10px; border-radius: 10px;
color: #494949;
color: $color-grey-medium;
padding: 12px 15px; padding: 12px 15px;
border: solid 1px $color-grey-light; border: solid 1px $color-grey-light;
line-height: 24px; line-height: 24px;
@ -1004,7 +1054,6 @@ textarea {
&:active, &:active,
&:hover { &:hover {
color: #fcfcfc;
text-decoration: underline; text-decoration: underline;
} }
} }
@ -1024,23 +1073,36 @@ textarea {
.mid_banner-dash a, .mid_banner-dash a,
.mid_banner-link a, .mid_banner-link a,
.more_information-link a { .more_information-link a {
padding: 10px 16px;
padding: 15px 16px;
float: right; float: right;
margin-left: 6px; margin-left: 6px;
&.active, &.active,
&:hover { &:hover {
color: #fff; color: #fff;
background-color: $brand-gold;
text-decoration: none;
i { i {
color: #fff; color: #fff;
} }
} }
} }
.mid_banner-dash a {
.mid_banner-dash a,
.mid_banner-link a {
&.active,
&:hover {
text-decoration: underline;
}
}
.more_information-link a {
&.active,
&:hover {
background-color: $brand-gold;
text-decoration: none;
}
}
.mid_banner-dash a {
margin-left: 24px; margin-left: 24px;
} }
@ -1065,26 +1127,38 @@ textarea {
} }
} }
.success-buttons {
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-line-pack: justify;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
.flex-row {
width: 45%;
border-radius: 8px;
background-color: $color-blue-lighter;
border: 1px solid $brand-buttons;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 24px 30px;
}
.success-page {
.success-buttons {
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-line-pack: justify;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
.flex-row {
width: 32%;
border-radius: 8px;
background-color: $color-blue-lighter;
border: 1px solid $brand-buttons;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 30px 45px;
@media (max-width: 992px) {
padding: 20px 20px;
}
h3 {
font-size: 26px;
line-height: 36px;
}
}
}
.col-flex.content-column {
padding-bottom: 92px;
}
} }
@ -1100,12 +1174,16 @@ textarea {
.form-group { .form-group {
display: block; display: block;
width: 100%; width: 100%;
margin-top: 5px;
margin-bottom: 5px; margin-bottom: 5px;
@media (min-width: 992px) { @media (min-width: 992px) {
-webkit-box-flex: 1; -webkit-box-flex: 1;
-ms-flex: 1; -ms-flex: 1;
flex: 1; flex: 1;
} }
input {
margin-bottom: 0;
}
} }
.form-control { .form-control {
@ -1118,7 +1196,7 @@ textarea {
} }
margin-bottom: 10px; margin-bottom: 10px;
padding: 10px; padding: 10px;
background: $color-grey-lighter;
background: $color-grey-lightest;
border-radius: 5px; border-radius: 5px;
label { label {
@ -1166,7 +1244,7 @@ textarea {
.footer { .footer {
background-color: $brand-blue; background-color: $brand-blue;
border-top: 3px solid $brand-gold;
border-top: 2px solid $brand-gold;
padding: 15px; padding: 15px;
.footer-container ul { .footer-container ul {
@ -1194,14 +1272,14 @@ textarea {
.question-well { .question-well {
min-height: 20px; min-height: 20px;
padding: 25px;
margin-top: 25px;
padding: 30px;
margin-top: 28px;
border: 1px solid $color-grey-light; border: 1px solid $color-grey-light;
border-radius: 10px;
border-radius: 8px;
background: #ffffff; background: #ffffff;
&.hasFocus { &.hasFocus {
border: 1px solid $color-blue-light;
border: 1px solid $color-blue;
-webkit-transition: 0.1s ease-in-out all; -webkit-transition: 0.1s ease-in-out all;
transition: 0.1s ease-in-out all; transition: 0.1s ease-in-out all;
} }
@ -1224,9 +1302,10 @@ textarea {
font-family: $font-custom-bold; font-family: $font-custom-bold;
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
padding: 4px 6px;
padding: 6px;
margin-left: 16px; margin-left: 16px;
white-space: nowrap; white-space: nowrap;
vertical-align: bottom;
&.inline { &.inline {
border: none; border: none;
padding: 0; padding: 0;
@ -1236,6 +1315,7 @@ textarea {
.required { .required {
color: $color-red; color: $color-red;
border: $color-red 2px solid; border: $color-red 2px solid;
vertical-align: text-bottom;
} }
.optional { .optional {
@ -1398,7 +1478,7 @@ textarea {
} }
.review-child-heading { .review-child-heading {
background-color: #D4DCE5;
background-color: $color-blue-lighter;
} }
.review-table-spacer { .review-table-spacer {
@ -1444,6 +1524,11 @@ textarea {
width: 30%; width: 30%;
min-width: 192px; min-width: 192px;
} }
thead {
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
}
} }
.collapse > div, .collapse > div,
@ -1532,7 +1617,7 @@ textarea {
padding: 32px 20px 32px 20px; padding: 32px 20px 32px 20px;
margin-bottom: 50px; margin-bottom: 50px;
background-color: $color-grey-lightest; background-color: $color-grey-lightest;
border: 1px solid $color-grey-medium;
border: 1px solid $color-grey-light;
border-radius: 8px; border-radius: 8px;
} }
} }
@ -1561,25 +1646,11 @@ textarea {
-webkit-box-ordinal-group: 4; -webkit-box-ordinal-group: 4;
-ms-flex-order: 3; -ms-flex-order: 3;
order: 3; order: 3;
&.shroud {
&:before {
content: "";
position: absolute;
width: 100%;
display: block;
height: 100%;
background: linear-gradient(to top, rgba(0,0,0,0.35) 0%, transparent 90%);
//z-index: 1;
}
}
} }
.content-column { .content-column {
/* max-width: 800px;*/
/* padding: 35px 50px 50px 50px;*/
max-width: 1280px; max-width: 1280px;
padding: 36px 6% 50px;
padding: 36px 6% 54px;
position: relative; position: relative;
} }
@ -1587,7 +1658,7 @@ textarea {
-webkit-box-flex: 0; -webkit-box-flex: 0;
-ms-flex: 0 0 280px; -ms-flex: 0 0 280px;
flex: 0 0 280px; flex: 0 0 280px;
background-color: $color-grey-lighter;
background-color: $color-grey-lightest;
-webkit-box-ordinal-group: 3; -webkit-box-ordinal-group: 3;
-ms-flex-order: 2; -ms-flex-order: 2;
order: 2; order: 2;
@ -1658,7 +1729,7 @@ textarea {
.content-column { .content-column {
margin: 54px auto 100px; margin: 54px auto 100px;
max-width: 840px;
max-width: 800px;
padding: 0 20px; padding: 0 20px;
text-align: center; text-align: center;
color: #ffffff; color: #ffffff;
@ -1729,8 +1800,8 @@ textarea {
} }
&.shaded-box { &.shaded-box {
padding-top: 22px;
padding-bottom: 50px;
padding-top: 18px;
padding-bottom: 30px;
margin-top: 0; margin-top: 0;
border-bottom-left-radius: 8px; border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px; border-bottom-right-radius: 8px;
@ -1774,8 +1845,8 @@ textarea {
color: $color-blue-dark; color: $color-blue-dark;
font-size: 24px; font-size: 24px;
line-height: 36px; line-height: 36px;
padding-top: 60px;
padding-bottom: 35px;
padding-top: 55px;
padding-bottom: 30px;
margin: 0; margin: 0;
} }
.btn { .btn {
@ -1808,7 +1879,7 @@ textarea {
align-items: center; align-items: center;
height: 70px; height: 70px;
margin-bottom: 12px; margin-bottom: 12px;
padding: 0 24px;
padding: 0 16px;
font-weight: bold; font-weight: bold;
.progress-icon { .progress-icon {
@ -1857,14 +1928,14 @@ textarea {
&.complete { &.complete {
i, i,
span { span {
color: $color-green-dark;
border-color: $color-green-dark;
color: $color-green-darker;
border-color: $color-green-darker;
} }
} }
&:focus, &:focus,
&:hover { &:hover {
background-color: $color-gold-light;
background-color: $color-grey-light;
text-decoration: none; text-decoration: none;
} }
@ -1882,10 +1953,10 @@ textarea {
float: right; float: right;
&.incomplete, &.skipped { &.incomplete, &.skipped {
color: $color-red-dark;
color: $color-red;
} }
&.complete { &.complete {
color: $color-green-dark;
color: $color-green-darker;
} }
} }
} }
@ -1898,8 +1969,16 @@ textarea {
padding: 5px 24px 5px 22px; padding: 5px 24px 5px 22px;
border-left:2px solid $brand-gold; border-left:2px solid $brand-gold;
width: 100%; width: 100%;
}
.progress-status i {
&.complete {
color: $color-green-darkest;
}
&.incomplete, &.skipped {
color: $color-red-darkest;
}
}
}
.progress-sub-question { .progress-sub-question {
width: 190px; width: 190px;
@ -1996,8 +2075,12 @@ textarea {
&:focus, &:focus,
&:hover { &:hover {
background-color: $color-blue-lighter;
background-color: $color-grey-lightest;
text-decoration: none; text-decoration: none;
&.incomplete, &.skipped {
color: $color-red-darker;
}
} }
&:first-child { &:first-child {
@ -2051,9 +2134,9 @@ textarea {
} }
} }
&:focus,
&:hover {
background-color: $brand-gold;
&:focus:not(.active),
&:hover:not(.active){
background-color: $color-blue-medium;
} }
} }
} }
@ -2068,11 +2151,16 @@ textarea {
} }
&.complete .progress-icon i { &.complete .progress-icon i {
border: solid 1px $color-green-dark;
background-color: $color-green-dark;
border: solid 1px $color-green-darker;
background-color: $color-green-darker;
color: $brand-gold; color: $brand-gold;
} }
} }
.progress-status {
i.incomplete, i.skipped {
color: $color-red-darker;
}
}
} }
} }


+ 2
- 1
edivorce/apps/core/static/js/vendor/autogrow.js View File

@ -20,7 +20,7 @@
//if the element is "invisible", we get an incorrect height value //if the element is "invisible", we get an incorrect height value
//to get correct value, clone and append to the body. //to get correct value, clone and append to the body.
if (elem.is(':visible') || parseInt(elem.css('height'), 10) > 0) { if (elem.is(':visible') || parseInt(elem.css('height'), 10) > 0) {
min = parseInt(elem.css('height'), 75) || elem.innerHeight();
min = parseInt(elem.css('height'), 10) || elem.innerHeight();
} else { } else {
clone = elem.clone() clone = elem.clone()
.addClass(opts.cloneClass) .addClass(opts.cloneClass)
@ -35,6 +35,7 @@
min = clone.innerHeight(); min = clone.innerHeight();
clone.remove(); clone.remove();
} }
min = Math.max(min, 75);
if (opts.fixMinHeight) { if (opts.fixMinHeight) {
elem.data('autogrow-start-height', min); //set min height elem.data('autogrow-start-height', min); //set min height
} }


+ 4
- 3
edivorce/apps/core/templates/partials/alias_field.html View File

@ -8,9 +8,10 @@
<option value="with assumed name of" {% if alias_type == 'with assumed name of' %} selected {% endif %}>With assumed name of</option> <option value="with assumed name of" {% if alias_type == 'with assumed name of' %} selected {% endif %}>With assumed name of</option>
</select> </select>
{% endcomment %} {% endcomment %}
<label>Also known as</label>
<input type="button" class="btn btn-danger btn-delete-name form-control pull-right" value="Delete" />
<div class="label-group">
<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 class="form-group name-group alias-body">
<div> <div>
<p>First Name</p> <p>First Name</p>


+ 0
- 1
edivorce/apps/core/templates/question/12_review.html View File

@ -216,7 +216,6 @@
</div> </div>
{% if derived.any_errors %} {% if derived.any_errors %}
<div class="review-warning"> <div class="review-warning">
<div><span class="exclamation"><i class="fa fa-fw fa-exclamation-circle"></i></span></div>
<div> <div>
You have not completed at least one field that is required to create your forms. You have not completed at least one field that is required to create your forms.
Missing required fields are noted on this screen in the Missing required fields are noted on this screen in the


+ 21
- 11
edivorce/apps/core/templates/success.html View File

@ -1,43 +1,53 @@
{% extends 'base.html' %} {% extends 'base.html' %}
{% block title %}{{ block.super }}: Qualified{% endblock %} {% block title %}{{ block.super }}: Qualified{% endblock %}
{% block container_col %}success-page{% endblock %}
{% block content %} {% block content %}
<h1 class="checkmark">You have met the conditions for using the Online Divorce Assistant</h1> <h1 class="checkmark">You have met the conditions for using the Online Divorce Assistant</h1>
<div class="question-well">
<h3>1. Gather your documents</h3>
<p>You will need the following documents to move forward with the divorce request:</p>
<ul>
<li>Marriage certificate</li>
<li>Separation agreement (if applicable)</li>
<li>Court order (if applicable)</li>
</ul>
</div>
<div class="question-well"> <div class="question-well">
<h3>Register or Login</h3>
<p>You will need a <strong>Basic BCeID</strong> or <strong>BC Services Card</strong> account to access the Online Divorce Assistant. This will also enable you to securely access multiple other online government services.</p>
<h3>2. Register or Login</h3>
<p>
You will need a <strong>Basic BCeID</strong> or <strong>BC Services Card</strong> account to access the Online Divorce Assistant.
This will also enable you to securely access multiple other online government services.
</p>
<div class="success-buttons"> <div class="success-buttons">
<div class="flex-row" id="bcId" style="width: 30%;">
<h3>Register for a <br>Basic BCeID</br></h3>
<div class="flex-row" id="bcId">
<h3>Register for a Basic BCeID</h3>
<p>Once you register, you’ll be taken back to this website.</p> <p>Once you register, you’ll be taken back to this website.</p>
<a class="btn btn-primary btn-lg btn-block" href="{% url 'register' %}"> <a class="btn btn-primary btn-lg btn-block" href="{% url 'register' %}">
Register Register
</a> </a>
</div> </div>
<div class="flex-row" id="scard" style="width: 30%;">
<h3>Set up your <br>BC Services Card</br></h3>
<div class="flex-row" id="scard">
<h3>Set up your BC Services Card</h3>
<p>Once you're set up, you’ll be taken back to this website.</p> <p>Once you're set up, you’ll be taken back to this website.</p>
<a class="btn btn-primary btn-lg btn-block" href="{% url 'register_sc' %}"> <a class="btn btn-primary btn-lg btn-block" href="{% url 'register_sc' %}">
Set Up Set Up
</a> </a>
</div> </div>
<div class="flex-row" id="login" style="width: 30%;">
<h3>Login with a <br>BCeID or BC Services Card</br></h3>
<div class="flex-row" id="login">
<h3>Login with a BCeID or BC Services Card</h3>
<p>Once you login, you’ll be taken back to this website.</p> <p>Once you login, you’ll be taken back to this website.</p>
<a class="btn btn-primary btn-lg btn-block" href="{% url 'oidc_authentication_init' %}"> <a class="btn btn-primary btn-lg btn-block" href="{% url 'oidc_authentication_init' %}">
Login Login
</a> </a>
</div> </div>
</div> </div>
</div> </div>
<p>&nbsp;</p>
{% endblock %} {% endblock %}
{% block formbuttons %} {% block formbuttons %}


+ 2
- 0
edivorce/apps/core/utils/question_step_mapping.py View File

@ -27,6 +27,8 @@ pre_qual_step_question_mapping = {
'05': { '05': {
'original_marriage_certificate', 'original_marriage_certificate',
'provide_certificate_later', 'provide_certificate_later',
'provide_certificate_later_reason',
'not_provide_certificate_reason',
'marriage_certificate_in_english' 'marriage_certificate_in_english'
}, },
'06': { '06': {


+ 2
- 2
vue/src/components/Uploader/Image.vue View File

@ -105,8 +105,8 @@
.image-wrap { .image-wrap {
height: 160px; height: 160px;
border: 1px solid black; border: 1px solid black;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background-color: white; background-color: white;
overflow: hidden; overflow: hidden;
position: relative; position: relative;


+ 2
- 2
vue/src/components/Uploader/ItemTile.vue View File

@ -138,7 +138,7 @@
.bottom-wrapper { .bottom-wrapper {
border-bottom-left-radius: 6px; border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px; border-bottom-right-radius: 6px;
border: 1px solid silver;
border: 1px solid #d5d5d5;
border-top: none; border-top: none;
background-color: #f2f2f2; background-color: #f2f2f2;
margin-bottom: 10px; margin-bottom: 10px;
@ -178,7 +178,7 @@
&:disabled { &:disabled {
i.fa { i.fa {
opacity: 0.15;
color: #d5d5d5;
} }
} }


+ 2
- 2
vue/src/components/Uploader/Uploader.vue View File

@ -569,7 +569,7 @@
text-align: left; text-align: left;
border: 1px #365ebe dashed; border: 1px #365ebe dashed;
border-radius: 8px; border-radius: 8px;
padding: 20px 32px 0 24px;
padding: 20px 32px 0 20px;
margin-bottom: 5px; margin-bottom: 5px;
&.dragging { &.dragging {
@ -596,7 +596,7 @@
} }
.fa-plus-circle { .fa-plus-circle {
font-size: 3rem;
font-size: 30px;
margin-bottom: 8px; margin-bottom: 8px;
color: #365ebe; color: #365ebe;
} }


Write Preview
Loading…
Cancel
Save