Merge pull request #1133 from bcgov/task/alcs-1221

task-1221 styling fixes
bcgov · Nov 15, 2023 · d94b26b · d94b26b
2 parents bf9e388 + 62302e9
commit d94b26b
Show file tree

Hide file tree

Showing 19 changed files with 523 additions and 343 deletions.
diff --git a/...rc/app/features/applications/application-details/naru-details/naru-details.component.scss b/...rc/app/features/applications/application-details/naru-details/naru-details.component.scss
@@ -0,0 +1,23 @@
+@use '../../../../../styles/functions' as *;
+
+.soil-table {
+  display: grid;
+  overflow-x: auto;
+  grid-column-gap: rem(36);
+  grid-row-gap: rem(12);
+  grid-template-columns: max-content max-content max-content;
+
+  @media screen and (min-width: $tabletBreakpoint) {
+    grid-template-columns: 0.55fr 1fr 1fr;
+  }
+
+  @media screen and (min-width: $midBreakpoint) {
+    grid-template-columns: 0.95fr 1fr 2fr;
+    grid-column-gap: rem(16);
+  }
+
+  .spacer-row {
+    grid-column: 1/4;
+    height: rem(16);
+  }
+}
diff --git a/.../src/app/features/applications/view-submission/view-application-submission.component.html b/.../src/app/features/applications/view-submission/view-application-submission.component.html
@@ -3,14 +3,14 @@
     <h4 *ngIf="application">Application ID: {{ application.fileNumber }} | {{ application.type }}</h4>
   </div>
   <div class="banner-status">
-    <div>
-      <div class="subheading2">Application Status</div>
-      <span *ngIf="application">{{ application.status.label }}</span>
-    </div>
     <div>
       <div class="subheading2">Status Date</div>
       <span *ngIf="application">{{ application.lastStatusUpdate | date }}</span>
     </div>
+    <div>
+      <div class="subheading2">Application Status</div>
+      <span *ngIf="application">{{ application.status.label }}</span>
+    </div>
   </div>
 </div>
 <div class="banner">

diff --git a/...eatures/notice-of-intents/view-submission/view-notice-of-intent-submission.component.html b/...eatures/notice-of-intents/view-submission/view-notice-of-intent-submission.component.html
@@ -3,14 +3,14 @@
     <h4 *ngIf="submission">NOI ID: {{ submission.fileNumber }} | {{ submission.type }}</h4>
   </div>
   <div class="banner-status">
-    <div>
-      <div class="subheading2">NOI Status</div>
-      <span *ngIf="submission">{{ submission.status.label }}</span>
-    </div>
     <div>
       <div class="subheading2">Status Date</div>
       <span *ngIf="submission">{{ submission.lastStatusUpdate | date }}</span>
     </div>
+    <div>
+      <div class="subheading2">NOI Status</div>
+      <span *ngIf="submission">{{ submission.status.label }}</span>
+    </div>
   </div>
 </div>
 <div class="banner">

diff --git a/...rc/app/features/notifications/view-submission/view-notification-submission.component.html b/...rc/app/features/notifications/view-submission/view-notification-submission.component.html
@@ -3,14 +3,14 @@
     <h4 *ngIf="submission">Notification ID: {{ submission.fileNumber }} | {{ submission.type }}</h4>
   </div>
   <div class="banner-status">
-    <div>
-      <div class="subheading2">Notification Status</div>
-      <span *ngIf="submission">{{ submission.status.label }}</span>
-    </div>
     <div>
       <div class="subheading2">Status Date</div>
       <span *ngIf="submission">{{ submission.lastStatusUpdate | date }}</span>
     </div>
+    <div>
+      <div class="subheading2">Notification Status</div>
+      <span *ngIf="submission">{{ submission.status.label }}</span>
+    </div>
   </div>
 </div>
 <div class="banner">

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
@@ -164,46 +164,54 @@
       <app-no-data *ngIf="!applicationSubmission.naruFillOrigin"></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.naruToPlaceVolume }}
-        <span *ngIf="applicationSubmission.naruToPlaceVolume !== null">m<sup>3</sup></span>
-        <app-no-data *ngIf="applicationSubmission.naruToPlaceVolume === null"></app-no-data>
-      </div>
-      <div class="grid-1"><strong>Area</strong></div>
-      <div class="grid-2">
-        {{ applicationSubmission.naruToPlaceArea }}
-        <span *ngIf="applicationSubmission.naruToPlaceArea !== null">m<sup>2</sup></span>
-        <app-no-data *ngIf="applicationSubmission.naruToPlaceArea === null"></app-no-data>
-      </div>
-      <div class="grid-1"><strong>Maximum Depth</strong></div>
-      <div class="grid-2">
-        {{ applicationSubmission.naruToPlaceMaximumDepth }}
-        <span *ngIf="applicationSubmission.naruToPlaceMaximumDepth !== null">m</span>
-        <app-no-data *ngIf="applicationSubmission.naruToPlaceMaximumDepth === null"></app-no-data>
-      </div>
-      <div class="grid-1"><strong>Average Depth</strong></div>
-      <div class="grid-2">
-        {{ applicationSubmission.naruToPlaceAverageDepth }}
-        <span *ngIf="applicationSubmission.naruToPlaceAverageDepth !== null">m</span>
-        <app-no-data *ngIf="applicationSubmission.naruToPlaceAverageDepth === null"></app-no-data>
+    <div class="subheading2 grid-1">Project Duration</div>
+    <div class="grid-double">
+      <div *ngIf="applicationSubmission.soilProjectDurationAmount && applicationSubmission.soilProjectDurationUnit">
+        {{ applicationSubmission.soilProjectDurationAmount }}
+        <ng-container [ngPlural]="applicationSubmission.soilProjectDurationAmount">
+          <ng-template ngPluralCase="=1">
+            {{ applicationSubmission.soilProjectDurationUnit.slice(0, -1) | titlecase }}
+          </ng-template>
+          <ng-template ngPluralCase="other">
+            {{ applicationSubmission.soilProjectDurationUnit | titlecase }}
+          </ng-template>
+        </ng-container>
       </div>
+      <app-no-data
+        *ngIf="!applicationSubmission.soilProjectDurationAmount || !applicationSubmission.soilProjectDurationUnit"
+      ></app-no-data>
     </div>
 
-    <div class="full-width">
-      <span class="subheading1">Project Duration</span>
+    <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.naruToPlaceVolume }}
+      <span *ngIf="applicationSubmission.naruToPlaceVolume !== null">m<sup>3</sup></span>
+      <app-no-data *ngIf="applicationSubmission.naruToPlaceVolume === null"></app-no-data>
+    </div>
+    <div class="subheading2 grid-1">Area</div>
+    <div class="grid-double">
+      {{ applicationSubmission.naruToPlaceArea }}
+      <span *ngIf="applicationSubmission.naruToPlaceArea !== null">m<sup>2</sup></span>
+      <app-no-data *ngIf="applicationSubmission.naruToPlaceArea === null"></app-no-data>
     </div>
-    <div class="subheading2 grid-1">Duration</div>
+    <div class="subheading2 grid-1">Maximum Depth</div>
     <div class="grid-double">
-      {{ applicationSubmission.naruProjectDurationUnit }}
-      <app-no-data *ngIf="!applicationSubmission.naruProjectDurationUnit"></app-no-data>
+      {{ applicationSubmission.naruToPlaceMaximumDepth }}
+      <span *ngIf="applicationSubmission.naruToPlaceMaximumDepth !== null">m</span>
+      <app-no-data
+        *ngIf="applicationSubmission.naruToPlaceMaximumDepth === null"
+      ></app-no-data>
     </div>
-    <div class="subheading2 grid-1">Length</div>
+    <div class="subheading2 grid-1">Average Depth</div>
     <div class="grid-double">
-      {{ applicationSubmission.naruProjectDurationAmount }}
-      <app-no-data *ngIf="!applicationSubmission.naruProjectDurationAmount"></app-no-data>
+      {{ applicationSubmission.naruToPlaceAverageDepth }}
+      <span *ngIf="applicationSubmission.naruToPlaceAverageDepth !== null">m</span>
+      <app-no-data
+        *ngIf="applicationSubmission.naruToPlaceAverageDepth === null"
+      ></app-no-data>
     </div>
   </ng-container>
 </div>
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,45 +52,55 @@ <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 class="subheading2 grid-1">Project Duration</div>
+    <div class="grid-double">
+      <div *ngIf="applicationSubmission.soilProjectDurationAmount && applicationSubmission.soilProjectDurationUnit">
+        {{ applicationSubmission.soilProjectDurationAmount }}
+        <ng-container [ngPlural]="applicationSubmission.soilProjectDurationAmount">
+          <ng-template ngPluralCase="=1">
+            {{ applicationSubmission.soilProjectDurationUnit.slice(0, -1) | titlecase }}
+          </ng-template>
+          <ng-template ngPluralCase="other">
+            {{ applicationSubmission.soilProjectDurationUnit | titlecase }}
+          </ng-template>
+        </ng-container>
       </div>
+      <app-no-data
+        *ngIf="!applicationSubmission.soilProjectDurationAmount || !applicationSubmission.soilProjectDurationUnit"
+      ></app-no-data>
     </div>
-    <div class="full-width">
-      <span class="subheading1">Project Duration</span>
+
+    <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="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">Duration</div>
+    <div class="subheading2 grid-1">Maximum Depth</div>
     <div class="grid-double">
-      {{ applicationSubmission.nfuProjectDurationUnit }}
-      <app-no-data *ngIf="!applicationSubmission.nfuProjectDurationUnit"></app-no-data>
+      {{ 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">Length</div>
+    <div class="subheading2 grid-1">Average Depth</div>
     <div class="grid-double">
-      {{ applicationSubmission.nfuProjectDurationAmount }}
-      <app-no-data *ngIf="!applicationSubmission.nfuProjectDurationAmount"></app-no-data>
+      {{ applicationSubmission.nfuAverageFillDepth }}
+      <span *ngIf="applicationSubmission.nfuAverageFillDepth !== null">m</span>
+      <app-no-data
+        *ngIf="applicationSubmission.nfuAverageFillDepth === null"
+      ></app-no-data>
     </div>
   </ng-container>
 </div>
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
@@ -1,7 +1,23 @@
+@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);
+  grid-template-columns: max-content max-content;
+
+  @media screen and (min-width: $tabletBreakpoint) {
+    grid-template-columns: 0.55fr 1fr;
+  }
+
+  @media screen and (min-width: $midBreakpoint) {
+    grid-template-columns: 0.95fr 1fr;
+    grid-column-gap: rem(16);
+  }
+
+  .spacer-row {
+    grid-column: 1/4;
+    height: rem(16);
+  }
 }