Add COVID Tract

Client/src/app/app-routing.module.ts

@@ -18,6 +18,7 @@ import { ContributorYearlyReportComponent } from './components/contributor-yearl
 import { ContributorAllReportsComponent } from './components/contributor-all-reports/contributor-all-reports.component';
 import { LiveStreamComponent } from './components/live-stream/live-stream.component';
 import { VideoServicesComponent } from './components/video-services/video-services.component';
+import { ImageComponent } from './components/image/image.component';
 
 const routes =
   [
@@ -77,6 +78,10 @@ const routes =
         path: 'user',
         component: MembersPageComponent
       },
+      {
+        path: 'covid',
+        component: ImageComponent
+      },
       {
         path: 'camp',
         component: CampPageComponent

Client/src/app/app.module.ts

@@ -78,6 +78,7 @@ import { ContributorYearlyReportComponent } from './components/contributor-yearl
 import { ContributorAllReportsComponent } from './components/contributor-all-reports/contributor-all-reports.component';
 import { LiveStreamComponent } from './components/live-stream/live-stream.component';
 import { VideoServicesComponent } from './components/video-services/video-services.component';
+import { ImageComponent } from './components/image/image.component';
 
 
 
@@ -127,7 +128,8 @@ import { VideoServicesComponent } from './components/video-services/video-servic
     MissionaryFormPageComponent,
     ContributorYearlyReportComponent,
     ContributorAllReportsComponent,
-    LiveStreamComponent
+    LiveStreamComponent,
+    ImageComponent
   ],
   imports: [
     BrowserModule,

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

@@ -17,6 +17,11 @@ img{
     height: auto;
 }
 
+img.w-100pct {
+    width: 100%;
+    height: auto;
+}
+
 img.full {
     width: 100%;
     height: auto;
@@ -161,6 +166,10 @@ img.full {
     margin-right: 10px;
 }
 
+.w-100 {
+    width: 100%;
+}
+
 .w-200 {
     width: 200px;
 }
@@ -322,5 +331,13 @@ img.m-100-lg {
     img.m-100-lg {
         margin-left: 0;
     }
-    
+    img.w-100pct {
+        width: 65%;
+    }
+}
+
+@media(max-width: 600px) {
+    img.w-100pct {
+        width: 95%;
+    }
 }

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

@@ -46,10 +46,7 @@
     </div> 
 
     <div class="row tint" *ngIf="showSpecial" >            
-        <div class="row-content">
+        <div class="row-content">            
-            <div class="row-content-col-left">                    
-                <img class="w-200 h-200 m-100-lg" ofbFadeInOnScroll src="assets/images/home-images/tiny/covid.jpg" height="200">
-            </div>
             <div class="row-content-col-right align-top center">
                 <p ofbFadeInOnScroll class="row-content-header">COVID-19</p>
                 <p ofbFadeInOnScroll> 
@@ -63,7 +60,15 @@
                 <p ofbFadeInOnScroll class="action">
                     <i ofbicon>headset</i> <a routerLink="/sermons" class="align-top">Click here to listen online</a>
                 </p>
-            </div>                        
+                <p ofbFadeInOnScroll class="action">
+                    <i ofbicon>insert_photo</i> <a routerLink="/covid" class="align-top">Click here for coronavirus encouragement</a>
+                </p>
+            </div>  
+            <div class="row-content-col-left"> 
+                <a routerLink="/covid" >
+                    <img class="w-100pct" ofbFadeInOnScroll src="assets/images/home-images/tiny/covid_header.jpg" > 
+                </a>                              
+            </div>                      
         </div>
     </div>
 

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

@@ -0,0 +1,8 @@
+<secondary-page-component [hideSideBarOnMobile]="true" >
+    <div mainContent class="mapWrapper">
+        <img style="width: 100%" src="assets/images/tiny/covid_tract.jpg">
+    </div>
+    <div sideBar ofbFadeInOnScroll>
+
+    </div>
+</secondary-page-component>

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

@@ -0,0 +1,21 @@
+import { BibleVerseService } from './../../services/bible-verse.service';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'image-component',
+  templateUrl: './image.component.html',
+  styleUrls: ['./image.component.css']
+})
+export class ImageComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+    // this.bibleVerseService.randomVerse().subscribe(
+    //   verse => {
+        
+    //   },
+    //   error => console.log(error) );
+  }
+
+}

Client/src/assets/json/videoServices.json

@@ -2,10 +2,18 @@
     "videos": [
         {
             "isReady": false,
+            "title": "Sunday Morning",
+            "src": "https://ofbbutte.com/static/media/video/2020-03-29 1100 Pastor Derek Loewen.mp4",
+            "date": "2020-03-29T11:00:00-06:00",
+            "archived": false,
+            "message": "Please Stay Tuned Until 3/29/2020 at 11:00 AM MDT"
+        },
+        {
+            "isReady": true,
             "title": "Wednesday Evening",
             "src": "https://ofbbutte.com/static/media/video/2020-03-25 1900 Pastor Derek Loewen.mp4",
             "date": "2020-03-25T19:00:00-06:00",
-            "archived": false,
+            "archived": true,
             "message": "Please Stay Tuned Until 3/25/2020 at 7:00 PM MDT"
         },
         {
@@ -13,7 +21,7 @@
             "title": "Sunday Evening",
             "src": "https://ofbbutte.com/static/media/video/2020-03-22 1900 Pastor Derek Loewen.mp4",
             "date": "2020-03-22T19:00:00-06:00",
-            "archived": false,
+            "archived": true,
             "message": "Please Stay Tuned Until 3/22/2020 at 7:00 PM MDT"
         },
         {