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
Unified 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/ .sass-cache/
*.map *.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 */ /* Column Grid in flexbox */
.row-flex { .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 */ /* Side Progress Navigation */
.dashnav-column, .dashnav-column,
@ -1802,9 +1828,23 @@ textarea {
} }
.footnote { .footnote {
margin-top: 72px;
margin-top: 40px;
margin-bottom: 52px; 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, #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> <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> <h3><span class="number-circle">1</span> Answer Questions</h3>
<p> <p>
Our completely free and secure online questionnaire will save your work so you can proceed at your own pace. Our completely free and secure online questionnaire will save your work so you can proceed at your own pace.
</p> </p>
</div> </div>
<div class="flex-column">
<div class="flex-column right">
<h3><span class="number-circle">2</span> Print Your Forms</h3> <h3><span class="number-circle">2</span> Print Your Forms</h3>
<p> <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! 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>
<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> <p>
Joint divorce means making an application for a divorce together with your spouse. It means that you and your 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 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 djangorestframework==3.5.3
gunicorn==19.4.5 gunicorn==19.4.5
libsass==0.13.3 libsass==0.13.3
psycopg2==2.6.1
psycopg2==2.7.3
requests==2.13.0 requests==2.13.0
six==1.10.0 six==1.10.0
Unipath==1.1 Unipath==1.1


Write Preview
Loading…
Cancel
Save