feat(footer): added footer component and refactor other things

Author: Ismaestro

src/app/app.component.html

@@ -1,9 +1,5 @@
-<div class="container">
+<div class="container main-container">
     <toh-nav [title]="'tourOfHeroes' | translate"></toh-nav>
     <router-outlet></router-outlet>
 </div>
-<footer class="footer">
-    <div class="container">
-        <span class="text-muted">{{ 'tourOfHeroes' | translate }} @2016.</span>
-    </div>
-</footer>
+<toh-footer></toh-footer>

src/app/core/core.module.ts

@@ -11,7 +11,8 @@ import {LoggerService}        from './logger.service';
 import {HeroesModule}      from '../heroes/heroes.module';
 import {HeroRoutingModule} from '../heroes/heroes-routing.module';
 
-import {NavComponent} from './nav/nav.component';
+import {NavComponent}    from './nav/nav.component';
+import {FooterComponent} from "./footer/footer.component";
 
 
 @NgModule({
@@ -27,10 +28,12 @@ import {NavComponent} from './nav/nav.component';
     }),
   ],
   exports: [
-    NavComponent
+    NavComponent,
+    FooterComponent
   ],
   declarations: [
-    NavComponent
+    NavComponent,
+    FooterComponent
   ],
   providers: [
     LoggerService

src/app/core/footer/footer.component.html

@@ -0,0 +1,5 @@
+<footer>
+    <div class="container center">
+        <span class="text-muted">{{ 'tourOfHeroes' | translate }} @2016.</span>
+    </div>
+</footer>

src/app/core/footer/footer.component.scss

@@ -0,0 +1,13 @@
+:host(toh-footer) {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  background-color: #f5f5f5;
+  padding: 0 6em 0 6em;
+
+  .container {
+    padding: 0;
+  }
+}

src/app/core/footer/footer.component.ts

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

src/app/core/nav/nav.component.html

@@ -10,11 +10,11 @@
             </ul>
         </div>
         <div class="dropdown">
-            <a class="btn btn-secondary dropdown-toggle" id="dropdownMenuLink" data-toggle="dropdown"
+            <a class="btn btn-secondary dropdown-toggle" id="languagesDropdown" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                 <i class="fa fa-globe" aria-hidden="true"></i> {{ 'language' | translate }}
             </a>
-            <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
+            <div class="dropdown-menu" aria-labelledby="languagesDropdown">
                 <a class="dropdown-item" (click)="changeLanguage('en')">{{ 'english' | translate }}</a>
                 <a class="dropdown-item" (click)="changeLanguage('es')">{{ 'spanish' | translate }}</a>
             </div>

src/assets/css/styles.css

@@ -18,13 +18,22 @@ body {
     padding: 0;
     width: 100%;
     margin: 0;
+    overflow: hidden;
 }
 
 .container .container {
     width: 80%;
     margin: 0 auto;
 }
 
+.main-container {
+    margin-bottom: 5em;
+}
+
+.center {
+    text-align: center;
+}
+
 h2 {
     color: #444;
     font-weight: lighter;
@@ -37,17 +46,3 @@ h3 {
 button {
     cursor: pointer !important;
 }
-
-.footer {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 60px;
-    line-height: 60px;
-    background-color: #f5f5f5;
-    padding: 0 6em 0 6em;
-}
-
-.footer > .container {
-    padding: 0;
-}