summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/27.html2
-rw-r--r--src/30.html1
-rw-r--r--src/30a.html75
-rw-r--r--src/32.html4
-rw-r--r--src/33.html8
-rw-r--r--src/css/buttons.css12
-rw-r--r--src/css/fullonmobile.css24
-rw-r--r--src/css/infobox.css4
-rw-r--r--src/css/sidepanel.css25
-rw-r--r--src/css/style.css40
-rw-r--r--src/css/uploadbox.css49
11 files changed, 220 insertions, 24 deletions
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 @@
<p class="upload-box__small-text">Quis viverra nibh cras pulvinar mattis nunc. Bibendum neque egestas.</p>
<button class="btn tertiary small">Add file</button>
</div>
+
+ <div class="spacer"></div>
<h2>Supporting documents</h2>
<div class="upload-box">
<p class="upload-box__text">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...
</div>
</div>
- <a class="btn primary">Continue</a>
<div class="spacer-l"></div>
<h3>What you need to know</h3>
<h4>Lorem ipsum dolor sit amet.</h4>
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 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <title>DLS - DEVELOPMENT BUILD</title>
+ <base href="/" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <link rel="icon" type="image/x-icon" href="favicon.ico" />
+ <link rel="stylesheet" href="css/bigstyle.css" />
+ <link rel="stylesheet" href="css/style.css" />
+ <link rel="stylesheet" href="css/buttons.css" />
+ <link rel="stylesheet" href="css/pdfpreview.css" />
+ <link rel="stylesheet" href="css/uploadbox.css" />
+ <link rel="stylesheet" href="css/sidepanel.css" />
+ <link rel="stylesheet" href="css/fullonmobile.css" />
+ </head>
+ <body class="authenticatedpage page legacy-page base-page basicpage page-mygov-auth-account bg-blue-grey">
+ <div class="root responsivegrid">
+ <div class="aem-Grid aem-Grid--12 aem-Grid--tablet--12 aem-Grid--default--12 aem-Grid--phone--12 ">
+ <div class="responsivegrid aem-GridColumn--tablet--12 aem-GridColumn--offset--tablet--0 aem-GridColumn--default--none aem-GridColumn--phone--none aem-GridColumn--phone--12 aem-GridColumn--tablet--none aem-GridColumn aem-GridColumn--default--10 aem-GridColumn--offset--phone--0 aem-GridColumn--offset--default--1">
+ <div class="aem-Grid aem-Grid--10 aem-Grid--default--10 ">
+ <div class="authaccountbody aem-GridColumn aem-GridColumn--default--10">
+ <div class="authenticated-body-container">
+ <div class="authenticated-body-container__page">
+ <main id="main" role="main" tabindex="-1">
+ <div class="documentlodgementservice generic">
+ <!-- ADD YOUR PAGE IN HERE -->
+ <div class="subtitle">Document upload service</div>
+ <h1>signaturepage.jpg</h1>
+ <div class="horiz-container full-on-mobile">
+ <div class="upload-box">
+
+ <h2>Uploading</h2>
+ <button class="btn tertiary">Cancel</button>
+ <div class="pdf-preview-loading">
+ <div class="pdf-preview-loading__text">
+ <div style="background-color:green">loading animation</div> <!-- placeholder for loading animation gif-->
+ Generating preview...
+ </div>
+ </div>
+ </div>
+
+ <div class="side-panel">
+ <h3>What you need to know</h3>
+ <h4>Lorem ipsum dolor sit amet.</h4>
+ <p class="no-bottom-margin">Sed do eiusmod tempor incididunt ut labore et dolore:</p>
+ <ul>
+ <li>cursus euismod quis viverra</li>
+ <li>nibh cras pulvinar mattis nunc.</li>
+ </ul>
+ <p class="no-bottom-margin">Sed do eiusmod tempor incididunt ut labore et dolore:</p>
+ <ul>
+ <li>cursus euismod quis viverra</li>
+ <li>nibh cras pulvinar mattis nunc.</li>
+ </ul>
+ <h4>Pretium lectus quam id leo in vitae</h4>
+ <p>
+ Bibendum neque egestas congue quisque egestas diam in arcu cursus.
+ Diam vulputate ut pharetra sit amet. Aliquet sagittis id consectetur purus ut faucibus.
+ </p>
+ </div>
+
+ </div>
+
+ </div>
+ </main>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </body>
+</html> \ 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 @@
<div class="upload-box__file-item-textbox">
<div class="upload-box__file-item-text">ms015-2008em-f.pdf</div>
<img src="img/arrow.png" class="upload-box__file-item-icon" />
+ <a href="#" class="upload-box__view-text"></a>
</div>
</div>
<div class="upload-box__file-item">
<div class="upload-box__file-item-textbox">
<div class="upload-box__file-item-text">signaturepage.jpg</div>
<img src="img/arrow.png" class="upload-box__file-item-icon" />
+ <a href="#" class="upload-box__view-text"></a>
</div>
</div>
</div>
@@ -59,6 +61,7 @@
<div class="upload-box__file-item-textbox">
<div class="upload-box__file-item-text">passport.pdf</div>
<img src="img/arrow.png" class="upload-box__file-item-icon" />
+ <a href="#" class="upload-box__view-text"></a>
</div>
</div>
</div>
@@ -81,6 +84,7 @@
<div class="upload-box__file-item-textbox">
<div class="upload-box__file-item-text">perm_resident_2022.pdf</div>
<img src="img/arrow.png" class="upload-box__file-item-icon" />
+ <a href="#" class="upload-box__view-text"></a>
</div>
</div>
</div>
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 @@
<main id="main" role="main" tabindex="-1">
<div class="documentlodgementservice generic">
<!-- ADD YOUR PAGE IN HERE -->
-
- <!-- <div class="breadcrumb">
- <img class="breadcrumb__icon" src="img/breadcrumb.png" />
- <div class="breadcrumb__text">Back</div>
- </div> -->
-
+
<div class="subtitle">Document upload service</div>
<h1>Confirm and consent</h1>
<h2>Required documents</h2>
@@ -91,6 +86,7 @@
<button class="btn primary">Confirm</button>
<button class="btn secondary">Cancel</button>
+
</div>
</main>
</div>
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
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-26 20:06:30 +0000