From 29b082d779124056408b65f49611c9c88a28adc3 Mon Sep 17 00:00:00 2001 From: akiyamn Date: Wed, 1 Jun 2022 16:53:44 +1000 Subject: Add floating page and fix some margins --- src/26.html | 34 +++++++++++++++++++--------------- src/29.html | 2 +- src/30.html | 2 +- src/30a.html | 2 +- src/31.html | 2 +- src/34.html | 22 +++++++++++++--------- src/css/floatingpage.css | 16 ++++++++++++++++ src/css/fullonmobile.css | 21 ++++++++++++++------- src/css/progressbar.css | 10 +++++----- src/css/uploadbox.css | 3 +++ 10 files changed, 74 insertions(+), 40 deletions(-) create mode 100644 src/css/floatingpage.css diff --git a/src/26.html b/src/26.html index 6c0f7dc..9328871 100644 --- a/src/26.html +++ b/src/26.html @@ -9,6 +9,7 @@ +

@@ -23,21 +24,24 @@

Document upload service

Application for Medicare Entitlement Statement

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

How it works

cursus euismod quis viverra
nibh cras pulvinar mattis nunc.

- Bibendum neque egestas congue quisque egestas diam in arcu cursus. - Diam vulputate ut pharetra sit amet. Aliquet sagittis id consectetur purus ut faucibus. -

Your privacy

Pretium lectus quam id leo in vitae. Turpis massa tincidunt dui ut.

- Start adding documents - Cancel + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

How it works

cursus euismod quis viverra
nibh cras pulvinar mattis nunc.

+ Bibendum neque egestas congue quisque egestas diam in arcu cursus. + Diam vulputate ut pharetra sit amet. Aliquet sagittis id consectetur purus ut faucibus. +

Your privacy

Pretium lectus quam id leo in vitae. Turpis massa tincidunt dui ut.

+ Start adding documents + Cancel +

diff --git a/src/29.html b/src/29.html index 28d6c20..bae61f1 100644 --- a/src/29.html +++ b/src/29.html @@ -28,7 +28,7 @@

Document upload service

signaturepage.jpg

Uploading

diff --git a/src/30.html b/src/30.html index 8f01a1a..eb340f9 100644 --- a/src/30.html +++ b/src/30.html @@ -27,7 +27,7 @@

Document upload service

signaturepage.jpg

Uploading

diff --git a/src/30a.html b/src/30a.html index 8f01a1a..eb340f9 100644 --- a/src/30a.html +++ b/src/30a.html @@ -27,7 +27,7 @@

Document upload service

signaturepage.jpg

Uploading

diff --git a/src/31.html b/src/31.html index e273e59..82a202b 100644 --- a/src/31.html +++ b/src/31.html @@ -29,7 +29,7 @@

Document upload service

signaturepage.jpg

Uploading

diff --git a/src/34.html b/src/34.html index dca423d..d0337a3 100644 --- a/src/34.html +++ b/src/34.html @@ -12,6 +12,8 @@ + +

@@ -24,17 +26,19 @@

Your (dynamic form) and any supporting documents you added are uploaded and we've notified (dynamic service).

Your document upload reference number is (number).

- -

- Lorem ipsum dolor sit amet, consec tetur adipiscing elit. +

Your (dynamic form) and any supporting documents you added are uploaded and we've notified (dynamic service).

Your document upload reference number is (number).

+ Lorem ipsum dolor sit amet, consec tetur adipiscing elit. +

diff --git a/src/css/floatingpage.css b/src/css/floatingpage.css new file mode 100644 index 0000000..23672e4 --- /dev/null +++ b/src/css/floatingpage.css @@ -0,0 +1,16 @@ + +/* Desktop (at least 64em) */ + +@media only screen and (min-width: 48em) { + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .floating-page { + background-color: var(--white); + padding: 3rem; + margin: 0 auto; + box-shadow: 0px 2px 6px #10182040; + border-radius: 5px; + max-width: 80rem; + } + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .floating-page > :first-child { + margin-top: 0; + } +} \ No newline at end of file diff --git a/src/css/fullonmobile.css b/src/css/fullonmobile.css index db61ba8..392ebbb 100644 --- a/src/css/fullonmobile.css +++ b/src/css/fullonmobile.css @@ -1,7 +1,7 @@ @media only screen and (min-width: 48em) { - .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .full-on-mobile { - background-color: initial; + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .full-width-on-mobile { + /* background-color: initial; */ outline: none; margin: initial; } @@ -9,16 +9,23 @@ @media only screen and (max-width: 48em) { - .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .full-on-mobile > .upload-box { + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .full-width-on-mobile > .upload-box { border: none; padding: 0; + margin: 0; + } + + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .full-width-on-mobile { + background-color: var(--white); + box-shadow: -2rem 0 0 0 var(--white), 2rem 0 0 0 var(--white); + padding: 1rem 0; + /* outline: solid 2rem var(--white); */ + /* margin-top: 3rem; */ } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .full-on-mobile { background-color: var(--white); - box-shadow: -2rem 0px 0px 0px var(--white), 2rem 0px 0px 0px var(--white); - /* outline: solid 2rem var(--white); - margin-top: 3rem; */ - + padding: 1rem 0; + outline: solid 10rem var(--white); } } \ No newline at end of file diff --git a/src/css/progressbar.css b/src/css/progressbar.css index 830485c..cc8f08e 100644 --- a/src/css/progressbar.css +++ b/src/css/progressbar.css @@ -1,15 +1,15 @@ :root { --progress-bar-height: 6px; - --progress-bar-width: 87%; + --progress-bar-width: 85%; --progress-bar-radius: 3px; } -.progress-bar { +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .progress-bar { display: flex; align-items: center; justify-content: space-between; margin: 1rem 0; } -.progress-bar div.progress-bar__base { +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .progress-bar div.progress-bar__base { background-color: #bbb; width: 100%; height: var(--progress-bar-height); @@ -17,13 +17,13 @@ border-radius: var(--progress-bar-radius); } -.progress-bar div.progress-bar__progress { +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .progress-bar div.progress-bar__progress { background-color: var(--navy); width: 68%; /* this can be controlled with javascript to set percent loaded */ height: var(--progress-bar-height); border-radius: var(--progress-bar-radius); } -.progress-bar div.progress-bar__percentage { +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .progress-bar div.progress-bar__percentage { font-size: var(--font-size-14); font-weight: bold; color: var(--light-grey); diff --git a/src/css/uploadbox.css b/src/css/uploadbox.css index a48f84b..7305162 100644 --- a/src/css/uploadbox.css +++ b/src/css/uploadbox.css @@ -10,6 +10,9 @@ margin: 10px 0; max-width: 48em; } +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box > :first-child { + margin-top: 0; +} .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box .upload-box__title { font-weight: bold; font-size: var(--font-size-18); -- cgit v1.2.3