From 4b1249d35feee94d7488e2797be6832f0557f586 Mon Sep 17 00:00:00 2001
From: Maksym Pavlenko <pavlenko.maksym@gmail.com>
Date: Sun, 2 Jun 2019 18:33:09 -0700
Subject: [PATCH] Fix FAQ footer

---
 ui/src/app/app.module.ts                      |  4 +-
 ui/src/app/faq/faq.component.html             |  5 +++
 ui/src/app/index/index.component.html         | 10 ++---
 ui/src/app/index/index.component.scss         | 39 -------------------
 .../app/widgets/footer/footer.component.html  |  6 +++
 .../app/widgets/footer/footer.component.scss  | 27 +++++++++++++
 .../widgets/footer/footer.component.spec.ts   | 25 ++++++++++++
 ui/src/app/widgets/footer/footer.component.ts | 15 +++++++
 ui/src/styles.scss                            | 11 ++++++
 9 files changed, 96 insertions(+), 46 deletions(-)
 create mode 100644 ui/src/app/widgets/footer/footer.component.html
 create mode 100644 ui/src/app/widgets/footer/footer.component.scss
 create mode 100644 ui/src/app/widgets/footer/footer.component.spec.ts
 create mode 100644 ui/src/app/widgets/footer/footer.component.ts

diff --git a/ui/src/app/app.module.ts b/ui/src/app/app.module.ts
index 9fc6864..9539587 100644
--- a/ui/src/app/app.module.ts
+++ b/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,
diff --git a/ui/src/app/faq/faq.component.html b/ui/src/app/faq/faq.component.html
index 91a6173..2c10da2 100644
--- a/ui/src/app/faq/faq.component.html
+++ b/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>
diff --git a/ui/src/app/index/index.component.html b/ui/src/app/index/index.component.html
index f324e91..d4258cb 100644
--- a/ui/src/app/index/index.component.html
+++ b/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>
diff --git a/ui/src/app/index/index.component.scss b/ui/src/app/index/index.component.scss
index 8f3b818..d1133b8 100644
--- a/ui/src/app/index/index.component.scss
+++ b/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;
-  }
-}
diff --git a/ui/src/app/widgets/footer/footer.component.html b/ui/src/app/widgets/footer/footer.component.html
new file mode 100644
index 0000000..74e5beb
--- /dev/null
+++ b/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>
diff --git a/ui/src/app/widgets/footer/footer.component.scss b/ui/src/app/widgets/footer/footer.component.scss
new file mode 100644
index 0000000..dd44e21
--- /dev/null
+++ b/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;
+}
diff --git a/ui/src/app/widgets/footer/footer.component.spec.ts b/ui/src/app/widgets/footer/footer.component.spec.ts
new file mode 100644
index 0000000..2ca6c45
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/ui/src/app/widgets/footer/footer.component.ts b/ui/src/app/widgets/footer/footer.component.ts
new file mode 100644
index 0000000..da17d82
--- /dev/null
+++ b/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() {
+  }
+
+}
diff --git a/ui/src/styles.scss b/ui/src/styles.scss
index 36c6394..6e0fba3 100644
--- a/ui/src/styles.scss
+++ b/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";