Fix alignment of header (#1978)

bcgov · Jun 19, 2024 · 7699ced · 7699ced
1 parent 8fe0808
commit 7699ced
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 30 deletions.
diff --git a/...t/wfnews-war/src/main/angular/src/app/components/full-details/full-details.component.html b/...t/wfnews-war/src/main/angular/src/app/components/full-details/full-details.component.html
@@ -1,17 +1,28 @@
 <div class="full-details-header">
-    <img (click)="back()" height="20" width="20" class="full-details-header-left-button" src="/assets/images/svg-icons/arrow-left.svg"
-      alt="Arrow Left" />{{getTitle()}}
-    <img (click)="exit()" height="20" width="20" class="full-details-header-right-button" src="/assets/images/svg-icons/cancel.svg"
-      alt="Cancel" />
+  <div class="header-row">
+    <img (click)="back()" class="left-button" src="/assets/images/svg-icons/arrow-left.svg" alt="Arrow Left" />
+    <span>{{getTitle()}}</span>
+    <img (click)="exit()" class="right-button" src="/assets/images/svg-icons/cancel.svg" alt="Cancel" />
+  </div>
 </div>
+
 <div class="contents">
   <div id="restrictions-map" class="map-container-mobile"></div>
   <div class="full-details">
     <!-- This is probably fine for now, but we can change to use an injector like what we do in RoF pages -->
-    <wfnews-area-restrictions-full-details *ngIf="params && params['id'] && params['type'] && params['type'] === 'area-restriction'" [id]="params['id']" [name]="params['name']"></wfnews-area-restrictions-full-details>
-    <wfnews-bans-full-details *ngIf="params && params['id'] && params['type'] && params['type'] === 'bans-prohibitions'" [id]="params['id']"></wfnews-bans-full-details>
-    <wfnews-danger-rating-full-details *ngIf="params && params['id'] && params['type'] && params['type'] === 'danger-rating'" [rating]="params['id']" [location]="params['location']" [sysid]="params['sysid']"></wfnews-danger-rating-full-details>
-    <wfnews-evac-alert-full-details *ngIf="params && params['id'] && params['type'] && params['type'] === 'evac-alert'" [id]="params['id']" [name]="params['name']" [eventNumber]="params['eventNumber']"></wfnews-evac-alert-full-details>
-    <wfnews-evac-order-full-details *ngIf="params && params['id'] && params['type'] && params['type'] === 'evac-order'" [id]="params['id']" [name]="params['name']" [eventNumber]="params['eventNumber']"></wfnews-evac-order-full-details>
+    <wfnews-area-restrictions-full-details
+      *ngIf="params && params['id'] && params['type'] && params['type'] === 'area-restriction'" [id]="params['id']"
+      [name]="params['name']"></wfnews-area-restrictions-full-details>
+    <wfnews-bans-full-details *ngIf="params && params['id'] && params['type'] && params['type'] === 'bans-prohibitions'"
+      [id]="params['id']"></wfnews-bans-full-details>
+    <wfnews-danger-rating-full-details
+      *ngIf="params && params['id'] && params['type'] && params['type'] === 'danger-rating'" [rating]="params['id']"
+      [location]="params['location']" [sysid]="params['sysid']"></wfnews-danger-rating-full-details>
+    <wfnews-evac-alert-full-details *ngIf="params && params['id'] && params['type'] && params['type'] === 'evac-alert'"
+      [id]="params['id']" [name]="params['name']"
+      [eventNumber]="params['eventNumber']"></wfnews-evac-alert-full-details>
+    <wfnews-evac-order-full-details *ngIf="params && params['id'] && params['type'] && params['type'] === 'evac-order'"
+      [id]="params['id']" [name]="params['name']"
+      [eventNumber]="params['eventNumber']"></wfnews-evac-order-full-details>
   </div>
-</div>
+</div>
diff --git a/...t/wfnews-war/src/main/angular/src/app/components/full-details/full-details.component.scss b/...t/wfnews-war/src/main/angular/src/app/components/full-details/full-details.component.scss
@@ -129,31 +129,29 @@
 }
 
 .full-details-header {
-  height: 25px;
-  width: 95%;
+  line-height: 45px;
+  padding: 0 12px;
   position: absolute;
-  display: flex;
-  padding: 10px 20px;
-  justify-content: space-between;
-  align-items: flex-start;
-  align-self: stretch;
+  width: 100%;
+
   z-index: 1000 !important;
   background-color: white;
 
-  &-left-button {
-    position: relative;
-    top: 5px;
-    margin-left: 5px;
-    width: 20px;
-    height: 20px;
-  }
+  .header-row {
+    display: flex;
+    justify-content: space-between;
+    width: calc(100% - 24px);
+    align-items: center;
 
-  &-right-button {
-    position: relative;
-    top: 5px;
-    margin-right: 5px;
-    width: 20px;
-    height: 20px;
+    .left-button {
+      width: 20px;
+      height: 20px;
+    }
+
+    .right-button {
+      width: 20px;
+      height: 20px;
+    }
   }
 }