Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 0320013

Browse files
committed
Move styles from sample.css to heroes.component.css.
Move additional styles from `sample.css` to `hero-search.component.css`. Edit tutorial to reflect the removal of `sample.css` and the change to `heroes.component.css`. Edit tutorial to reflect the addition of `hero-search.component.css` file. Edit `hero-search.component.ts` to include styles from `hero-search.component.css`. Remove reference to `/public/docs/_examples/toh-6/ts/sample.css` from `/public/docs/_examples/toh-6/ts/index.html`.
1 parent a49ecc7 commit 0320013

File tree

5 files changed

+22
-16
lines changed

5 files changed

+22
-16
lines changed
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,4 @@
11
/* #docregion */
2-
.error {color:red;}
3-
button.delete-button{
4-
float:right;
5-
background-color: gray !important;
6-
color:white;
7-
}
8-
92
.search-result{
103
border-bottom: 1px solid gray;
114
border-left: 1px solid gray;
@@ -21,4 +14,3 @@ button.delete-button{
2114
width: 200px;
2215
height: 20px;
2316
}
24-

public/docs/_examples/toh-6/ts/app/hero-search.component.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { Hero } from './hero';
1111
@Component({
1212
selector: 'hero-search',
1313
templateUrl: 'app/hero-search.component.html',
14+
styleUrls: ['app/hero-search.component.css'],
1415
providers: [HeroSearchService]
1516
})
1617
export class HeroSearchComponent implements OnInit {

public/docs/_examples/toh-6/ts/app/heroes.component.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* #docregion */
12
.selected {
23
background-color: #CFD8DC !important;
34
color: white;
@@ -57,3 +58,10 @@ button {
5758
button:hover {
5859
background-color: #cfd8dc;
5960
}
61+
/* #docregion additions */
62+
.error {color:red;}
63+
button.delete-button{
64+
float:right;
65+
background-color: gray !important;
66+
color:white;
67+
}

public/docs/_examples/toh-6/ts/index.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77

88
<link rel="stylesheet" href="styles.css">
9-
<link rel="stylesheet" href="sample.css">
109

1110
<!-- Polyfill(s) for older browsers -->
1211
<script src="node_modules/core-js/client/shim.min.js"></script>

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

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -316,7 +316,9 @@ block add-new-hero-via-detail-comp
316316
The user can *delete* an existing hero by clicking a delete button next to the hero's name.
317317
Add the following to the heroes component HTML right after the hero name in the repeated `<li>` tag:
318318
+makeExample('app/heroes.component.html', 'delete')
319-
319+
:marked
320+
Add the following CSS to the bottom of `heroes.component.css`.
321+
+makeExcerpt('app/heroes.component.css', 'additions', '')
320322
:marked
321323
Now let's fix-up the `HeroesComponent` to support the *add* and *delete* actions used in the template.
322324
Let's start with *add*.
@@ -396,7 +398,6 @@ block observables-section
396398
We start by creating `HeroSearchService` that sends search queries to our server's web api.
397399

398400
+makeExample('toh-6/ts/app/hero-search.service.ts', null, 'app/hero-search.service.ts')(format=".")
399-
400401
:marked
401402
The `http.get` call in `HeroSearchService` is similar to the `http.get` call in the `HeroService`.
402403
The notable difference: we no longer call `toPromise`.
@@ -407,6 +408,9 @@ block observables-section
407408

408409
The component template is simple - just a textbox and a list of matching search results.
409410
+makeExample('toh-6/ts/app/hero-search.component.html', null,'hero-search.component.html')
411+
:marked
412+
We'll also want to add styles for the new component.
413+
+makeExample('app/hero-search.component.css')
410414
:marked
411415
As the user types in the search box, a *keyup* event binding calls the component's `search` with the new search box value.
412416

@@ -535,6 +539,7 @@ block filetree
535539
.file hero-detail.component.html
536540
.file hero-detail.component.ts
537541
.file hero-search.component.html
542+
.file hero-search.component.css
538543
.file hero-search.component.ts
539544
.file hero-search.service.ts
540545
.file rxjs-operators.ts
@@ -548,7 +553,6 @@ block filetree
548553
.file typings ...
549554
.file index.html
550555
.file package.json
551-
.file sample.css (new)
552556
.file styles.css
553557
.file systemjs.config.json
554558
.file tsconfig.json
@@ -573,30 +577,32 @@ block file-summary
573577
`toh-6/ts/app/app.component.ts,
574578
toh-6/ts/app/heroes.component.ts,
575579
toh-6/ts/app/heroes.component.html,
580+
toh-6/ts/app/heroes.component.css,
576581
toh-6/ts/app/hero-detail.component.ts,
577582
toh-6/ts/app/hero-detail.component.html,
578583
toh-6/ts/app/hero.service.ts,
579-
toh-6/ts/app/in-memory-data.service.ts,
580-
toh-6/ts/sample.css`,
584+
toh-6/ts/app/in-memory-data.service.ts`,
581585
null,
582586
`app.comp...ts,
583587
heroes.comp...ts,
584588
heroes.comp...html,
589+
heroes.comp...css,
585590
hero-detail.comp...ts,
586591
hero-detail.comp...html,
587592
hero.service.ts,
588-
in-memory-data.service.ts,
589-
sample.css`
593+
in-memory-data.service.ts`
590594
)
591595

592596
+makeTabs(
593597
`toh-6/ts/app/hero-search.service.ts,
594598
toh-6/ts/app/hero-search.component.ts,
595599
toh-6/ts/app/hero-search.component.html,
600+
toh-6/ts/app/hero-search.component.css,
596601
toh-6/ts/app/rxjs-operators.ts`,
597602
null,
598603
`hero-search.service.ts,
599604
hero-search.component.ts,
600605
hero-search.service.html,
606+
hero-search.component.css,
601607
rxjs-operators.ts`
602608
)

0 commit comments

Comments
 (0)