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

DIV-845 - added shaded boxes to homepage

pull/160/head
Michael Olund 7 years ago
parent
6b1fd71231
commit
a7d302027b
5 changed files with 244 additions and 201 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -0
      .gitignore
  2. +2
    -2
      edivorce/apps/core/static/css/main.css
  3. +232
    -192
      edivorce/apps/core/static/css/main.scss
  4. +7
    -6
      edivorce/apps/core/templates/intro.html
  5. +1
    -1
      requirements.txt

+ 2
- 0
.gitignore View File

@ -71,3 +71,5 @@ target/
.sass-cache/
*.map
venv/
.vs/

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


+ 232
- 192
edivorce/apps/core/static/css/main.scss View File

@ -1266,197 +1266,223 @@ textarea {
}
/* Column Grid in flexbox */
.row-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
height: 100%;
overflow: hidden;
background: #fdfdfd;
position: relative;
.col {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
box-sizing: border-box;
-webkit-box-ordinal-group: 4;
-ms-flex-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 {
/* max-width: 800px;*/
/* padding: 35px 50px 50px 50px;*/
max-width: 1280px;
padding: 36px 6% 50px;
position: relative;
}
.progress-column {
-webkit-box-flex: 0;
-ms-flex: 0 0 280px;
flex: 0 0 280px;
background-color: $color-grey-lighter;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.dashnav-column {
-webkit-box-flex: 0;
-ms-flex: 0 0 280px;
flex: 0 0 280px;
background-color: $brand-titles;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.more_information-column {
background-color: $color-grey-lighter;
box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.1);
padding: 20px 45px;
font-size: 14px;
line-height: 21px;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
height: auto;
@media (min-width: 1920px) {
font-size: 16px;
line-height: 1.5;
}
.more_information-close {
float: right;
font-size: 24px;
margin-top: 3px;
i.fa {
color: $brand-blue;
}
}
h2 {
color: $brand-blue;
padding-right: 25px;
}
h3 {
font-size: 21px;
line-height: 28px;
}
}
@media (min-width: 992px) {
.more_information-column {
padding: 45px 20px;
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
-webkit-box-flex: 0;
-ms-flex: 0 0 306px;
flex: 0 0 306px;
}
}
&.intro-page {
background: $color-blue-medium url("../img/bg-edivorce__landing.jpg") no-repeat top center fixed;
background-size: cover;
.content-column {
margin: 54px auto 100px;
max-width: 840px;
padding: 0 20px;
text-align: center;
color: #ffffff;
position: relative;
h1,
h2,
h3 {
color: #ffffff;
}
h2 {
font-size: 30px;
font-weight: 600;
margin: 42px 0 0;
}
.intro {
font-size: 24px;
line-height: 36px;
margin: 0 100px;
}
a {
color: #ffffff;
text-decoration: none;
}
a:focus,
a:hover {
text-decoration: underline;
&.btn {
text-decoration: none;
}
}
.btn-group-lg > .btn,
.btn-lg {
padding: 12px 40px;
margin: 10px;
}
.flex-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 20px 0;
text-align: left;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
font-size: 18px;
.flex-column {
width: 45%;
}
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
height: 100%;
overflow: hidden;
background: #fdfdfd;
position: relative;
span.number-circle {
border: solid 2px white;
padding: 0;
border-radius: 40px;
width: 40px;
height: 40px;
display: inline-block;
text-align: center;
margin-right: 10px;
font-size: 21px;
}
}
}
}
.col {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
box-sizing: border-box;
-webkit-box-ordinal-group: 4;
-ms-flex-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 {
/* max-width: 800px;*/
/* padding: 35px 50px 50px 50px;*/
max-width: 1280px;
padding: 36px 6% 50px;
position: relative;
}
.progress-column {
-webkit-box-flex: 0;
-ms-flex: 0 0 280px;
flex: 0 0 280px;
background-color: $color-grey-lighter;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.dashnav-column {
-webkit-box-flex: 0;
-ms-flex: 0 0 280px;
flex: 0 0 280px;
background-color: $brand-titles;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.more_information-column {
background-color: $color-grey-lighter;
box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.1);
padding: 20px 45px;
font-size: 14px;
line-height: 21px;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
height: auto;
@media (min-width: 1920px) {
font-size: 16px;
line-height: 1.5;
}
.more_information-close {
float: right;
font-size: 24px;
margin-top: 3px;
i.fa {
color: $brand-blue;
}
}
h2 {
color: $brand-blue;
padding-right: 25px;
}
h3 {
font-size: 21px;
line-height: 28px;
}
}
@media (min-width: 992px) {
.more_information-column {
padding: 45px 20px;
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
-webkit-box-flex: 0;
-ms-flex: 0 0 306px;
flex: 0 0 306px;
}
}
&.intro-page {
background: $color-blue-medium url("../img/bg-edivorce__landing.jpg") no-repeat top center fixed;
background-size: cover;
.content-column {
margin: 54px auto 100px;
max-width: 840px;
padding: 0 20px;
text-align: center;
color: #ffffff;
position: relative;
h1,
h2,
h3 {
color: #ffffff;
}
h2 {
font-size: 30px;
font-weight: 600;
margin: 42px 0 0;
&.shaded-box {
padding-top: 28px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
}
.intro {
font-size: 24px;
line-height: 36px;
margin: 0 100px;
}
a {
color: #ffffff;
text-decoration: none;
}
a:focus,
a:hover {
text-decoration: underline;
&.btn {
text-decoration: none;
}
}
.btn-group-lg > .btn,
.btn-lg {
padding: 12px 40px;
margin: 10px;
}
.flex-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 20px 0;
text-align: left;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
font-size: 18px;
.flex-column {
width: 45%;
}
&.shaded-box {
padding-top: 22px;
padding-bottom: 50px;
margin-top: 0;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
.flex-column {
&.left {
padding-left: 30px;
}
&.right {
padding-right: 30px;
}
}
}
span.number-circle {
border: solid 2px white;
padding: 0;
border-radius: 40px;
width: 40px;
height: 40px;
display: inline-block;
text-align: center;
margin-right: 10px;
font-size: 21px;
}
}
}
}
}
/* Side Progress Navigation */
.dashnav-column,
@ -1802,9 +1828,23 @@ textarea {
}
.footnote {
margin-top: 72px;
margin-top: 40px;
margin-bottom: 52px;
font-size: 14px;
font-size: 16px;
h5 {
font-size: 30px;
margin-bottom: 20px;
}
&.shaded-box {
border-radius: 8px;
padding: 25px 80px 25px 80px;
}
}
.shaded-box {
background-color: rgba(0,0,0,0.35);
}
#delete_child_modal,


+ 7
- 6
edivorce/apps/core/templates/intro.html View File

@ -10,17 +10,17 @@
<p class="intro">Forms, deadlines, tasks... Divorce can be a difficult enough time as it is without having to navigate through confusing legal language. That's why this online tool is here: to help you get through the details, procedures, and paperwork.</p>
<h2>How it Works</h2>
<h2 class="shaded-box">How it Works</h2>
<div class="flex-wrapper">
<div class="flex-column">
<div class="flex-wrapper shaded-box">
<div class="flex-column left">
<h3><span class="number-circle">1</span> Answer Questions</h3>
<p>
Our completely free and secure online questionnaire will save your work so you can proceed at your own pace.
</p>
</div>
<div class="flex-column">
<div class="flex-column right">
<h3><span class="number-circle">2</span> Print Your Forms</h3>
<p>
Once you're done with the questions, you'll print your papers and file at your local court registry. That’s all there is to it!
@ -29,8 +29,9 @@
</div>
<div class="footnote">
<h5><strong>*BETA SERVICE - JOINT DIVORCE ONLY</strong></h5>
<div class="footnote shaded-box">
<h5><strong>*Beta Service - Joint Divorce Only</strong></h5>
<p>
Joint divorce means making an application for a divorce together with your spouse. It means that you and your
spouse agree about getting a divorce and that you agree about all of the family law issues relevant to your


+ 1
- 1
requirements.txt View File

@ -6,7 +6,7 @@ django-sass-processor==0.5.5
djangorestframework==3.5.3
gunicorn==19.4.5
libsass==0.13.3
psycopg2==2.6.1
psycopg2==2.7.3
requests==2.13.0
six==1.10.0
Unipath==1.1


Write Preview
Loading…
Cancel
Save