styling fixes

bcgov · Nov 9, 2023 · 7f27377 · 7f27377
1 parent c6e3ea4
commit 7f27377
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 48 deletions.
diff --git a/...d/src/app/features/public/application/submission/naru-details/naru-details.component.html b/...d/src/app/features/public/application/submission/naru-details/naru-details.component.html
@@ -195,9 +195,8 @@
       ></app-no-data>
     </div>
 
-    <div class="full-width">
-      <span class="subheading1">Project Duration</span>
-    </div>
+    <div class="grid-1"></div>
+    <div class="subheading2 grid-double">Project Duration</div>
     <div class="subheading2 grid-1">Duration</div>
     <div class="grid-double">
       {{ applicationSubmission.naruProjectDurationUnit }}

diff --git a/...d/src/app/features/public/application/submission/naru-details/naru-details.component.scss b/...d/src/app/features/public/application/submission/naru-details/naru-details.component.scss
@@ -1,7 +1,9 @@
+@use '../../../../../../styles/functions' as *;
+
 .soil-table {
   display: grid;
   grid-template-columns: max-content max-content;
   overflow-x: auto;
-  grid-column-gap: 36px;
-  grid-row-gap: 12px;
+  grid-column-gap: rem(36);
+  grid-row-gap: rem(12);
 }
diff --git a/...end/src/app/features/public/application/submission/nfu-details/nfu-details.component.html b/...end/src/app/features/public/application/submission/nfu-details/nfu-details.component.html
@@ -52,36 +52,39 @@ <h4>Soil and Fill Components</h4>
       {{ applicationSubmission.nfuFillOriginDescription }}
       <app-no-data *ngIf="!applicationSubmission.nfuFillOriginDescription"></app-no-data>
     </div>
-    <div class="subheading1 full-width">Fill to be Placed</div>
-    <div class="full-width soil-table">
-      <div class="grid-1"><strong>Volume</strong></div>
-      <div class="grid-2">
-        {{ applicationSubmission.nfuFillVolume }}
-        <span *ngIf="applicationSubmission.nfuFillVolume !== null">m<sup>3</sup></span>
-        <app-no-data *ngIf="applicationSubmission.nfuFillVolume === null"></app-no-data>
-      </div>
-      <div class="grid-1"><strong>Area</strong></div>
-      <div class="grid-2">
-        {{ applicationSubmission.nfuTotalFillArea }}
-        <span *ngIf="applicationSubmission.nfuTotalFillArea !== null">m<sup>2</sup></span>
-        <app-no-data *ngIf="applicationSubmission.nfuTotalFillArea === null"></app-no-data>
-      </div>
-      <div class="grid-1"><strong>Maximum Depth</strong></div>
-      <div class="grid-2">
-        {{ applicationSubmission.nfuMaxFillDepth }}
-        <span *ngIf="applicationSubmission.nfuMaxFillDepth !== null">m</span>
-        <app-no-data *ngIf="applicationSubmission.nfuMaxFillDepth === null"></app-no-data>
-      </div>
-      <div class="grid-1"><strong>Average Depth</strong></div>
-      <div class="grid-2">
-        {{ applicationSubmission.nfuAverageFillDepth }}
-        <span *ngIf="applicationSubmission.nfuAverageFillDepth !== null">m</span>
-        <app-no-data *ngIf="applicationSubmission.nfuAverageFillDepth === null"></app-no-data>
-      </div>
+    <div class="grid-1"></div>
+    <div class="subheading2 grid-double">Fill to be Placed</div>
+
+    <div class="subheading2 grid-1">Volume</div>
+    <div class="grid-double">
+      {{ applicationSubmission.nfuFillVolume }}
+      <span *ngIf="applicationSubmission.nfuFillVolume !== null">m<sup>3</sup></span>
+      <app-no-data *ngIf="applicationSubmission.nfuFillVolume === null"></app-no-data>
     </div>
-    <div class="full-width">
-      <span class="subheading1">Project Duration</span>
+    <div class="subheading2 grid-1">Area</div>
+    <div class="grid-double">
+      {{ applicationSubmission.nfuTotalFillArea }}
+      <span *ngIf="applicationSubmission.nfuTotalFillArea !== null">m<sup>2</sup></span>
+      <app-no-data *ngIf="applicationSubmission.nfuTotalFillArea === null"></app-no-data>
+    </div>
+    <div class="subheading2 grid-1">Maximum Depth</div>
+    <div class="grid-double">
+      {{ applicationSubmission.nfuMaxFillDepth }}
+      <span *ngIf="applicationSubmission.nfuMaxFillDepth !== null">m</span>
+      <app-no-data
+        *ngIf="applicationSubmission.nfuMaxFillDepth === null"
+      ></app-no-data>
+    </div>
+    <div class="subheading2 grid-1">Average Depth</div>
+    <div class="grid-double">
+      {{ applicationSubmission.nfuAverageFillDepth }}
+      <span *ngIf="applicationSubmission.nfuAverageFillDepth !== null">m</span>
+      <app-no-data
+        *ngIf="applicationSubmission.nfuAverageFillDepth === null"
+      ></app-no-data>
     </div>
+    <div class="grid-1"></div>
+    <div class="subheading2 grid-double">Project Duration</div>
     <div class="subheading2 grid-1">Duration</div>
     <div class="grid-double">
       {{ applicationSubmission.nfuProjectDurationUnit }}

diff --git a/...end/src/app/features/public/application/submission/nfu-details/nfu-details.component.scss b/...end/src/app/features/public/application/submission/nfu-details/nfu-details.component.scss
@@ -8,11 +8,11 @@
   grid-template-columns: max-content max-content max-content;
 
   @media screen and (min-width: $tabletBreakpoint) {
-    grid-template-columns: 0.55fr 1fr 1fr;
+    grid-template-columns: 0.55fr 1fr;
   }
 
   @media screen and (min-width: $midBreakpoint) {
-    grid-template-columns: 0.95fr 1fr 2fr;
+    grid-template-columns: 0.95fr 1fr;
     grid-column-gap: rem(16);
   }
 

diff --git a/...d/src/app/features/public/application/submission/pofo-details/pofo-details.component.html b/...d/src/app/features/public/application/submission/pofo-details/pofo-details.component.html
@@ -77,9 +77,8 @@
     </div>
   </div>
 
-  <div class="full-width">
-    <span class="subheading1">Project Duration</span>
-  </div>
+  <div class="grid-1"></div>
+  <div class="subheading2 grid-double">Project Duration</div>
   <div class="subheading2 grid-1">Duration</div>
   <div class="grid-double">
     {{ applicationSubmission.soilProjectDurationUnit }}

diff --git a/...d/src/app/features/public/application/submission/roso-details/roso-details.component.html b/...d/src/app/features/public/application/submission/roso-details/roso-details.component.html
@@ -76,9 +76,8 @@
     </div>
   </div>
 
-  <div class="full-width">
-    <span class="subheading1">Project Duration</span>
-  </div>
+  <div class="grid-1"></div>
+  <div class="subheading2 grid-double">Project Duration</div>
   <div class="subheading2 grid-1">Duration</div>
   <div class="grid-double">
     {{ applicationSubmission.soilProjectDurationUnit }}

diff --git a/...d/src/app/features/public/application/submission/subd-details/subd-details.component.scss b/...d/src/app/features/public/application/submission/subd-details/subd-details.component.scss
@@ -1,4 +1,4 @@
-@use '../../../../../../styles/functions.scss' as *;
+@use '../../../../../../styles/functions' as *;
 
 .parcel-table {
   display: grid;

diff --git a/.../app/features/public/notice-of-intent/submission/pofo-details/pofo-details.component.html b/.../app/features/public/notice-of-intent/submission/pofo-details/pofo-details.component.html
@@ -84,9 +84,8 @@
     <app-no-data *ngIf="noiSubmission.soilAlreadyPlacedAverageDepth === null"></app-no-data>
   </div>
 
-  <div class="full-width">
-    <h4>Project Duration</h4>
-  </div>
+  <div class="grid-1"></div>
+  <div class="subheading2 grid-double">Project Duration</div>
   <div class="subheading2 grid-1">Duration</div>
   <div class="grid-double">
     {{ noiSubmission.soilProjectDurationUnit }}

diff --git a/.../app/features/public/notice-of-intent/submission/roso-details/roso-details.component.html b/.../app/features/public/notice-of-intent/submission/roso-details/roso-details.component.html
@@ -84,9 +84,8 @@
     <app-no-data *ngIf="noiSubmission.soilAlreadyRemovedAverageDepth === null"></app-no-data>
   </div>
 
-  <div class="full-width">
-    <h4>Project Duration</h4>
-  </div>
+  <div class="grid-1"></div>
+  <div class="subheading2 grid-double">Project Duration</div>
   <div class="subheading2 grid-1">Duration</div>
   <div class="grid-double">
     {{ noiSubmission.soilProjectDurationUnit }}