summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorakiyamn2022-06-01 15:47:03 +1000
committerakiyamn2022-06-01 15:47:03 +1000
commite207761b6637863953e1d1ae8d9b835272456ec9 (patch)
tree93f3c1a5b12fb9ef99a1052e76d5707cf945a470
parentb15be5185d50c1cf6872262386f2ab37ad407efc (diff)
downloadcss-e207761b6637863953e1d1ae8d9b835272456ec9.tar.gz
css-e207761b6637863953e1d1ae8d9b835272456ec9.zip
Side box working on desktop and mobile mode
Diffstat
-rw-r--r--src/26.html2
-rw-r--r--src/29.html56
-rw-r--r--src/30.html59
-rw-r--r--src/30a.html4
-rw-r--r--src/31.html78
-rw-r--r--src/css/pdfpreview.css18
-rw-r--r--src/css/progressbar.css3
-rw-r--r--src/css/style.css21
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 @@
<h1>Application for Medicare Entitlement Statement</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h3>How it works</h3>
- <p class="no-bottom-margin">Sed do eiusmod tempor incididunt ut labore et dolore:</p>
<ul>
+ Sed do eiusmod tempor incididunt ut labore et dolore:
<li>cursus euismod quis viverra</li>
<li>nibh cras pulvinar mattis nunc.</li>
</ul>
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 @@
<link rel="stylesheet" href="css/buttons.css" />
<link rel="stylesheet" href="css/uploadbox.css" />
<link rel="stylesheet" href="css/progressbar.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">
@@ -26,33 +28,37 @@
<div class="subtitle">Document upload service</div>
<h1>signaturepage.jpg</h1>
- <div class="full-box">
- <h2>Uploading</h2>
- <div class="progress-bar">
- <div class="progress-bar__base">
- <div class="progress-bar__progress"></div>
+ <div class="horiz-container full-on-mobile">
+ <div class="upload-box">
+ <h2>Uploading</h2>
+ <div class="progress-bar">
+ <div class="progress-bar__base">
+ <div class="progress-bar__progress"></div>
+ </div>
+ <div class="progress-bar__percentage">68%</div>
</div>
- <div class="progress-bar__percentage">68%</div>
+ <button class="btn tertiary">Cancel</button>
+ </div>
+
+ <div class="side-panel">
+ <h3>What you need to know</h3>
+ <h4>Lorem ipsum dolor sit amet.</h4>
+ <ul>
+ Sed do eiusmod tempor incididunt ut labore et dolore:
+ <li>cursus euismod quis viverra</li>
+ <li>nibh cras pulvinar mattis nunc.</li>
+ </ul>
+ <ul>
+ Sed do eiusmod tempor incididunt ut labore et dolore:
+ <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>
- <button class="btn tertiary">Cancel</button>
- <div class="spacer-l"></div>
- <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>
</main>
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 @@
<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">
@@ -24,35 +27,41 @@
<!-- 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">
- <div class="full-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...
+ <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>
+ <ul>
+ Sed do eiusmod tempor incididunt ut labore et dolore:
+ <li>cursus euismod quis viverra</li>
+ <li>nibh cras pulvinar mattis nunc.</li>
+ </ul>
+ <ul>
+ Sed do eiusmod tempor incididunt ut labore et dolore:
+ <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 class="spacer-l"></div>
- <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>
</main>
</div>
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 @@
<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>
+ Sed do eiusmod tempor incididunt ut labore et dolore:
<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>
+ Sed do eiusmod tempor incididunt ut labore et dolore:
<li>cursus euismod quis viverra</li>
<li>nibh cras pulvinar mattis nunc.</li>
</ul>
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 @@
<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/infobox.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">
@@ -26,44 +29,49 @@
<div class="subtitle">Document upload service</div>
<h1>signaturepage.jpg</h1>
- <div class="full-box">
- <h2>Uploading</h2>
- <div class="file-size">File size: 378 KB</div>
- <div class="info-box inline">
- <img class="info-box__icon" src="img/info.png" />
- <div class="info-box__text">
- Lorem ipsum dolor sit amet, consec tetur adipiscing elit.
+ <div class="horiz-container full-on-mobile">
+ <div class="upload-box">
+
+ <h2>Uploading</h2>
+ <div class="file-size">File size: 378 KB</div>
+ <div class="info-box inline">
+ <img class="info-box__icon" src="img/info.png" />
+ <div class="info-box__text">
+ Lorem ipsum dolor sit amet, consec tetur adipiscing elit.
+ </div>
</div>
+ <p>Cursus euismod quis viverra nibh cras pulvinar mattis nunc.
+ Bibendum neque egestas congue quisque egestas diam in arcu cursus.
+ </p>
+ <div class="btn-group">
+ <a class="btn tertiary">Delete</a>
+ <a class="btn tertiary">Replace</a>
+ </div>
+ <div class="pdf-preview">
+ <img src="img/docbig.png" />
+ </div>
+ <a class="btn primary">Continue</a>
</div>
- <p>Cursus euismod quis viverra nibh cras pulvinar mattis nunc.
- Bibendum neque egestas congue quisque egestas diam in arcu cursus.
- </p>
- <div class="btn-group">
- <a class="btn tertiary">Delete</a>
- <a class="btn tertiary">Replace</a>
- </div>
- <div class="pdf-preview">
- <img src="img/docbig.png" />
+
+ <div class="side-panel">
+ <h3>What you need to know</h3>
+ <h4>Lorem ipsum dolor sit amet.</h4>
+ <ul>
+ Sed do eiusmod tempor incididunt ut labore et dolore:
+ <li>cursus euismod quis viverra</li>
+ <li>nibh cras pulvinar mattis nunc.</li>
+ </ul>
+ <ul>
+ Sed do eiusmod tempor incididunt ut labore et dolore:
+ <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>
- <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>
- <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>
</main>
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);
}
}
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-26 16:45:50 +0000