feat: #619 iMapBC public link (#621)

* Update text for iMapBC

* Add link above detail map to open imapBC.

* Dummy changes to trigger pipeline.

* Add ghost-button border-radius.

* Remove height from banner-top so it does not limit flex container on small device.

admin/src/main.ts

@@ -77,4 +77,4 @@ bootstrapApplication(AppComponent, {
         ...routesProviders
     ]
 })
-.catch((err) => console.error(err));
+.catch((err) => console.error(err));

api/README.md

@@ -79,4 +79,3 @@ These are the steps to generate the client library used by the frontend componen
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License. 
-

public/src/app/about/about.component.html

@@ -38,7 +38,7 @@ <h2>Related Information and Links</h2>
 			<section>
 				<div>
 					<h3>iMapBC</h3>
-					<p>View and analyze hundreds of map data layers compiled from across the B.C. Government and other public sector agencies.</p>
+					<p>View and analyze hundreds of map data layers compiled from across the B.C. Government, and other public sector agencies. This includes the FOM layers, which can be overlayed onto other layers, allowing the user to see FOM features from all published FOMs on one comprehensive map.</p>
 				</div>	
 				<a class="btn btn-primary" href="https://maps.gov.bc.ca/ess/hm/imap4m/" target="_blank" rel="noopener"
 					style="text-transform: none">

public/src/app/applications/details-panel/details-panel.component.html

@@ -36,14 +36,26 @@ <h3>Description</h3>
         </ul>
         <br/>
 
-        <h3>Geographic Shape Information 
-          <span>({{projectSpatialDetail.length > 1 ? projectSpatialDetail.length + " Shapes": projectSpatialDetail.length + " Shape"}})</span>
-        </h3>
-
-        <app-details-map
-          [projectSpatialDetail]="projectSpatialDetail">
-        </app-details-map>
+        <div class="details-map-container">
+          <div class="banner-top">
+            <h3>Geographic Shape Information 
+              <span>({{projectSpatialDetail.length > 1 ? projectSpatialDetail.length + " Shapes": projectSpatialDetail.length + " Shape"}})</span>
+            </h3>
+            <div>
+              <a href="https://maps.gov.bc.ca/ess/hm/imap4m/" 
+                target="_blank" 
+                rel="noopener"
+                class="ghost-button"
+                style="text-transform: none">
+                <fa-icon [icon]="faArrowUpRightFromSquare"></fa-icon> View spatial layers in iMapBC
+              </a>
+            </div>
+          </div>
 
+          <app-details-map
+            [projectSpatialDetail]="projectSpatialDetail">
+          </app-details-map>
+        </div>
         <app-shape-info
           [spatialDetail]="projectSpatialDetail">
         </app-shape-info>

public/src/app/applications/details-panel/details-panel.component.scss

@@ -210,4 +210,19 @@ table {
   .slide-toggle-margin {
     margin: 10px;
   }
-}
+}
+
+// details-map
+.details-map-container {
+  h3 {
+    margin-bottom: 0;
+    padding: 5px 0
+  }
+  .banner-top {
+    margin-bottom: 5px;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+    align-items: center;
+  }
+}

public/src/app/applications/details-panel/details-panel.component.ts

@@ -1,9 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
 import {
-  AttachmentResponse, AttachmentService, ProjectResponse, ProjectService,
-  SpatialFeaturePublicResponse, SpatialFeatureService, WorkflowStateCode
+    AttachmentResponse, AttachmentService, ProjectResponse, ProjectService,
+    SpatialFeaturePublicResponse, SpatialFeatureService, WorkflowStateCode
 } from '@api-client';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { UrlService } from '@public-core/services/url.service';
 import { ConfigService } from '@utility/services/config.service';
@@ -28,7 +30,10 @@ import moment = require('moment');
  */
 @Component({
   standalone: true,
-  imports: [CommonModule, ShapeInfoComponent, CommentModalComponent, DetailsMapComponent],
+  imports: [
+    FontAwesomeModule, CommonModule, ShapeInfoComponent, 
+    CommentModalComponent, DetailsMapComponent
+  ],
   selector: 'app-details-panel',
   templateUrl: './details-panel.component.html',
   styleUrls: ['./details-panel.component.scss']
@@ -47,6 +52,7 @@ export class DetailsPanelComponent implements OnDestroy, OnInit {
   public workflowStatus: _.Dictionary<WorkflowStateCode>;
   public projectIdFilter = new Filter<string>({ filter: { queryParam: 'id', value: null } });
   public attachments: AttachmentResponse[];
+  public faArrowUpRightFromSquare = faArrowUpRightFromSquare;
 
   constructor(
     public modalService: NgbModal,

public/src/assets/styles/layout/layout.scss

@@ -137,4 +137,21 @@ hr {
 
 .word-wrap {
   word-wrap: break-word;
+}
+
+.ghost-button { 
+  display: inline-block; 
+  width: 215px; 
+  padding: 2px; 
+  border: 2px solid rgb(13 110 253); 
+  text-align: center; 
+  outline: none; 
+  text-decoration: none; 
+  transition: background-color 0.3s ease-out, color 0.3s ease-out;
+  border-radius: 0.375rem;
+}
+
+.ghost-button:hover, .ghost-button:active { 
+  background-color: $gray4; 
+  transition: background-color 0.3s ease-in, color 0.3s ease-in; 
 }