feat: Footer

package.json

@@ -3,6 +3,19 @@
   "description": "Create and share interactive boards online",
   "version": "1.0.0",
   "license": "MIT",
+  "homepage": "https://online-board.firebaseapp.com",
+  "author": "andreasonny <andreasonny83@gmail.com>",
+  "contributors": [
+    {"name": "Claudia Donea", "email": "claudia.donea24@gmail.com"},
+    {"name": "Driskyle", "url": "http://driskyle.com", "email": "driskyle@gmail.com"}
+  ],
+  "repository": {
+    "type" : "git",
+    "url" : "https://github.com/andreasonny83/online-board.git"
+  },
+  "bugs": {
+    "url": "https://github.com/andreasonny83/online-board/issues"
+  },
   "scripts": {
     "start": "webpack-dev-server --port=4200",
     "commit": "git-cz",

src/app/app.component.html

@@ -9,5 +9,9 @@
        [class.tall]="tall"
        (scroll)="onScroll($event)">
     <router-outlet></router-outlet>
+
+    <app-footer [version]="version"
+                [homepage]="homepage"
+                [title]="title"></app-footer>
   </div>
 </div>

src/app/app.component.ts

@@ -26,6 +26,7 @@ import {
 })
 export class AppComponent implements OnInit {
   public title: string;
+  public homepage: string;
   public floatingClass: boolean;
   public version: number;
   public visibility: 'show' | 'hide';
@@ -45,6 +46,7 @@ export class AppComponent implements OnInit {
 
   ngOnInit() {
     this.version = environment.version;
+    this.homepage = environment.homepage;
     this.title = 'Online Board';
   }
 

src/app/app.module.ts

@@ -7,6 +7,7 @@ import { HttpModule } from '@angular/http';
 import { AppRoutingModule } from './app-routing.module';
 import { FirebaseModule } from '../firebase';
 import { CookieLawModule } from 'angular2-cookie-law';
+import { HeaderModule } from './header';
 import {
   MdToolbarModule,
   MdCardModule,
@@ -24,7 +25,7 @@ import { HomeComponent } from './home/home.component';
 import { LoginComponent } from './login/login.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { BoardPageComponent } from './board-page/board-page.component';
-import { HeaderModule } from './header';
+import { FooterComponent } from './footer/footer.component';
 
 import { AuthGuard } from './auth-guard.service';
 import { AuthService } from './auth.service';
@@ -38,6 +39,7 @@ import { Keyobject } from './pipes';
     LoginComponent,
     DashboardComponent,
     BoardPageComponent,
+    FooterComponent,
     Keyobject,
   ],
   imports: [

src/app/footer/footer.component.css

@@ -0,0 +1,73 @@
+* {
+  box-sizing: border-box;
+}
+
+.site-footer {
+  max-width: 1200px;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  margin: 0 auto;
+  padding: 24px 10px 10px;
+  margin-top: 70px;
+  border-top: 1px solid #e2e2e2;
+}
+
+ul,
+li,
+.site-title {
+  display: inline-block;
+  padding: 0;
+  margin: 0;
+  line-height: 28px;
+  font-size: 14px;
+  text-align: center;
+}
+
+.site-title {
+  text-align: center;
+}
+
+li {
+  line-height: 16px;
+  box-sizing: border-box;
+}
+
+.copy {
+  width: 100%;
+}
+
+.links {
+  flex: 1;
+}
+
+a {
+  color: #0366d6;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+@media (min-width: 601px) {
+  .site-footer {
+    flex-direction: row;
+  }
+
+  .copy {
+    width: initial;
+  }
+
+  ul,
+  li,
+  .site-title {
+    line-height: 16px;
+    font-size: 12px;
+    text-align: left;
+  }
+
+  .right {
+    text-align: right;
+  }
+}

src/app/footer/footer.component.html

@@ -0,0 +1,20 @@
+<div class="site-footer container">
+  <ul class="links">
+    <li class="copy">© 2017 <span>Online Board</span>, All right reserved.</li>
+    <li><a href="{{pages.mit}}">MIT license</a></li>
+    <li><a href="{{pages.git}}">GitHub repository</a></li>
+    <li><a href="{{pages.releases}}">Releases</a></li>
+  </ul>
+
+  <a href="{{pages.home}}"
+     aria-label="Online Board"
+     class="site-title"
+     title="Online Board">
+    Online Board v.{{version}}
+  </a>
+
+  <ul class="links right">
+    <li><a href="{{pages.bugs}}">Report a bug</a></li>
+    <li><a href="{{pages.about}}">About</a></li>
+  </ul>
+</div>

src/app/footer/footer.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+interface IPages {
+  home: string;
+  about: string;
+  mit: string;
+  git: string;
+  releases: string;
+  bugs: string;
+}
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.css'],
+})
+export class FooterComponent implements OnInit {
+  @Input('version') version: string;
+  @Input('homepage') homepage: string;
+
+  public pages: IPages;
+
+  constructor() {
+    this.pages = {
+      home: this.homepage,
+      about: 'https://github.com/andreasonny83/online-board/blob/master/README.md',
+      mit: 'https://github.com/andreasonny83/online-board/blob/master/LICENSE',
+      git: 'https://github.com/andreasonny83/online-board.git',
+      releases: 'https://github.com/andreasonny83/online-board/releases',
+      bugs: 'https://github.com/andreasonny83/online-board/issues/new',
+    }
+  }
+
+  ngOnInit() { }
+}

src/environments/environment.prod.ts

@@ -1,4 +1,5 @@
 export const environment = {
   production: true,
   version: require('../../package.json').version,
+  homepage: require('../../package.json').homepage,
 };

src/environments/environment.ts

@@ -6,4 +6,5 @@
 export const environment = {
   production: false,
   version: require('../../package.json').version,
+  homepage: require('../../package.json').homepage,
 };