feat(style): added bootstrap and font awesome

Author: Ismaestro

angular-cli.json

@@ -18,17 +18,25 @@
       "prefix": "toh",
       "mobile": false,
       "styles": [
+        "../node_modules/bootstrap/dist/css/bootstrap.css",
+        "../node_modules/font-awesome/css/font-awesome.css",
         "assets/css/styles.css"
       ],
-      "scripts": [],
+      "scripts": [
+        "../node_modules/jquery/dist/jquery.js",
+        "../node_modules/tether/dist/js/tether.js",
+        "../node_modules/bootstrap/dist/js/bootstrap.js"
+      ],
       "environments": {
         "source": "environments/environment.ts",
         "dev": "environments/environment.ts",
         "prod": "environments/environment.prod.ts"
       }
     }
   ],
-  "addons": [],
+  "addons": [
+    "../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)"
+  ],
   "packages": [],
   "e2e": {
     "protractor": {

e2e/app.e2e-spec.ts

@@ -9,6 +9,6 @@ describe('angular-hero-cli App', function () {
 
   it('Title', () => {
     page.navigateTo();
-    expect(page.getParagraphText()).toEqual('Tour of Heroes');
+    expect(page.getParagraphText()).toEqual('Top Heroes');
   });
 });

e2e/app.po.ts

@@ -6,6 +6,6 @@ export class AngularTOHPage {
   }
 
   getParagraphText() {
-    return element(by.css('toh-app > h1')).getText();
+    return element(by.css('toh-hero-top h3')).getText();
   }
 }

package.json

@@ -22,7 +22,9 @@
     "@angular/platform-browser": "^2.3.1",
     "@angular/platform-browser-dynamic": "^2.3.1",
     "@angular/router": "^3.3.1",
+    "bootstrap": "^4.0.0-alpha.6",
     "core-js": "^2.4.1",
+    "font-awesome": "^4.7.0",
     "json-server": "^0.9.4",
     "rxjs": "^5.0.1",
     "ts-helpers": "^1.1.1",

protractor.conf.js

@@ -13,7 +13,7 @@ exports.config = {
     'browserName': 'chrome'
   },
   directConnect: true,
-  baseUrl: 'http://localhost:3002/',
+  baseUrl: 'http://localhost:4200/',
   framework: 'jasmine',
   jasmineNodeOpts: {
     showColors: true,

server/db.json

@@ -18,12 +18,6 @@
       "power": "Weather Changer",
       "alterEgo": "bombi"
     },
-    {
-      "id": 14,
-      "name": "Celeritas",
-      "power": "Super Hot",
-      "alterEgo": "cele"
-    },
     {
       "id": 15,
       "name": "Magneta",
@@ -47,12 +41,6 @@
       "name": "Magma",
       "power": "Super Flexible",
       "alterEgo": "cold"
-    },
-    {
-      "id": 20,
-      "name": "Tornado",
-      "power": "Really Smart",
-      "alterEgo": "torny"
     }
   ]
 }

src/app/app.component.html

@@ -1,3 +1,2 @@
-<h1>{{title}}</h1>
-<toh-nav></toh-nav>
+<toh-nav [title]="'Tour of heroes'"></toh-nav>
 <router-outlet></router-outlet>

src/app/app.component.ts

@@ -5,8 +5,7 @@ import {IAppConfig} from './config/iapp.config';
 
 @Component({
   selector: 'toh-app',
-  templateUrl: './app.component.html',
-  styleUrls: [],
+  templateUrl: './app.component.html'
 })
 
 export class AppComponent {

src/app/core/core.module.js

@@ -2,11 +2,11 @@ import {Injectable} from '@angular/core';
 
 @Injectable()
 export class LoggerService {
-  log(msg: string) {
+  static log(msg: string) {
     console.log(msg);
   }
 
-  error(msg: string, obj?: any) {
+  static error(msg: string, obj?: any) {
     console.error(msg, obj);
   }
 }

src/app/core/core.module.js.map

@@ -1,6 +1,14 @@
 <header>
-  <nav>
-    <a *ngFor="let item of menuItems" routerLink="{{item.link}}" routerLinkActive="active">{{item.name}}</a>
-  </nav>
-  <toh-hero-search></toh-hero-search>
+    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
+        <a class="navbar-brand" href="/">{{title}}</a>
+        <div class="collapse navbar-collapse" id="navbarNav">
+            <ul class="navbar-nav">
+                <li class="nav-item active" routerLinkActive="active"
+                    *ngFor="let item of menuItems" routerLink="{{item.link}}">
+                    <a class="nav-link">{{item.name}}</a>
+                </li>
+            </ul>
+        </div>
+        <toh-hero-search></toh-hero-search>
+    </nav>
 </header>

src/app/core/logger.service.js

@@ -0,0 +1,32 @@
+header {
+  display: flex;
+  margin-bottom: 3em;
+
+  nav {
+    width: 100%;
+    float: left;
+
+    a {
+      padding: 15px 20px;
+      text-decoration: none;
+      margin: 0 1em 0 0;
+      display: inline-block;
+      background-color: #eee;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+
+    a:visited, a:link {
+      color: #607D8B;
+    }
+
+    a:hover {
+      color: #039be5;
+      background-color: #CFD8DC;
+    }
+
+    a.active {
+      color: #039be5;
+    }
+  }
+}