From e207761b6637863953e1d1ae8d9b835272456ec9 Mon Sep 17 00:00:00 2001 From: akiyamn Date: Wed, 1 Jun 2022 15:47:03 +1000 Subject: Side box working on desktop and mobile mode --- src/26.html | 2 +- src/29.html | 56 +++++++++++++++++++---------------- src/30.html | 59 +++++++++++++++++++++---------------- src/30a.html | 4 +-- src/31.html | 78 +++++++++++++++++++++++++++---------------------- src/css/pdfpreview.css | 18 +++++++++--- src/css/progressbar.css | 3 +- src/css/style.css | 21 +++++-------- 8 files changed, 134 insertions(+), 107 deletions(-) diff --git a/src/26.html b/src/26.html index a95397b..6c0f7dc 100644 --- a/src/26.html +++ b/src/26.html @@ -25,8 +25,8 @@

Application for Medicare Entitlement Statement

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

How it works

-

Sed do eiusmod tempor incididunt ut labore et dolore:

diff --git a/src/29.html b/src/29.html index 625a1be..28d6c20 100644 --- a/src/29.html +++ b/src/29.html @@ -11,6 +11,8 @@ + +
@@ -26,33 +28,37 @@
Document upload service

signaturepage.jpg

-
-

Uploading

-
-
-
+
+
+

Uploading

+
+
+
+
+
68%
-
68%
+ +
+ +
+

What you need to know

+

Lorem ipsum dolor sit amet.

+
    + Sed do eiusmod tempor incididunt ut labore et dolore: +
  • cursus euismod quis viverra
    • +
  • nibh cras pulvinar mattis nunc.
    • +
+
    + Sed do eiusmod tempor incididunt ut labore et dolore: +
  • cursus euismod quis viverra
    • +
  • nibh cras pulvinar mattis nunc.
    • +
+

Pretium lectus quam id leo in vitae

+

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

- -
-

What you need to know

-

Lorem ipsum dolor sit amet.

-

Sed do eiusmod tempor incididunt ut labore et dolore:

-
    -
  • cursus euismod quis viverra
    • -
  • nibh cras pulvinar mattis nunc.
    • -
-

Sed do eiusmod tempor incididunt ut labore et dolore:

-
    -
  • cursus euismod quis viverra
    • -
  • nibh cras pulvinar mattis nunc.
    • -
-

Pretium lectus quam id leo in vitae

-

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

diff --git a/src/30.html b/src/30.html index cfbce96..8f01a1a 100644 --- a/src/30.html +++ b/src/30.html @@ -10,6 +10,9 @@ + + +
@@ -24,35 +27,41 @@
Document upload service

signaturepage.jpg

+
+
-
-

Uploading

- -
-
-
loading animation
- Generating preview... +

Uploading

+ +
+
+
loading animation
+ Generating preview... +
+
+ +
+

What you need to know

+

Lorem ipsum dolor sit amet.

+
    + Sed do eiusmod tempor incididunt ut labore et dolore: +
  • cursus euismod quis viverra
    • +
  • nibh cras pulvinar mattis nunc.
    • +
+
    + Sed do eiusmod tempor incididunt ut labore et dolore: +
  • cursus euismod quis viverra
    • +
  • nibh cras pulvinar mattis nunc.
    • +
+

Pretium lectus quam id leo in vitae

+

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

-
-

What you need to know

-

Lorem ipsum dolor sit amet.

-

Sed do eiusmod tempor incididunt ut labore et dolore:

-
    -
  • cursus euismod quis viverra
    • -
  • nibh cras pulvinar mattis nunc.
    • -
-

Sed do eiusmod tempor incididunt ut labore et dolore:

-
    -
  • cursus euismod quis viverra
    • -
  • nibh cras pulvinar mattis nunc.
    • -
-

Pretium lectus quam id leo in vitae

-

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

+
+
diff --git a/src/30a.html b/src/30a.html index ad26dc5..8f01a1a 100644 --- a/src/30a.html +++ b/src/30a.html @@ -43,13 +43,13 @@

What you need to know

Lorem ipsum dolor sit amet.

-

Sed do eiusmod tempor incididunt ut labore et dolore:

    + Sed do eiusmod tempor incididunt ut labore et dolore:
  • cursus euismod quis viverra
  • nibh cras pulvinar mattis nunc.
-

Sed do eiusmod tempor incididunt ut labore et dolore:

    + Sed do eiusmod tempor incididunt ut labore et dolore:
  • cursus euismod quis viverra
  • nibh cras pulvinar mattis nunc.
diff --git a/src/31.html b/src/31.html index d6b8950..e273e59 100644 --- a/src/31.html +++ b/src/31.html @@ -10,7 +10,10 @@ + + +
@@ -26,44 +29,49 @@
Document upload service

signaturepage.jpg

-
-

Uploading

-
File size: 378 KB
-
- -
- Lorem ipsum dolor sit amet, consec tetur adipiscing elit. +
+
+ +

Uploading

+
File size: 378 KB
+
+ +
+ Lorem ipsum dolor sit amet, consec tetur adipiscing elit. +
+

Cursus euismod quis viverra nibh cras pulvinar mattis nunc. + Bibendum neque egestas congue quisque egestas diam in arcu cursus. +

+
+ Delete + Replace +
+
+ +
+ Continue
-

Cursus euismod quis viverra nibh cras pulvinar mattis nunc. - Bibendum neque egestas congue quisque egestas diam in arcu cursus. -

-
- Delete - Replace -
-
- + +
+

What you need to know

+

Lorem ipsum dolor sit amet.

+
    + Sed do eiusmod tempor incididunt ut labore et dolore: +
  • cursus euismod quis viverra
    • +
  • nibh cras pulvinar mattis nunc.
    • +
+
    + Sed do eiusmod tempor incididunt ut labore et dolore: +
  • cursus euismod quis viverra
    • +
  • nibh cras pulvinar mattis nunc.
    • +
+

Pretium lectus quam id leo in vitae

+

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

- Continue -
-

What you need to know

-

Lorem ipsum dolor sit amet.

-

Sed do eiusmod tempor incididunt ut labore et dolore:

-
    -
  • cursus euismod quis viverra
    • -
  • nibh cras pulvinar mattis nunc.
    • -
-

Sed do eiusmod tempor incididunt ut labore et dolore:

-
    -
  • cursus euismod quis viverra
    • -
  • nibh cras pulvinar mattis nunc.
    • -
-

Pretium lectus quam id leo in vitae

-

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

diff --git a/src/css/pdfpreview.css b/src/css/pdfpreview.css index 35b329b..075841b 100644 --- a/src/css/pdfpreview.css +++ b/src/css/pdfpreview.css @@ -1,4 +1,4 @@ -.pdf-preview-loading { +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .pdf-preview-loading { background-color: #EDF2F4; height: 128px; margin: 24px 0; @@ -7,18 +7,28 @@ justify-content: space-evenly; text-align: center; } -.pdf-preview-loading * { +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .pdf-preview-loading * { margin: 0 auto; } -.pdf-preview { +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .pdf-preview { background-color: var(--black); margin: 24px 0; min-height: 100px; max-height: 400px; overflow: hidden; } -.pdf-preview img { +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .pdf-preview img { display: block; max-width: 100%; margin: 0 auto; } + +@media only screen and (min-width: 64em) { + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .pdf-preview-loading { + min-height: 15rem; + } + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .pdf-preview-loading__text { + font-size: var(--font-size-24); + font-weight: bold; + } +} \ No newline at end of file diff --git a/src/css/progressbar.css b/src/css/progressbar.css index 0c1300d..830485c 100644 --- a/src/css/progressbar.css +++ b/src/css/progressbar.css @@ -7,6 +7,7 @@ display: flex; align-items: center; justify-content: space-between; + margin: 1rem 0; } .progress-bar div.progress-bar__base { background-color: #bbb; @@ -17,7 +18,7 @@ } .progress-bar div.progress-bar__progress { - background-color: var(--dark-grey); + 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); diff --git a/src/css/style.css b/src/css/style.css index a172a3e..21ff879 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -37,23 +37,16 @@ font-size: var(--font-size-16); font-weight: bold; color: #000; - margin: 0; -} -.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .no-bottom-margin { - margin-bottom: -1em; + margin: 0.5rem 0; } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice ul { color: #000; + margin: 1rem 0; + padding: 0; + list-style-position: inside; } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice ul li { - padding: 4px; -} -.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .full-box { - background-color: var(--white); - position: absolute; - left: 0; - padding: 20px; - margin-top: 16px; + padding: 0.5rem 0; } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .file-size { font-size: var(--font-size-14); @@ -83,9 +76,9 @@ display: none; } */ .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .subtitle { - font-size: 24px; + font-size: var(--font-size-24); } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice h2 { - font-size: 24px; + font-size: var(--font-size-24); } } -- cgit v1.2.3