honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: improve accessibility of toh-pt5 example (#40632) 

PR Close #40632
This commit is contained in:
Kapunahele Wong 2021-01-29 15:24:30 -05:00 committed by atscott
parent edd26a2b79
commit 4d1299bd82
13 changed files with 101 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
aio/content/examples/toh-pt5/e2e/src/app.e2e-spec.ts
View File

@ -46,7 +46,7 @@ describe('Tutorial part 5', () => {
appDashboardHref: navElts.get(0),
appDashboard: element(by.css('app-root app-dashboard')),
topHeroes: element.all(by.css('app-root app-dashboard > div h4')),
topHeroes: element.all(by.css('app-root app-dashboard > div a')),
appHeroesHref: navElts.get(1),
appHeroes: element(by.css('app-root app-heroes')),

16
aio/content/examples/toh-pt5/src/app/app.component.css
View File

@ -1,23 +1,21 @@
/* AppComponent's private CSS styles */
h1 {
font-size: 1.2em;
margin-bottom: 0;
}
nav a {
padding: 5px 10px;
padding: 1rem;
text-decoration: none;
margin-top: 10px;
display: inline-block;
background-color: #eee;
background-color: #e8e8e8;
color: #3d3d3d;
border-radius: 4px;
}
nav a:visited, a:link {
color: #334953;
}
nav a:hover {
color: #039be5;
background-color: #cfd8dc;
color: white;
background-color: #42545C;
}
nav a.active {
color: #039be5;
background-color: black;
}

2
aio/content/examples/toh-pt5/src/app/app.component.html
View File

@ -1,6 +1,6 @@
<!-- #docplaster -->
<!-- #docregion, heroes, outlet -->
<h1>{{title}}</h1>
<h1 id="main-content-header">{{title}}</h1>
<!-- #enddocregion outlet -->
<nav>
<!-- #enddocregion heroes -->

10
aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.1.html
View File

@ -1,8 +1,6 @@
<h3>Top Heroes</h3>
<div class="grid grid-pad">
<a *ngFor="let hero of heroes" class="col-1-4">
<div class="module hero">
<h4>{{hero.name}}</h4>
</div>
<h2>Top Heroes</h2>
<div class="heroes-menu">
<a *ngFor="let hero of heroes">
{{hero.name}}
</a>
</div>

93
aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.css
View File

@ -1,61 +1,50 @@
/* DashboardComponent's private CSS styles */
[class*='col-'] {
float: left;
padding-right: 20px;
padding-bottom: 20px;
h2 {
text-align: center;
}
[class*='col-']:last-of-type {
padding-right: 0;
.heroes-menu {
padding: 0;
margin: auto;
max-width: 1000px;
/* flexbox */
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-content: flex-start;
align-items: flex-start;
}
a {
text-decoration: none;
}
*, *::after, *::before {
box-sizing: border-box;
}
h3 {
text-align: center;
margin-bottom: 0;
}
h4 {
position: relative;
}
.grid {
margin: 0;
}
.col-1-4 {
width: 25%;
}
.module {
padding: 20px;
text-align: center;
color: #eee;
max-height: 120px;
min-width: 120px;
background-color: #3f525c;
border-radius: 2px;
padding: 1rem;
font-size: 1.2rem;
text-decoration: none;
display: inline-block;
color: #fff;
text-align: center;
width: 100%;
min-width: 70px;
margin: .5rem auto;
box-sizing: border-box;
/* flexbox */
order: 0;
flex: 0 1 auto;
align-self: auto;
}
.module:hover {
background-color: #eee;
cursor: pointer;
color: #607d8b;
}
.grid-pad {
padding: 10px 0;
}
.grid-pad > [class*='col-']:last-of-type {
padding-right: 20px;
}
@media (max-width: 600px) {
.module {
font-size: 10px;
max-height: 75px; }
}
@media (max-width: 1024px) {
.grid {
margin: 0;
}
.module {
min-width: 60px;
@media (min-width: 600px) {
a {
width: 18%;
box-sizing: content-box;
}
}
a:hover {
background-color: #000;
}

10
aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.html
View File

@ -1,11 +1,9 @@
<h3>Top Heroes</h3>
<div class="grid grid-pad">
<h2>Top Heroes</h2>
<div class="heroes-menu">
<!-- #docregion click -->
<a *ngFor="let hero of heroes" class="col-1-4"
<a *ngFor="let hero of heroes"
routerLink="/detail/{{hero.id}}">
<div class="module hero">
<h4>{{hero.name}}</h4>
</div>
{{hero.name}}
</a>
<!-- #enddocregion click -->
</div>

14
aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.css
View File

@ -1,24 +1,18 @@
/* HeroDetailComponent's private CSS styles */
label {
display: inline-block;
width: 3em;
margin: .5em 0;
color: #607D8B;
color: #435960;
font-weight: bold;
}
input {
height: 2em;
font-size: 1em;
padding-left: .4em;
padding: .5rem;
}
button {
margin-top: 20px;
font-family: Arial, sans-serif;
background-color: #eee;
border: none;
padding: 5px 10px;
padding: 1rem;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
}
button:hover {
background-color: #cfd8dc;

5
aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.html
View File

@ -2,9 +2,8 @@
<h2>{{hero.name | uppercase}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div>
<label>name:
<input [(ngModel)]="hero.name" placeholder="name"/>
</label>
<label for="hero-name">Hero name: </label>
<input id="hero-name" [(ngModel)]="hero.name" placeholder="Hero name"/>
</div>
<!-- #docregion back-button -->
<button (click)="goBack()">go back</button>

23
aio/content/examples/toh-pt5/src/app/heroes/heroes.component.css
View File

@ -8,29 +8,32 @@
.heroes li {
position: relative;
cursor: pointer;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
.heroes li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
}
.heroes a {
color: #333;
text-decoration: none;
position: relative;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
display: block;
width: 250px;
width: 100%;
}
.heroes a:hover {
color:#607D8B;
color: #2c3a41;
background-color: #e6e6e6;
}
.heroes a:active {
background-color: #525252;
color: #fafafa;
}
.heroes .badge {

15
aio/content/examples/toh-pt5/src/app/messages/messages.component.css
View File

@ -1,20 +1,19 @@
/* MessagesComponent's private CSS styles */
h2 {
color: red;
color: #A80000;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
button.clear {
font-family: Arial, sans-serif;
.clear {
color: #333;
background-color: #eee;
margin-bottom: 12px;
border: none;
padding: 5px 10px;
padding: 1rem;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
}
button:hover {
background-color: #cfd8dc;
.clear:hover {
color: #fff;
background-color: #42545C;
}

2
aio/content/examples/toh-pt5/src/app/messages/messages.component.html
View File

@ -2,7 +2,7 @@
<h2>Messages</h2>
<button class="clear"
(click)="messageService.clear()">clear</button>
(click)="messageService.clear()">Clear messages</button>
<div *ngFor="let message of messageService.messages"> {{message}} </div>
</div>

2
aio/content/navigation.json
View File

@ -567,7 +567,7 @@
},
{
"url": "tutorial/toh-pt5",
"title": "5. Add In-app Navigation",
"title": "5. Add Navigation",
"tooltip": "Part 5: Add the Angular router and navigate among the views."
},
{

26
aio/content/tutorial/toh-pt5.md
View File

@ -1,4 +1,4 @@
# Add in-app navigation with routing
# Add navigation with routing
There are new requirements for the Tour of Heroes app:
@ -9,11 +9,11 @@ There are new requirements for the Tour of Heroes app:
<div class="alert is-helpful">
For the sample app that this page describes, see the <live-example></live-example>.
For the sample application that this page describes, see the <live-example></live-example>.
</div>
When you’re done, users will be able to navigate the app like this:
When you’re done, users will be able to navigate the application like this:
<div class="lightbox">
<img src='generated/images/guide/toh/nav-diagram.png' alt="View navigations">
@ -48,7 +48,7 @@ Replace it with the following:
<code-example path="toh-pt5/src/app/app-routing.module.1.ts" header="src/app/app-routing.module.ts (updated)">
</code-example>
First, the `app-routing.module.ts` file imports `RouterModule` and `Routes` so the app can have routing functionality. The next import, `HeroesComponent`, will give the Router somewhere to go once you configure the routes.
First, the `app-routing.module.ts` file imports `RouterModule` and `Routes` so the application can have routing functionality. The next import, `HeroesComponent`, will give the Router somewhere to go once you configure the routes.
Notice that the `CommonModule` references and `declarations` array are unnecessary, so are no
longer part of `AppRoutingModule`. The following sections explain the rest of the `AppRoutingModule` in more detail.
@ -105,7 +105,7 @@ Open the `AppComponent` template and replace the `<app-heroes>` element with a `
<code-example path="toh-pt5/src/app/app.component.html" region="outlet" header="src/app/app.component.html (router-outlet)">
</code-example>
The `AppComponent` template no longer needs `<app-heroes>` because the app will only display the `HeroesComponent` when the user navigates to it.
The `AppComponent` template no longer needs `<app-heroes>` because the application will only display the `HeroesComponent` when the user navigates to it.
The `<router-outlet>` tells the router where to display routed views.
@ -124,7 +124,7 @@ You should still be running with this CLI command.
ng serve
</code-example>
The browser should refresh and display the app title but not the list of heroes.
The browser should refresh and display the application title but not the list of heroes.
Look at the browser's address bar.
The URL ends in `/`.
@ -153,7 +153,7 @@ The `routerLink` is the selector for the [`RouterLink` directive](/api/router/Ro
that turns user clicks into router navigations.
It's another of the public directives in the `RouterModule`.
The browser refreshes and displays the app title and heroes link,
The browser refreshes and displays the application title and heroes link,
but not the heroes list.
Click the link.
@ -228,11 +228,11 @@ Add a route to the `routes` array that matches a path to the `DashboardComponent
### Add a default route
When the app starts, the browser's address bar points to the web site's root.
When the application starts, the browser's address bar points to the web site's root.
That doesn't match any existing route so the router doesn't navigate anywhere.
The space below the `<router-outlet>` is blank.
To make the app navigate to the dashboard automatically, add the following
To make the application navigate to the dashboard automatically, add the following
route to the `routes` array.
<code-example path="toh-pt5/src/app/app-routing.module.ts" header="src/app/app-routing.module.ts" region="redirect-route">
@ -274,7 +274,7 @@ and liberate it from the `HeroesComponent`.
### Delete _hero details_ from `HeroesComponent`
When the user clicks a hero item in the `HeroesComponent`,
the app should navigate to the `HeroDetailComponent`,
the application should navigate to the `HeroDetailComponent`,
replacing the heroes list view with the hero detail view.
The heroes list view should no longer show hero details as it does now.
@ -409,7 +409,7 @@ Route parameters are always strings.
The JavaScript (+) operator converts the string to a number,
which is what a hero `id` should be.
The browser refreshes and the app crashes with a compiler error.
The browser refreshes and the application crashes with a compiler error.
`HeroService` doesn't have a `getHero()` method.
Add it now.
@ -435,7 +435,7 @@ without having to change the `HeroDetailComponent` that calls it.
#### Try it
The browser refreshes and the app is working again.
The browser refreshes and the application is working again.
You can click a hero in the dashboard or in the heroes list and navigate to that hero's detail view.
If you paste `localhost:4200/detail/11` in the browser address bar,
@ -566,7 +566,7 @@ Here are the code files discussed on this page.
* You added the Angular router to navigate among different components.
* You turned the `AppComponent` into a navigation shell with `<a>` links and a `<router-outlet>`.
* You configured the router in an `AppRoutingModule`
* You defined simple routes, a redirect route, and a parameterized route.
* You defined routes, a redirect route, and a parameterized route.
* You used the `routerLink` directive in anchor elements.
* You refactored a tightly-coupled master/detail view into a routed detail view.
* You used router link parameters to navigate to the detail view of a user-selected hero.