Tweaks and reworked 37.html again

author: akiyamn 2022-06-09 11:59:24 +1000
committer: akiyamn 2022-06-09 11:59:24 +1000
commit: 7b9475a8c88888ce17b045ab262e332c251ddfc2 (patch)
tree: 58fd2fbe8df441a34a5ccf1bfdcc26533a17f0e0
parent: f3d54e91357346bcf44925b603a7bc2249627d43 (diff)
download: css-7b9475a8c88888ce17b045ab262e332c251ddfc2.tar.gz
css-7b9475a8c88888ce17b045ab262e332c251ddfc2.zip
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;
     }
author	akiyamn	2022-06-09 11:59:24 +1000
committer	akiyamn	2022-06-09 11:59:24 +1000
commit	7b9475a8c88888ce17b045ab262e332c251ddfc2 (patch)
tree	58fd2fbe8df441a34a5ccf1bfdcc26533a17f0e0
parent	f3d54e91357346bcf44925b603a7bc2249627d43 (diff)
download	css-7b9475a8c88888ce17b045ab262e332c251ddfc2.tar.gz css-7b9475a8c88888ce17b045ab262e332c251ddfc2.zip