docs(tutorial): update css and related fixes

closes #603

public/docs/_examples/toh-2/ts/app/app.component.ts

@@ -29,20 +29,52 @@ interface Hero {
   `,
 // #docregion styles-1
   styles:[`
-    .heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;}
+    .selected {
-    .heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; }
+      background-color: #CFD8DC !important;
-    .heroes li:hover {color: #369; background-color: #EEE; left: .2em;}
+      color: white;
+    }
+    .heroes {
+      margin: 0 0 2em 0;
+      list-style-type: none;
+      padding: 0;
+      width: 10em;
+    }
+    .heroes li {
+      cursor: pointer;
+      position: relative;
+      left: 0;
+      background-color: #EEE;
+      margin: .5em;
+      padding: .3em 0em;
+      height: 1.6em;
+      border-radius: 4px;
+    }
+    .heroes li.selected:hover {
+      color: white;
+    }
+    .heroes li:hover {
+      color: #607D8B;
+      background-color: #EEE;
+      left: .1em;
+    }
+    .heroes .text {
+      position: relative;
+      top: -3px;
+    }
     .heroes .badge {
+      display: inline-block;
       font-size: small;
       color: white;
-      padding: 0.1em 0.7em;
+      padding: 0.8em 0.7em 0em 0.7em;
-      background-color: #369;
+      background-color: #607D8B;
       line-height: 1em;
       position: relative;
       left: -1px;
-      top: -1px;
+      top: -4px;
+      height: 1.8em;
+      margin-right: .8em;
+      border-radius: 4px 0px 0px 4px;
     }
-    .selected { background-color: #EEE; color: #369; }
   `]
 // #enddocregion styles-1
 })

public/docs/_examples/toh-3/ts/app/app.component.ts

@@ -24,20 +24,52 @@ import {HeroDetailComponent} from './hero-detail.component';
   `,
 // #enddocregion hero-detail-template
   styles:[`
-    .heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;}
+    .selected {
-    .heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; }
+      background-color: #CFD8DC !important;
-    .heroes li:hover {color: #369; background-color: #EEE; left: .2em;}
+      color: white;
+    }
+    .heroes {
+      margin: 0 0 2em 0;
+      list-style-type: none;
+      padding: 0;
+      width: 10em;
+    }
+    .heroes li {
+      cursor: pointer;
+      position: relative;
+      left: 0;
+      background-color: #EEE;
+      margin: .5em;
+      padding: .3em 0em;
+      height: 1.6em;
+      border-radius: 4px;
+    }
+    .heroes li.selected:hover {
+      color: white;
+    }
+    .heroes li:hover {
+      color: #607D8B;
+      background-color: #EEE;
+      left: .1em;
+    }
+    .heroes .text {
+      position: relative;
+      top: -3px;
+    }
     .heroes .badge {
+      display: inline-block;
       font-size: small;
       color: white;
-      padding: 0.1em 0.7em;
+      padding: 0.8em 0.7em 0em 0.7em;
-      background-color: #369;
+      background-color: #607D8B;
       line-height: 1em;
       position: relative;
       left: -1px;
-      top: -1px;
+      top: -4px;
+      height: 1.8em;
+      margin-right: .8em;
+      border-radius: 4px 0px 0px 4px;
     }
-    .selected { background-color: #EEE; color: #369; }
   `],
 // #docregion directives
   directives: [HeroDetailComponent]

public/docs/_examples/toh-4/ts/app/app.component.ts

@@ -22,20 +22,52 @@ import {HeroService} from './hero.service';
     <my-hero-detail [hero]="selectedHero"></my-hero-detail>
   `,
   styles:[`
-    .heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;}
+    .selected {
-    .heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; }
+      background-color: #CFD8DC !important;
-    .heroes li:hover {color: #369; background-color: #EEE; left: .2em;}
+      color: white;
+    }
+    .heroes {
+      margin: 0 0 2em 0;
+      list-style-type: none;
+      padding: 0;
+      width: 10em;
+    }
+    .heroes li {
+      cursor: pointer;
+      position: relative;
+      left: 0;
+      background-color: #EEE;
+      margin: .5em;
+      padding: .3em 0em;
+      height: 1.6em;
+      border-radius: 4px;
+    }
+    .heroes li.selected:hover {
+      color: white;
+    }
+    .heroes li:hover {
+      color: #607D8B;
+      background-color: #EEE;
+      left: .1em;
+    }
+    .heroes .text {
+      position: relative;
+      top: -3px;
+    }
     .heroes .badge {
+      display: inline-block;
       font-size: small;
       color: white;
-      padding: 0.1em 0.7em;
+      padding: 0.8em 0.7em 0em 0.7em;
-      background-color: #369;
+      background-color: #607D8B;
       line-height: 1em;
       position: relative;
       left: -1px;
-      top: -1px;
+      top: -4px;
+      height: 1.8em;
+      margin-right: .8em;
+      border-radius: 4px 0px 0px 4px;
     }
-    .selected { background-color: #EEE; color: #369; }
   `],
   directives: [HeroDetailComponent],
   providers: [HeroService]

public/docs/_examples/tutorial/ts/app/app.component.css

@@ -0,0 +1,28 @@
+a {
+  padding: 5px 10px;
+  text-decoration: none;
+  margin-top: 10px;
+  display: inline-block;
+  background-color: #eee;
+  border-radius: 4px;
+}
+a:visited, a:link {
+  color: #607D8B;
+}
+a:hover {
+  color: #039be5;
+  background-color: #CFD8DC;
+}
+a.router-link-active {
+  color: #039be5;
+}
+h1 {
+  font-size: 1.2em;
+  color: #999;
+  margin-bottom: 0;
+}
+h2 {
+  font-size: 2em;
+  margin-top: 0;
+  padding-top: 0;
+}

public/docs/_examples/tutorial/ts/app/app.component.ts

@@ -3,6 +3,7 @@ import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
 import {HeroesComponent} from './heroes.component';
 import {HeroDetailComponent} from './hero-detail.component';
 import {DashboardComponent} from './dashboard.component';
+import {HeroService} from './hero.service';
 
 @Component({
   selector: 'my-app',
@@ -12,13 +13,9 @@ import {DashboardComponent} from './dashboard.component';
     <a [routerLink]="['Heroes']">Heroes</a>
     <router-outlet></router-outlet>
   `,
-  styles: [`
+  styleUrls: ['app/app.component.css'],
-    a {padding: 5px;text-decoration: none;}
+  directives: [ROUTER_DIRECTIVES],
-    a:visited, a:link {color: #444;}
+  providers: [HeroService]
-    a:hover {color: white; background-color: #1171a3;}
-    a.router-link-active {color: white; background-color: #52b9e9;}
-  `],
-  directives: [ROUTER_DIRECTIVES]
 })
 @RouteConfig([
   // {path: '/', redirectTo: ['Dashboard'] },

public/docs/_examples/tutorial/ts/app/dashboard.component.css

@@ -1,37 +1,60 @@
-[class*='col-'] { float: left; }
+[class*='col-'] {
-
+  float: left;
+}
 *, *:after, *:before {
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }
-
+h3 {
-h3 { text-align: center; margin-bottom: 0; }
+  text-align: center; margin-bottom: 0;
-
+}
-[class*='col-'] { padding-right: 20px; padding-bottom: 20px;}
+[class*='col-'] {
-[class*='col-']:last-of-type { padding-right: 0; }
+  padding-right: 20px;
-
+  padding-bottom: 20px;
-.grid { margin: 0 10em; }
+}
-.col-1-4 { width: 25%; }
+[class*='col-']:last-of-type {
+  padding-right: 0;
+}
+.grid {
+  margin: 0 0em;
+}
+.col-1-4 {
+  width: 25%;
+}
 .module {
 	padding: 20px;
 	text-align: center;
 	color: #eee;
 	max-height: 120px;
 	min-width: 120px;
-	background-color: #1171a3;
+	background-color: #607D8B;
+	border-radius: 2px;
+}
+h4 {
+  position: relative;
+}
+.module:hover {
+  background-color: #EEE;
+  cursor: pointer;
+  color: #607d8b;
+}
+.grid-pad {
+  padding: 10px 0;
+}
+.grid-pad > [class*='col-']:last-of-type {
+  padding-right: 20px;
 }
-
-.module:hover { background-color: #52b9e9; cursor: pointer; }
-
-.grid-pad { padding: 20px 0 20px 20px; }
-.grid-pad > [class*='col-']:last-of-type { padding-right: 20px; }
-
 @media (max-width: 600px) {
-	.module { font-size: 10px; max-height: 75px; }
+	.module {
+	  font-size: 10px;
+	  max-height: 75px; }
 }
-
 @media (max-width: 1024px) {
-	.grid { margin: 0; }
+	.grid {
-	.module { min-width: 60px; }
+	  margin: 0;
+	}
+	.module {
+	  min-width: 60px;
+	}
 }

public/docs/_examples/tutorial/ts/app/hero-detail.component.css

@@ -0,0 +1,24 @@
+label {
+  display: inline-block;
+  width: 3em;
+  margin: .5em 0;
+  color: #607D8B;
+  font-weight: bold;
+}
+input {
+  height: 2em;
+  font-size: 1em;
+  padding-left: .4em;
+}
+button {
+  margin-top: 20px;
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer; cursor: hand;
+}
+button:hover {
+  background-color: #cfd8dc;
+}

public/docs/_examples/tutorial/ts/app/hero-detail.component.ts

@@ -6,6 +6,7 @@ import {HeroService} from './hero.service';
 @Component({
   selector: 'my-hero-detail',
   templateUrl: 'app/hero-detail.component.html',
+  styleUrls: ['app/hero-detail.component.css'],
   inputs: ['hero']
 })
 export class HeroDetailComponent implements OnInit {

public/docs/_examples/tutorial/ts/app/heroes.component.css

@@ -1,17 +1,58 @@
-.heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;}
+.selected {
-
+  background-color: #CFD8DC !important;
-.heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; }
+  color: white;
-
-.heroes li:hover {color: #369; background-color: #EEE; left: .2em;}
-
-.heroes .badge {
-	font-size: small;
-	color: white;
-	padding: 0.1em 0.7em;
-	background-color: #369;
-	line-height: 1em;
-	position: relative;
-	left: -1px;
-	top: -1px;
 }
-.selected { background-color: #EEE; color: #369; }
+.heroes {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 10em;
+}
+.heroes li {
+  cursor: pointer;
+  position: relative;
+  left: 0;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0em;
+  height: 1.6em;
+  border-radius: 4px;
+}
+.heroes li:hover {
+  color: #607D8B;
+  background-color: #EEE;
+  left: .1em;
+}
+.heroes li.selected:hover {
+  color: white;
+}
+.heroes .text {
+  position: relative;
+  top: -3px;
+}
+.heroes .badge {
+  display: inline-block;
+  font-size: small;
+  color: white;
+  padding: 0.8em 0.7em 0em 0.7em;
+  background-color: #607D8B;
+  line-height: 1em;
+  position: relative;
+  left: -1px;
+  top: -4px;
+  height: 1.8em;
+  margin-right: .8em;
+  border-radius: 4px 0px 0px 4px;
+}
+button {
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  cursor: hand;
+}
+button:hover {
+  background-color: #cfd8dc;
+}

public/docs/_examples/tutorial/ts/styles.css

@@ -1,4 +1,5 @@
 h2 { color: #444; font-weight: lighter; }
 body { margin: 2em; }
 body, input[text], button { color: #888; font-family: Cambria, Georgia; }
-button {padding: 0.2em; font-size: 14px}
+button { padding: 0.2em; font-size: 14px}
+* { font-family: Arial; }

public/docs/ts/latest/tutorial/index.jade

@@ -52,7 +52,7 @@ figure.image-display
   "Magneta" as the selected hero.
 
 figure.image-display
-  img(src='/resources/images/devguide/toh/heroes-list-3.png' alt="Output of heroes list app")
+  img(src='/resources/images/devguide/toh/heroes-list-2.png' alt="Output of heroes list app")
 
 :marked
   We click a different hero and the readonly mini-detail beneath the list reflects our new choice.

public/docs/ts/latest/tutorial/toh-pt2.jade

@@ -139,10 +139,8 @@ code-example(format="." language="bash").
 +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-styled', 'app.component.ts (Styled heroes)')
 
 :marked
-  Our styled list of heroes should look like this:
+  That's a lot of styles! We can put them inline as shown here, or we can move them out to their own file which will make it easier to code our component. 
-
+  We'll do this in a later chapter. For now let's keep rolling.
-figure.image-display
-  img(src='/resources/images/devguide/toh/heroes-list-2.png' alt="Output of heroes list app (no selection color)")
 
 .l-main-section
   :marked
@@ -277,7 +275,7 @@ figure.image-display
 
   :marked
     The browser reloads our app.
-    We select a hero and the selection is clearly identified by the background color.
+    We select the hero Magneta and the selection is clearly identified by the background color.
 
   figure.image-display
     img(src='/resources/images/devguide/toh/heroes-list-1.png' alt="Output of heroes list app")