Fix portal submission detail banners and crown owner dialog buttons (#…

…1637) * Remove duplicated absolute positioned banner that hid page elements * Update crowner owner modal buttons styling and apply padding to similar modal actions
bcgov · Apr 30, 2024 · 70c3446 · 70c3446
1 parent 95dda05
commit 70c3446
Show file tree

Hide file tree

Showing 17 changed files with 78 additions and 164 deletions.
diff --git a/...edit-submission/proposal/cove-proposal/transferee-dialog/transferee-dialog.component.scss b/...edit-submission/proposal/cove-proposal/transferee-dialog/transferee-dialog.component.scss
@@ -3,7 +3,7 @@
 
 .actions {
   display: flex;
-  padding: 0 rem(24);
+  padding: rem(16) rem(24);
   width: 100%;
   gap: 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
@@ -1,21 +1,6 @@
-<div aria-hidden="true" class="banner absolute">
-  <div>
-    <h4 *ngIf="application">Application ID: {{ application.fileNumber }} | {{ application.type }}</h4>
-  </div>
-  <div class="banner-status">
-    <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">
   <div>
-    <h4 *ngIf="application">Application ID: {{ application.fileNumber }}</h4>
+    <h4 *ngIf="application">Application ID: {{ application.fileNumber }} | {{ application.type }}</h4>
   </div>
   <div class="banner-status">
     <div>

diff --git a/.../src/app/features/applications/view-submission/view-application-submission.component.scss b/.../src/app/features/applications/view-submission/view-application-submission.component.scss
@@ -67,18 +67,15 @@
   }
 }
 
-.absolute {
-  position: absolute;
-  left: 0;
-  right: 0;
-}
-
 .banner {
   background-color: colors.$secondary-color;
-  width: 100%;
+  width: 100vw;
   color: #fff;
   padding: rem(16) rem(24);
-  margin-bottom: rem(32);
+  margin-bottom: rem(16);
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
 
   @media screen and (min-width: $tabletBreakpoint) {
     padding: rem(12) rem(36) !important;

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
@@ -1,21 +1,6 @@
-<div aria-hidden="true" class="banner absolute">
-  <div>
-    <h4 *ngIf="submission">NOI ID: {{ submission.fileNumber }} | {{ submission.type }}</h4>
-  </div>
-  <div class="banner-status">
-    <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">
   <div>
-    <h4 *ngIf="submission">NOI ID: {{ submission.fileNumber }}</h4>
+    <h4 *ngIf="submission">NOI ID: {{ submission.fileNumber }} | {{ submission.type }}</h4>
   </div>
   <div class="banner-status">
     <div>

diff --git a/...eatures/notice-of-intents/view-submission/view-notice-of-intent-submission.component.scss b/...eatures/notice-of-intents/view-submission/view-notice-of-intent-submission.component.scss
@@ -53,18 +53,15 @@
   }
 }
 
-.absolute {
-  position: absolute;
-  left: 0;
-  right: 0;
-}
-
 .banner {
   background-color: colors.$secondary-color;
-  width: 100%;
+  width: 100vw;
   color: #fff;
   padding: rem(16) rem(24);
-  margin-bottom: rem(32);
+  margin-bottom: rem(16);
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
 
   @media screen and (min-width: $tabletBreakpoint) {
     padding: rem(12) rem(36) !important;

diff --git a/...ifications/edit-submission/transferees/transferee-dialog/transferee-dialog.component.scss b/...ifications/edit-submission/transferees/transferee-dialog/transferee-dialog.component.scss
@@ -3,7 +3,7 @@
 
 .actions {
   display: flex;
-  padding: 0 rem(24);
+  padding: rem(16) rem(24);
   width: 100%;
   gap: rem(16);
 

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
@@ -1,21 +1,6 @@
-<div aria-hidden="true" class="banner absolute">
-  <div>
-    <h4 *ngIf="submission">Notification ID: {{ submission.fileNumber }} | {{ submission.type }}</h4>
-  </div>
-  <div class="banner-status">
-    <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">
   <div>
-    <h4 *ngIf="submission">Notification ID: {{ submission.fileNumber }}</h4>
+    <h4 *ngIf="submission">Notification ID: {{ submission.fileNumber }} | {{ submission.type }}</h4>
   </div>
   <div class="banner-status">
     <div>

diff --git a/...rc/app/features/notifications/view-submission/view-notification-submission.component.scss b/...rc/app/features/notifications/view-submission/view-notification-submission.component.scss
@@ -53,18 +53,15 @@
   }
 }
 
-.absolute {
-  position: absolute;
-  left: 0;
-  right: 0;
-}
-
 .banner {
   background-color: colors.$secondary-color;
-  width: 100%;
+  width: 100vw;
   color: #fff;
   padding: rem(16) rem(24);
-  margin-bottom: rem(32);
+  margin-bottom: rem(16);
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
 
   @media screen and (min-width: $tabletBreakpoint) {
     padding: rem(12) rem(36) !important;

diff --git a/portal-frontend/src/app/features/public/application/public-application.component.html b/portal-frontend/src/app/features/public/application/public-application.component.html
@@ -1,21 +1,6 @@
-<div aria-hidden="true" class="banner absolute">
-  <div>
-    <h4 *ngIf="submission">Application ID: {{ submission.fileNumber }} | {{ submission.type }}</h4>
-  </div>
-  <div class="banner-status">
-    <div>
-      <div class="subheading2">Status Date</div>
-      <span *ngIf="submission">{{ submission.lastStatusUpdate | date }}</span>
-    </div>
-    <div>
-      <div class="subheading2">Application Status</div>
-      <span *ngIf="submission">{{ submission.status.label }}</span>
-    </div>
-  </div>
-</div>
 <div class="banner">
   <div>
-    <h4 *ngIf="submission">Application ID: {{ submission.fileNumber }}</h4>
+    <h4 *ngIf="submission">Application ID: {{ submission.fileNumber }} | {{ submission.type }}</h4>
   </div>
   <div class="banner-status">
     <div>

diff --git a/portal-frontend/src/app/features/public/application/public-application.component.scss b/portal-frontend/src/app/features/public/application/public-application.component.scss
@@ -53,18 +53,15 @@
   }
 }
 
-.absolute {
-  position: absolute;
-  left: 0;
-  right: 0;
-}
-
 .banner {
   background-color: colors.$secondary-color;
-  width: 100%;
+  width: 100vw;
   color: #fff;
   padding: rem(16) rem(24);
-  margin-bottom: rem(32);
+  margin-bottom: rem(16);
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
 
   @media screen and (min-width: $tabletBreakpoint) {
     padding: rem(12) rem(36) !important;

diff --git a/...-frontend/src/app/features/public/notice-of-intent/public-notice-of-intent.component.html b/...-frontend/src/app/features/public/notice-of-intent/public-notice-of-intent.component.html
@@ -1,21 +1,6 @@
-<div aria-hidden="true" class="banner absolute">
-  <div>
-    <h4 *ngIf="submission">Notice of Intent ID: {{ submission.fileNumber }} | {{ submission.type }}</h4>
-  </div>
-  <div class="banner-status">
-    <div>
-      <div class="subheading2">Status Date</div>
-      <span *ngIf="submission">{{ submission.lastStatusUpdate | date }}</span>
-    </div>
-    <div>
-      <div class="subheading2">Status</div>
-      <span *ngIf="submission">{{ submission.status.label }}</span>
-    </div>
-  </div>
-</div>
 <div class="banner">
   <div>
-    <h4 *ngIf="submission">Notice of Intent ID: {{ submission.fileNumber }}</h4>
+    <h4 *ngIf="submission">Notice of Intent ID: {{ submission.fileNumber }} | {{ submission.type }}</h4>
   </div>
   <div class="banner-status">
     <div>

diff --git a/...-frontend/src/app/features/public/notice-of-intent/public-notice-of-intent.component.scss b/...-frontend/src/app/features/public/notice-of-intent/public-notice-of-intent.component.scss
@@ -53,18 +53,15 @@
   }
 }
 
-.absolute {
-  position: absolute;
-  left: 0;
-  right: 0;
-}
-
 .banner {
   background-color: colors.$secondary-color;
-  width: 100%;
+  width: 100vw;
   color: #fff;
   padding: rem(16) rem(24);
-  margin-bottom: rem(32);
+  margin-bottom: rem(16);
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
 
   @media screen and (min-width: $tabletBreakpoint) {
     padding: rem(12) rem(36) !important;

diff --git a/portal-frontend/src/app/features/public/notification/public-notification.component.html b/portal-frontend/src/app/features/public/notification/public-notification.component.html
@@ -1,21 +1,6 @@
-<div aria-hidden="true" class="banner absolute">
-  <div>
-    <h4 *ngIf="submission">Notification ID: {{ submission.fileNumber }} | {{ submission.type }}</h4>
-  </div>
-  <div class="banner-status">
-    <div>
-      <div class="subheading2">Status Date</div>
-      <span *ngIf="submission">{{ submission.lastStatusUpdate | date }}</span>
-    </div>
-    <div>
-      <div class="subheading2">Status</div>
-      <span *ngIf="submission">{{ submission.status.label }}</span>
-    </div>
-  </div>
-</div>
 <div class="banner">
   <div>
-    <h4 *ngIf="submission">Notification ID: {{ submission.fileNumber }}</h4>
+    <h4 *ngIf="submission">Notification ID: {{ submission.fileNumber }} | {{ submission.type }}</h4>
   </div>
   <div class="banner-status">
     <div>

diff --git a/portal-frontend/src/app/features/public/notification/public-notification.component.scss b/portal-frontend/src/app/features/public/notification/public-notification.component.scss
@@ -53,18 +53,15 @@
   }
 }
 
-.absolute {
-  position: absolute;
-  left: 0;
-  right: 0;
-}
-
 .banner {
   background-color: colors.$secondary-color;
-  width: 100%;
+  width: 100vw;
   color: #fff;
   padding: rem(16) rem(24);
-  margin-bottom: rem(32);
+  margin-bottom: rem(16);
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
 
   @media screen and (min-width: $tabletBreakpoint) {
     padding: rem(12) rem(36) !important;

diff --git a/...rontend/src/app/shared/owner-dialogs/crown-owner-dialog/crown-owner-dialog.component.html b/...rontend/src/app/shared/owner-dialogs/crown-owner-dialog/crown-owner-dialog.component.html
@@ -99,17 +99,8 @@ <h2 *ngIf="isEdit">Edit Government Contact</h2>
   </form>
 </div>
 
-<div mat-dialog-actions class="actions">
-  <button
-    *ngIf="isEdit"
-    mat-stroked-button
-    color="warn"
-    style="margin-right: auto"
-    class="delete-btn"
-    (click)="onDelete()"
-  >
-    Delete Contact
-  </button>
+<div mat-dialog-actions class="actions" align="end">
+  <button *ngIf="isEdit" mat-stroked-button color="warn" class="delete-btn" (click)="onDelete()">Delete Contact</button>
   <div class="btn-group">
     <button mat-stroked-button (click)="onClose()" style="margin-left: auto">Cancel</button>
     <button mat-flat-button color="primary" *ngIf="!isEdit" [disabled]="isLoading" (click)="onCreate()">Add</button>

diff --git a/...rontend/src/app/shared/owner-dialogs/crown-owner-dialog/crown-owner-dialog.component.scss b/...rontend/src/app/shared/owner-dialogs/crown-owner-dialog/crown-owner-dialog.component.scss
@@ -3,10 +3,32 @@
 
 .actions {
   display: flex;
-  justify-content: space-between;
-  padding: 10px 24px 10px 24px;
-  button:not(:last-child) {
-    margin-right: rem(8) !important;
+  padding: rem(16) rem(24);
+  flex-direction: column-reverse;
+  gap: rem(8);
+
+  @media screen and (min-width: $tabletBreakpoint) {
+    flex-direction: unset;
+    gap: unset;
+    margin-top: unset;
+  }
+}
+
+.btn-group {
+  width: 100%;
+  display: flex;
+  gap: rem(16);
+
+  button {
+    flex: 1 1 auto;
+  }
+
+  @media screen and (min-width: $tabletBreakpoint) {
+    width: unset;
+
+    button {
+      flex: unset;
+    }
   }
 }
 
@@ -26,4 +48,14 @@
   .warning-banner {
     padding: 0 !important;
   }
-}
+}
+
+.delete-btn {
+  order: -1;
+  margin-right: auto !important;
+  width: 100%;
+
+  @media screen and (min-width: $tabletBreakpoint) {
+    width: unset;
+  }
+}
diff --git a/portal-frontend/src/app/shared/owner-dialogs/owner-dialog/owner-dialog.component.scss b/portal-frontend/src/app/shared/owner-dialogs/owner-dialog/owner-dialog.component.scss
@@ -3,10 +3,9 @@
 
 .actions {
   display: flex;
-  padding: 0 rem(24);
+  padding: rem(16) rem(24);
   flex-direction: column-reverse;
   gap: rem(8);
-  margin-top: rem(8);
 
   @media screen and (min-width: $tabletBreakpoint) {
     flex-direction: unset;