day 8 - add some style with bootstrap

client/app.component.css

@@ -1,6 +1,6 @@
 h1 {
   font-size: 3em;
-  color: #191;
+  color: #2F2933;
   margin-bottom: 0;
 }
 h2 {
@@ -25,4 +25,7 @@ nav a:hover {
 }
 nav a.active {
   color: #039be5;
+}
+#top-nav {
+  padding-top: 10px;
 }

client/app.component.html

@@ -0,0 +1,8 @@
+<div class="container">    
+    <h1>{{title}}</h1>
+    <ul id="top-nav" class="list-unstyled">
+        <li>Days 1-6: <a routerLink="/tour-of-vegetables" routerLinkActive="active">Tour of Vegetables</a></li>
+        <li>Days 7-?: <a routerLink="/message-of-the-moment" routerLinkActive="active">Message of the Moment</a></li>
+    </ul>
+</div>
+<router-outlet></router-outlet>

client/app.component.ts

@@ -2,14 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
     selector: 'my-app',
-    template: `
-        <h1>{{title}}</h1>
-        <ul>
-            <li>Days 1-6: <a routerLink="/tour-of-vegetables" routerLinkActive="active">Tour of Vegetables</a></li>
-            <li>Days 7-?: <a routerLink="/message-of-the-moment" routerLinkActive="active">Message of the Moment</a></li>
-        <ul>
-        <router-outlet></router-outlet>
-    `,
+    templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
 })
 

client/day-001-vegetables/vegetables-app.component.ts

@@ -2,12 +2,14 @@ import { Component } from '@angular/core';
 
 @Component({
     template: `
+        <div class="container">
         <h1>{{title}}</h1>
         <nav>
             <a routerLink="dashboard" routerLinkActive="active">Dashboard</a>
             <a routerLink="vegetables" routerLinkActive="active">Vegetables</a>
         </nav>
         <router-outlet></router-outlet>
+        </div>
     `,
     styleUrls: ['./vegetables-app.css']
 })

client/day-007-messages/messages.component.css

@@ -0,0 +1,5 @@
+p#messageOfTheMoment {
+    padding: 20px 10px 20px 10px;
+    font-size: larger;
+    color: #01A2A6;
+}

client/day-007-messages/messages.component.html

@@ -0,0 +1,12 @@
+<div class="container">
+    <h2>Message of the Moment</h2>
+    <p id="messageOfTheMoment"><em>{{currentMessage}}</em></p>
+    <p>Think you're clever? Are you able to alliterate? Do you know anything that ryhmes with purple? Would YOU like to set the message of the moment, for all to see?! Or at least... until the next person sets it?<p>
+    <form>
+        <div class="form-group">
+            <label for="newMessage">New Message of the Moment</label>
+            <textarea id="newMessage" class="form-control" [(ngModel)]="newMessage"  [ngModelOptions]="{standalone: true}" placeholder="I think carrots are just ok."></textarea>
+        </div>
+        <button type="button" class="btn btn-primary btn-block btn-lg" [disabled]="!newMessage" (click)="submitMessage()">Declare this message to be the Message of the Moment</button>
+    </form>
+</div>

client/day-007-messages/messages.component.ts

@@ -2,15 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { MessagesService } from './messages.service';
 
 @Component({
-    template: `
-        <h2>Message of the Moment</h2>
-        <p style="padding-right: 40px"><em>{{currentMessage}}</em></p>
-        <p style="padding-top: 40px">Would you like to set the message of the moment, for all to see?<p>
-        <p>Or at least... until the next person sets it...?</p>
-        <label>New Message of the Moment: </label>
-        <input [(ngModel)]="newMessage" placeholder="I think carrots are just ok." />
-        <button (click)="submitMessage()">Declare this message to be the Message of the Moment</button>
-    `,
+    templateUrl: './messages.component.html',
+    styleUrls: ['./messages.component.css'],
     providers: [MessagesService]
 })
 

config/webpack.dev.js

@@ -24,6 +24,10 @@ module.exports = webpackMerge(commonConfig, {
             '/api': {
                 target: 'http://localhost:3000',
                 secure: false
+            },
+            '/bootstrap.min.css': {
+                target: 'http://localhost:3000',
+                secure: false
             }
         }
     }

index.html

@@ -1,9 +1,11 @@
 <html>
   <head>
-    <base href="/">
-    <title>Angular SlowStart</title>
     <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <base href="/">
+    <title>Angular SlowStart</title>
+    <link href="bootstrap.min.css" rel="stylesheet">
   </head>
   <body>
     <my-app>Loading...</my-app>