add styling and images

Author: skarski10

src/app/app.component.html

@@ -1,7 +1,7 @@
-<nav class="navbar navbar-default">
+<nav class="navbar navbar-default" id="header">
   <div class="container-fluid">
     <div class="navbar-header">
-      <a class="navbar-brand" routerLink="">Atlanta Braves</a>
+      <a class="navbar-brand" routerLink=""><img id="home-logo" src="./src/img/braves-tomahawk.png" alt="" /></a>
     </div>
     <ul class="nav navbar-nav navbar-right">
       <li><a routerLink="about">About</a></li>

src/app/home-page/home-page.component.html

@@ -9,12 +9,18 @@ <h2>Atlanta Braves Roster:</h2>
     </select>
 
 <div *ngFor="let player of players | async | position:filterByPosition" class="panel panel-default">
+  <div class="panel-heading player-name">{{player?.name}}</div>
   <div class="panel-body">
-    <h3>{{player?.name}}</h3>
-    <img src="{{player?.image}}" alt="" (click)="goToPlayerPage(player)"/>
+    <div class="col-md-6">
+      <img src="{{player?.image}}" alt="" (click)="goToPlayerPage(player)"/>
+    </div>
+    <div class="col-md-6">
+      Number: {{player?.number}}<br>
+      Position: {{player?.position}}<br>
+      B/T: {{player?.bt}}<br>
+    </div>
 
     <div *ngIf="currentRoute === '/admin'">
-      {{player?.number}}
       <hr>
       <app-edit-player [selectedPlayer]="player"></app-edit-player>
     </div>

src/app/player-details/player-details.component.html

@@ -1,4 +1,15 @@
-<div class="">
-  <h1>{{playerToDisplay?.name}}</h1>
-  <img src="{{playerToDisplay?.image}}" alt="Picture of Braves {{playerToDisplay?.position}} {{playerToDisplay?.name}}" />
+<div class="panel panel-default">
+    <div class="panel-heading player-name">{{playerToDisplay?.name}}</div>
+    <div class="panel-body">
+    <div class="col-md-6">
+      <img src="{{playerToDisplay?.image}}" alt="Picture of Braves {{playerToDisplay?.position}} {{playerToDisplay?.name}}" />
+    </div>
+    <div class="col-md-6">
+      Position: {{playerToDisplay?.position}}<br>
+      B/T: {{playerToDisplay?.bt}}<br>
+      Height: {{playerToDisplay?.height}}<br>
+      Weight: {{playerToDisplay?.weight}}<br>
+      Born: {{playerToDisplay?.born}}<br>
+    </div>
+  </div>
 </div>

src/img/braves-tomahawk.png

@@ -1 +1,20 @@
 /* You can add global styles to this file, and also import other style files */
+#home-logo {
+  width: 80px;
+}
+#header {
+  background-color: rgba(19, 39, 79, 1);
+}
+.navbar-default .navbar-nav > li > a {
+    color: white;
+}
+.player-name {
+  text-align: center;
+  font-size: 40px;
+  font-weight: bolder;
+  background-color: rgba(206, 17, 65, 1);
+}
+
+.panel-default > .player-name {
+  background-color: rgba(206, 17, 65, 1);
+}

src/img/old-school-logo.gif

@@ -1,20 +1,18 @@
 {
-  "compileOnSave": false,
   "compilerOptions": {
-    "outDir": "./dist/out-tsc",
-    "baseUrl": "src",
-    "sourceMap": true,
     "declaration": false,
-    "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
+    "lib": ["es6", "dom"],
+    "mapRoot": "./",
+    "module": "es6",
+    "moduleResolution": "node",
+    "outDir": "../dist/out-tsc",
+    "sourceMap": true,
     "target": "es5",
     "typeRoots": [
-      "node_modules/@types"
+      "../node_modules/@types"
     ],
-    "lib": [
-      "es2016",
-      "dom"
-    ]
+    "types": [ "firebase" ]
   }
 }