Fix FAQ footer

ui/src/app/app.module.ts

@@ -9,6 +9,7 @@ import {FormsModule} from '@angular/forms';
 import {HttpClientModule} from '@angular/common/http';
 import { OutputComponent } from './output/output.component';
 import { FaqComponent } from './faq/faq.component';
+import { FooterComponent } from './widgets/footer/footer.component';
 
 @NgModule({
   declarations: [
@@ -16,7 +17,8 @@ import { FaqComponent } from './faq/faq.component';
     IndexComponent,
     InputComponent,
     OutputComponent,
-    FaqComponent
+    FaqComponent,
+    FooterComponent
   ],
   imports: [
     BrowserModule,

ui/src/app/faq/faq.component.html

@@ -68,3 +68,8 @@
     </ol>
   </div>
 </div>
+
+<app-footer class="bottom-links">
+  <a routerLink="/"><i class="fa fa-home" aria-hidden="true"></i></a>
+  <a href="https://twitter.com/pod_sync"><i aria-hidden="true" class="fa fa-twitter"></i></a>
+</app-footer>

ui/src/app/index/index.component.html

@@ -40,9 +40,7 @@
   </a>
 </div>
 
-<div class="footer">
-  <div class="footer-links">
-    <a routerLink="/faq"><i aria-hidden="true" class="fa fa-question-circle"></i></a>
-    <a href="https://twitter.com/pod_sync"><i aria-hidden="true" class="fa fa-twitter"></i></a>
-  </div>
-</div>
+<app-footer class="bottom-links">
+  <a routerLink="/faq"><i aria-hidden="true" class="fa fa-question-circle"></i></a>
+  <a href="https://twitter.com/pod_sync"><i aria-hidden="true" class="fa fa-twitter"></i></a>
+</app-footer>

ui/src/app/index/index.component.scss

@@ -87,42 +87,3 @@
     display: none;
   }
 }
-
-/* Footer */
-
-.footer {
-  background-image: url('/assets/img/pc_footer.png');
-  -ms-background-position: center bottom;
-  background-position: center bottom;
-  background-color: #aca496;
-  position: absolute;
-  width: 100%;
-  height: 69px;
-  left: 0;
-  bottom: 0;
-  margin: 0;
-  padding: 0;
-  -webkit-user-select: text;
-  z-index: -1;
-
-  @media screen and (max-width: 640px) {
-    background-image: url('/assets/img/mobile_footer.png');
-    height: 50px;
-  }
-}
-
-.footer-links {
-  position: absolute;
-  right: 2em;
-  bottom: 0;
-  font-size: 3em;
-
-  a {
-    color: rgb(62, 62, 41);
-  }
-
-  a:hover {
-    color: rgb(33, 33, 26);
-    background: none;
-  }
-}

ui/src/app/widgets/footer/footer.component.html

@@ -0,0 +1,6 @@
+<div class="footer">
+  <div class="footer-links">
+    <!-- https://www.freecodecamp.org/news/everything-you-need-to-know-about-ng-template-ng-content-ng-container-and-ngtemplateoutlet-4b7b51223691/ -->
+    <ng-content></ng-content>
+  </div>
+</div>

ui/src/app/widgets/footer/footer.component.scss

@@ -0,0 +1,27 @@
+.footer {
+  background-image: url('/assets/img/pc_footer.png');
+  -ms-background-position: center bottom;
+  background-position: center bottom;
+  background-color: #aca496;
+  position: absolute;
+  width: 100%;
+  height: 69px;
+  left: 0;
+  bottom: 0;
+  margin: 0;
+  padding: 0;
+  -webkit-user-select: text;
+  z-index: -1;
+
+  @media screen and (max-width: 640px) {
+    background-image: url('/assets/img/mobile_footer.png');
+    height: 50px;
+  }
+}
+
+.footer-links {
+  position: absolute;
+  right: 2em;
+  bottom: 0;
+  font-size: 3em;
+}

ui/src/app/widgets/footer/footer.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+  let component: FooterComponent;
+  let fixture: ComponentFixture<FooterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FooterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ui/src/app/widgets/footer/footer.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss']
+})
+export class FooterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

ui/src/styles.scss

@@ -25,5 +25,16 @@ a {
   box-shadow: 0 12px 8px -6px rgba(167, 157, 135, 0.4);
 }
 
+.bottom-links {
+  a {
+    color: rgb(62, 62, 41);
+  }
+
+  a:hover {
+    color: rgb(33, 33, 26);
+    background: none;
+  }
+}
+
 $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome";