From b15be5185d50c1cf6872262386f2ab37ad407efc Mon Sep 17 00:00:00 2001 From: akiyamn Date: Wed, 1 Jun 2022 14:23:28 +1000 Subject: Basics of desktop mode --- src/27.html | 2 ++ src/30.html | 1 - src/30a.html | 75 ++++++++++++++++++++++++++++++++++++++++++++++++ src/32.html | 4 +++ src/33.html | 8 ++---- src/css/buttons.css | 12 ++++++-- src/css/fullonmobile.css | 24 ++++++++++++++++ src/css/infobox.css | 4 +-- src/css/sidepanel.css | 25 ++++++++++++++++ src/css/style.css | 40 ++++++++++++++++++++++---- src/css/uploadbox.css | 49 ++++++++++++++++++++++++++----- 11 files changed, 220 insertions(+), 24 deletions(-) create mode 100644 src/30a.html create mode 100644 src/css/fullonmobile.css create mode 100644 src/css/sidepanel.css (limited to 'src') diff --git a/src/27.html b/src/27.html index 6437ab0..f6f35d2 100644 --- a/src/27.html +++ b/src/27.html @@ -35,6 +35,8 @@

Quis viverra nibh cras pulvinar mattis nunc. Bibendum neque egestas.

+ +

Supporting documents

Congue quisque egestas diam in arcu cursus. diff --git a/src/30.html b/src/30.html index bb9edf9..cfbce96 100644 --- a/src/30.html +++ b/src/30.html @@ -34,7 +34,6 @@ Generating preview...

- Continue

What you need to know

Lorem ipsum dolor sit amet.

diff --git a/src/30a.html b/src/30a.html new file mode 100644 index 0000000..ad26dc5 --- /dev/null +++ b/src/30a.html @@ -0,0 +1,75 @@ + + + + + DLS - DEVELOPMENT BUILD + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+ +
Document upload service
+

signaturepage.jpg

+
+
+ +

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. +

+
+ +
+ +
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/src/32.html b/src/32.html index f90bb17..e3300ae 100644 --- a/src/32.html +++ b/src/32.html @@ -34,12 +34,14 @@
ms015-2008em-f.pdf
+
signaturepage.jpg
+
@@ -59,6 +61,7 @@
passport.pdf
+
@@ -81,6 +84,7 @@
perm_resident_2022.pdf
+
diff --git a/src/33.html b/src/33.html index 5582610..cd20425 100644 --- a/src/33.html +++ b/src/33.html @@ -24,12 +24,7 @@
- - - +
Document upload service

Confirm and consent

Required documents

@@ -91,6 +86,7 @@ +
diff --git a/src/css/buttons.css b/src/css/buttons.css index f9d5ae7..27d5db9 100644 --- a/src/css/buttons.css +++ b/src/css/buttons.css @@ -4,8 +4,8 @@ .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn { color: var(--btn-text-color); font-size: var(--font-size-16); - margin: 12px 0; - padding: 12px 32px 10px 32px; + margin: 0.75rem 0; + padding: 0.75rem 2rem; cursor: pointer; } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice a.btn { @@ -85,4 +85,12 @@ } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn-group *{ max-width: calc(50% - 1rem); +} + +/* Tablet (at least 40em) */ + +@media only screen and (min-width: 40em) { + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn ~ .btn { + margin-left: 0.5rem; + } } \ No newline at end of file diff --git a/src/css/fullonmobile.css b/src/css/fullonmobile.css new file mode 100644 index 0000000..db61ba8 --- /dev/null +++ b/src/css/fullonmobile.css @@ -0,0 +1,24 @@ +@media only screen and (min-width: 48em) { + + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .full-on-mobile { + background-color: initial; + outline: none; + margin: initial; + } +} + +@media only screen and (max-width: 48em) { + + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .full-on-mobile > .upload-box { + border: none; + padding: 0; + } + + .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; */ + + } +} \ No newline at end of file diff --git a/src/css/infobox.css b/src/css/infobox.css index ca45674..2037f36 100644 --- a/src/css/infobox.css +++ b/src/css/infobox.css @@ -13,7 +13,7 @@ background-size: cover; min-width: 16px; min-height: 16px; - margin: 6px 6px 0 0; + margin: 0px 6px 0 0; } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .info-box .info-box__text { display: inline-block; @@ -58,4 +58,4 @@ } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .info-box.warning .info-box__icon { background-image: url(../img/warning.png); -} \ No newline at end of file +} diff --git a/src/css/sidepanel.css b/src/css/sidepanel.css new file mode 100644 index 0000000..8697dd0 --- /dev/null +++ b/src/css/sidepanel.css @@ -0,0 +1,25 @@ +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .side-panel { + background-color: transparent; + width: 100%; + max-width: 48rem; + +} +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .horiz-container { + display: flex; + align-items: flex-start; + gap: 2rem; + flex-wrap: wrap; +} + + +/* Tablet or Desktop (at least 48em) */ + +@media only screen and (min-width: 48em) { + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .side-panel { + border: 1px solid var(--grey1c-100); + max-width: 29rem; + border-radius: 5px; + padding: 16px; + margin: 10px 0; + } +} \ No newline at end of file diff --git a/src/css/style.css b/src/css/style.css index 7dd9964..a172a3e 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,6 +1,6 @@ :root { --font-size-20: 1.25rem; - --light-grey: #666 + --light-grey: #666; } .authenticated-body-container__page { background-color: #EDF2F4; @@ -20,13 +20,13 @@ font-size: var(--font-size-24); font-weight: bold; color: var(--dark-grey); - margin: 0.5rem 0; + margin: 0.5em 0; } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice h2 { font-size: var(--font-size-20); font-weight: bold; color: #000; - margin: 0.75rem 0; + margin: 0.75em 0; } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice h3 { font-size: var(--font-size-18); @@ -40,10 +40,9 @@ margin: 0; } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .no-bottom-margin { - margin-bottom: -16px; + margin-bottom: -1em; } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice ul { - padding: 8px initial; color: #000; } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice ul li { @@ -60,4 +59,33 @@ font-size: var(--font-size-14); color: var(--light-grey); font-weight: bold; -} \ No newline at end of file +} + +/* Desktop (at least 64em) */ + +@media only screen and (min-width: 64em) { + .page-mygov-auth-account .authenticated-body-container { + box-shadow: none; + border: none; + } + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice h1 { + font-size: 48px; + margin: 0 0 0.5em 0; + } + /* .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice h1.eat-subtitle { + font-weight: normal; + } + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice h1.eat-subtitle::before { + content: "Document upload: "; + font-weight: bold; + } + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice h1.eat-subtitle ~ .subtitle { + display: none; + } */ + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .subtitle { + font-size: 24px; + } + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice h2 { + font-size: 24px; + } +} diff --git a/src/css/uploadbox.css b/src/css/uploadbox.css index 0d717e1..a48f84b 100644 --- a/src/css/uploadbox.css +++ b/src/css/uploadbox.css @@ -8,21 +8,22 @@ border-radius: 5px; padding: 16px; margin: 10px 0; + max-width: 48em; } -.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box div.upload-box__title { +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box .upload-box__title { font-weight: bold; font-size: var(--font-size-18); color: var(--dark-grey); margin-bottom: 0.75rem; } -.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box p.upload-box__small-text { +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box .upload-box__small-text { font-size: var(--font-size-12); color: var(--light-grey); } -.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box p.upload-box__text { +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box .upload-box__text { font-size: var(--font-size-16); color: var(--black); margin-top: 0; @@ -46,9 +47,13 @@ width: 100%; min-height: 1.25rem; } + +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box__link-title, .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box__file-list .upload-box__file-item-textbox .upload-box__file-item-text { float: left; } + +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box__link-icon, .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box__file-list .upload-box__file-item-textbox .upload-box__file-item-icon { float: right; } @@ -77,18 +82,48 @@ background-color: inherit; } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box__link-title { - float: left; font-size: var(--font-size-16); font-weight: bold; color: var(--black); max-width: 90%; } -.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box__link-icon { - float: right; -} + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box__link-box { width: 100%; min-height: 1.25rem; overflow: auto; margin-bottom: 0.75rem; +} + +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box__view-text { + float: right; + font-weight: bold; +} + +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice a.upload-box__view-text { + text-decoration: none; +} + +@media only screen and (min-width: 64em) { + + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box__view-text::before { + content: 'View'; + } + + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box__file-list .upload-box__file-item-textbox .upload-box__file-item-icon, + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box__link-icon { + margin-left: 1rem; + } + + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box { + padding: 1.5rem; + } + + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box .upload-box__small-text { + font-size: var(--font-size-14) + } +} + +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .horiz-container > .upload-box { + width: 100%; } \ No newline at end of file -- cgit v1.2.3