Add share for tract

Client/src/app/components/home/home.component.html

@@ -1,5 +1,5 @@
 
-<img id="background-image" src="assets/images/home-images/tiny/sunset_b.jpg" alt="background image" width="100%">
+<img id="background-image" src="assets/images/home-images/tiny/wood.jpg" alt="background image" width="100%">
 
 <div id="filler">
     <div id="live-stream-container" *ngIf="countdown && countdown.showCounter">

Client/src/app/components/image/image.component.css

@@ -0,0 +1,16 @@
+.fab-buttons{
+    display: none;
+}
+
+.side-bar{
+    position: fixed;
+}
+
+@media(max-width:800px){
+    .fab-buttons{
+        display: inline-block;
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+    }
+}

Client/src/app/components/image/image.component.html

@@ -1,8 +1,13 @@
 <secondary-page-component [hideSideBarOnMobile]="true" >
-    <div mainContent class="mapWrapper">
+    <div mainContent class="mapWrapper">        
         <img style="width: 100%" src="assets/images/tiny/covid_tract.jpg">
+        <div class="fab-buttons" >
+            <button mat-fab (click)="share()"><i ofbicon>share</i></button>
+        </div>  
     </div>
     <div sideBar ofbFadeInOnScroll>
-
+        <div class="side-bar">
+            <button style="width: 100%;" mat-stroked-button (click)="share()"><i ofbicon>share</i> Share</button>
+        </div>        
     </div>
 </secondary-page-component>

Client/src/app/components/image/image.component.ts

@@ -1,5 +1,7 @@
 import { BibleVerseService } from './../../services/bible-verse.service';
 import { Component, OnInit } from '@angular/core';
+import { MatDialogConfig, MatDialog } from '@angular/material';
+import { SharePopupComponent } from '../popups/share-popup/share-popup.component';
 
 @Component({
   selector: 'image-component',
@@ -8,7 +10,9 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ImageComponent implements OnInit {
 
-  constructor() { }
+  public shareUrl: string;
+
+  constructor(private dialog: MatDialog) { }
 
   ngOnInit() {
     // this.bibleVerseService.randomVerse().subscribe(
@@ -18,4 +22,10 @@ export class ImageComponent implements OnInit {
     //   error => console.log(error) );
   }
 
+  public share() {
+    let opts = new MatDialogConfig;
+    opts.data = { relativeUrl: '/covid', title: 'Coronavirus Anxiety', description: 'Ecouragement in uncertain times' };
+    let dialog = this.dialog.open(SharePopupComponent, opts); 
+  }
+
 }

Client/src/app/components/popups/share-popup/share-popup.component.ts

@@ -30,6 +30,9 @@ export class SharePopupComponent implements OnInit {
     this.id = data.id;
     let port = this.document.location.port ? ":"+this.document.location.port : "";
     this.shareUrl = this.document.location.protocol +'//'+ this.document.location.hostname + port + this.shareBaseUrl + data.prefix + this.id;
+    if (this.data.relativeUrl) {
+      this.shareUrl = this.document.location.protocol + '//' + this.document.location.hostname + port + this.data.relativeUrl;
+    }
     this.facebookIframeUrl = this.urlPartA + this.shareUrl + this.urlPartB;
     this.twitterUrl = this.twitterPartA + data.title + " - " + data.description + "&url=" + this.shareUrl;
   }