diff options
| -rw-r--r-- | src/32.html | 26 | ||||
| -rw-r--r-- | src/37.html | 139 | ||||
| -rw-r--r-- | src/css/forms.css | 7 | ||||
| -rw-r--r-- | src/css/infobox.css | 6 | ||||
| -rw-r--r-- | src/css/pdfpreview.css | 3 | ||||
| -rw-r--r-- | src/css/style.css | 21 | ||||
| -rw-r--r-- | src/css/supportingdocs.css | 20 | ||||
| -rw-r--r-- | src/css/uploadbox.css | 73 |
8 files changed, 169 insertions, 126 deletions
diff --git a/src/32.html b/src/32.html index 1037457..e55257e 100644 --- a/src/32.html +++ b/src/32.html @@ -34,15 +34,19 @@ <div class="upload-box__file-item"> <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> + <span class="upload-box__file-item-arrow"> + <a href="#" class="upload-box__view-text"></a> + <i></i> + </span> </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> + <span class="upload-box__file-item-arrow"> + <a href="#" class="upload-box__view-text"></a> + <i></i> + </span> </div> </div> </div> @@ -61,8 +65,10 @@ <div class="upload-box__file-item"> <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> + <span class="upload-box__file-item-arrow"> + <a href="#" class="upload-box__view-text"></a> + <i></i> + </span> </div> </div> </div> @@ -85,8 +91,10 @@ <div class="upload-box__file-item"> <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> + <span class="upload-box__file-item-arrow"> + <a href="#" class="upload-box__view-text"></a> + <i></i> + </span> </div> </div> </div> @@ -96,7 +104,7 @@ Processing... </div> </div> - <label class="btn btn--tertiary small">Add file</label> + <label class="btn btn--tertiary">Add file</label> </div> <div class="upload-box"> diff --git a/src/37.html b/src/37.html index 01224e4..50c36a9 100644 --- a/src/37.html +++ b/src/37.html @@ -13,76 +13,95 @@ <link rel="stylesheet" href="css/infobox.css" /> <link rel="stylesheet" href="css/supportingdocs.css" /> </head> - <body class="authenticatedpage page legacy-page base-page basicpage page-mygov-auth-account bg-blue-grey"> + <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="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>Add files</h1> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, - sed do eiusmod tempor. - </p> - <div class="supporting-docs-container"> - <div class="upload-box"> - <div class="upload-box__link-box"> - <div class="upload-box__link-title"><a href="#">Permanent residency application</a></div> - <img class="upload-box__link-icon" src="img/arrow.png" /> - </div> - <div class="upload-box__text"> - Lorem ipsum dolor sit amet, consectetur adipiscing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - </div> + <!-- ADD YOUR PAGE IN HERE --> + <div class="subtitle">Document upload service</div> + <h1>Add files</h1> + + + <h1>Select supporting document</h1> + <p>You may need to add more than one supporting document. Choose and add one document at a time.</p> + + <div class="supporting-docs-container"> + <button + role="button" (click)="selectSupportingDoc.emit(supportingDoc.name)" + class="upload-box" + > + <div class="upload-box__content"> + <div class="upload-box__title-container"> + <div class="upload-box__title">Permanent residency application </div> + <i class="upload-box__arrow-icon"></i> </div> - <div class="upload-box"> - <div class="upload-box__link-box"> - <div class="upload-box__link-title">Permanent residency refused or something something</div> - <a href="#"><img class="upload-box__link-icon" src="img/arrow.png" /></a> - </div> - <div class="upload-box__text"> - Lorem ipsum dolor sit amet, consectetur adipiscing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - </div> + <span class="upload-box__text">Evidence showing you had applied for permanent residency</span> + </div> + </button> + <button + role="button" (click)="selectSupportingDoc.emit(supportingDoc.name)" + class="upload-box" + > + <div class="upload-box__content"> + <div class="upload-box__title-container"> + <div class="upload-box__title">Permanent residency refused or withdrawn </div> + <i class="upload-box__arrow-icon"></i> </div> - <div class="upload-box"> - <div class="upload-box__link-box"> - <a href="#"> - <div class="upload-box__link-title">Permanent residency decision appeal</div> - <img class="upload-box__link-icon" src="img/arrow.png" /> - </a> - </div> - <div class="upload-box__text"> - Lorem ipsum dolor sit amet, consectetur adipiscing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - </div> + <span class="upload-box__text">Evidence showing your application for permanent residency had been refused or withdrawn</span> + </div> + </button> + <button + role="button" (click)="selectSupportingDoc.emit(supportingDoc.name)" + class="upload-box" + > + <div class="upload-box__content"> + <div class="upload-box__title-container"> + <div class="upload-box__title">Permanent residency decision appeal </div> + <i class="upload-box__arrow-icon"></i> </div> - <div class="upload-box"> - <div class="upload-box__link-box"> - <div class="upload-box__link-title">Appeal for Ministerial Intervention</div> - <img class="upload-box__link-icon" src="img/arrow.png" /> - </div> - <div class="upload-box__text"> - Lorem ipsum dolor sit amet, consectetur adipiscing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - </div> + <span class="upload-box__text">Evidence from the Administrative Appeal Tribunal, Federal Court or High Court showing you had appealed the decision to refuse your application for permanent residency</span> + </div> + </button> + <button + role="button" (click)="selectSupportingDoc.emit(supportingDoc.name)" + class="upload-box" + > + <div class="upload-box__content"> + <div class="upload-box__title-container"> + <div class="upload-box__title">Appeal for Ministerial Intervention </div> + <i class="upload-box__arrow-icon"></i> </div> - <div class="upload-box"> - <div class="upload-box__link-box"> - <div class="upload-box__link-title">Proof of Health Insurance</div> - <img class="upload-box__link-icon" src="img/arrow.png" /> - </div> - <div class="upload-box__text"> - Lorem ipsum dolor sit amet, consectetur adipiscing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - </div> + <span class="upload-box__text">Evidence that your Appeal for Ministerial Intervention against the decision the decision to refuse your permanent residency application is being considered</span> + </div> + </button> + <button + role="button" (click)="selectSupportingDoc.emit(supportingDoc.name)" + class="upload-box" + > + <div class="upload-box__content"> + <div class="upload-box__title-container"> + <div class="upload-box__title">Proof of Health Insurance</div> + <i class="upload-box__arrow-icon"></i> </div> + <span class="upload-box__text">European Health Insurance Card or other proof of insurance</span> </div> + </button> + </div> + </div> </main> </div> @@ -93,4 +112,4 @@ </div> </div> </body> -</html>
\ No newline at end of file +</html> diff --git a/src/css/forms.css b/src/css/forms.css index 200da2e..b3b3925 100644 --- a/src/css/forms.css +++ b/src/css/forms.css @@ -13,7 +13,7 @@ .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice div.checkbox { top: 8px; - display: none; + visibility: hidden; } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice label.checkbox--error + div.checkbox { display: block; @@ -23,9 +23,10 @@ align-items: center; } -fieldset { +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice fieldset { padding: 8px 0; + margin: 0; } -fieldset .button-container { +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice fieldset .button-container { margin-top: 16px; }
\ No newline at end of file diff --git a/src/css/infobox.css b/src/css/infobox.css index 2e08b43..fa5ff63 100644 --- a/src/css/infobox.css +++ b/src/css/infobox.css @@ -23,6 +23,12 @@ display: block; } +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .info-box .loading-container { + margin-left: 16px; +} +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .info-box .loading-container p { + margin: 0; +} .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .info-box--info .info-box__text > * { color: #2D7FC5; } diff --git a/src/css/pdfpreview.css b/src/css/pdfpreview.css index 287665c..655f5d6 100644 --- a/src/css/pdfpreview.css +++ b/src/css/pdfpreview.css @@ -6,6 +6,7 @@ flex-direction: column; justify-content: space-evenly; text-align: center; + padding: 60px 0; } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .pdf-preview-loading * { margin: 0 auto; @@ -13,8 +14,6 @@ .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; } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .pdf-preview img { diff --git a/src/css/style.css b/src/css/style.css index cb09f31..c41a3a9 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -62,16 +62,12 @@ font-size: var(--font-size-14); color: var(--light-grey); font-weight: bold; + padding: 15px; } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice hr { border-top: 1px solid #DDDDDD; margin: 60px 0; } -.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .left-right-box { - display: flex; - align-items: baseline; - justify-content: space-between; -} .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .back-link { margin-bottom: 24px; } @@ -97,6 +93,21 @@ } +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .preview-img { + display: block; + margin: 0 auto; + width: 100%; +} + +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .img-fluid { + max-width: 100%; + height: auto; +} + +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn-continue { + margin-top: 1.5em; +} + /* Desktop (at least 64em) */ @media only screen and (min-width: 1024px) { diff --git a/src/css/supportingdocs.css b/src/css/supportingdocs.css index f2eb756..4f7ad2c 100644 --- a/src/css/supportingdocs.css +++ b/src/css/supportingdocs.css @@ -37,29 +37,33 @@ +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .supporting-docs-container > * { + text-align: left; +} + @media (min-width: 640px) { - .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .supporting-docs-container .upload-box { + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .supporting-docs-container > * { width: calc(50% - 1rem); /* width: 45%; */ } } @media (min-width: 1024px) { - .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .supporting-docs-container .upload-box { + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .supporting-docs-container > * { width: calc(33% - 1rem); /* width: 30%; */ } } @media (min-width: 1280px) { - .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .supporting-docs-container .upload-box { + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .supporting-docs-container > * { width: calc(25% - 1rem); /* width: 20%; */ } } @media (min-width: 640px) { - .supporting-docs-container { + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .supporting-docs-container { display: flex; grid-gap: 1rem; flex-wrap: wrap; @@ -67,22 +71,22 @@ /* max-width: 1280px; */ /* align-items: flex-start; */ } - .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .supporting-docs-container .upload-box { + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .supporting-docs-container > * { flex-grow: 0; flex-shrink: 100; font-size: 1.2rem; margin: 0; - text-align: left; cursor: pointer; flex-basis: auto; min-height: 300px; } } -.supporting-doc-btn { +/* .supporting-doc-btn { display: block; border: 1px solid #BBBCBC; background: #FFF; padding: 24px; border-radius: 4px; -}
\ No newline at end of file + +} */
\ No newline at end of file diff --git a/src/css/uploadbox.css b/src/css/uploadbox.css index 638646d..41de156 100644 --- a/src/css/uploadbox.css +++ b/src/css/uploadbox.css @@ -11,7 +11,7 @@ flex-shrink: 0; width: 708px; } -.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box > h2:first-of-type { +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box h2:first-of-type { margin: 4px 0; } @@ -62,16 +62,24 @@ min-height: 1.25rem; margin: 0; padding: 0; + display: flex; + justify-content: space-between; + align-items: center; } -.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__file-list .upload-box__file-item-textbox .upload-box__file-item-arrow { + display: flex; + flex-wrap: nowrap; + align-items: center; } -.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; +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box i.upload-box__arrow-icon, +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box__file-list .upload-box__file-item-textbox .upload-box__file-item-arrow i { + background: url(../img/arrow.png) no-repeat center; + display: block; + width: 24px; + height: 24px; + margin-left: 1em; } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box__file-list .upload-box__file-item-size { font-size: var(--font-size-14); @@ -85,33 +93,6 @@ margin: 0.5rem; } -.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__link-box a { - color: inherit; - text-decoration: none; -} -.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box__link-box a:hover { - background-color: inherit; -} -.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box__link-title { - 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-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; @@ -125,6 +106,25 @@ padding: 0; } +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice button.upload-box { + +} + +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice button.upload-box .upload-box__content { + display: block; + height: 100%; +} +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice button.upload-box .upload-box__title { + margin: 0; +} + +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice button.upload-box .upload-box__title-container { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 12px; +} + /* Desktop */ @media only screen and (min-width: 1024px) { @@ -132,11 +132,6 @@ 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; } |