cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(docs-infra): simplify image styles and remove figure references (#33748)

Browse Source 
Reference #33259
Removes figures elements as AIO is not typically using captions or image groups where figures would be necessary or appropriate

PR Close #33748
This commit is contained in:
Stefanie Fluin
2019-11-11 14:47:51 -08:00
committed by Alex Rickabaugh
parent 72b9276ec9
commit fe4447d568
47 changed files with 521 additions and 870 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
aio/content/tutorial/index.md
View File

@ -49,11 +49,9 @@ After completing all tutorial steps, the final app will look like this: <live-ex
Here's a visual idea of where this tutorial leads, beginning with the "Dashboard"
view and the most heroic heroes:
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/toh/heroes-dashboard-1.png' alt="Output of heroes dashboard">
</div>
</figure>
<div class="lightbox">
<img src='generated/images/guide/toh/heroes-dashboard-1.png' alt="Output of heroes dashboard">
</div>
You can click the two links above the dashboard ("Dashboard" and "Heroes")
to navigate between this Dashboard view and a Heroes view.
@ -61,22 +59,18 @@ to navigate between this Dashboard view and a Heroes view.
If you click the dashboard hero "Magneta," the router opens a "Hero Details" view
where you can change the hero's name.
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/toh/hero-details-1.png' alt="Details of hero in app">
</div>
</figure>
<div class="lightbox">
<img src='generated/images/guide/toh/hero-details-1.png' alt="Details of hero in app">
</div>
Clicking the "Back" button returns you to the Dashboard.
Links at the top take you to either of the main views.
If you click "Heroes," the app displays the "Heroes" master list view.
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/toh/heroes-list-2.png' alt="Output of heroes list app">
</div>
</figure>
<div class="lightbox">
<img src='generated/images/guide/toh/heroes-list-2.png' alt="Output of heroes list app">
</div>
When you click a different hero name, the read-only mini detail beneath the list reflects the new choice.
@ -85,16 +79,12 @@ editable details of the selected hero.
The following diagram captures all of the navigation options.
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/toh/nav-diagram.png' alt="View navigations">
</div>
</figure>
<div class="lightbox">
<img src='generated/images/guide/toh/nav-diagram.png' alt="View navigations">
</div>
Here's the app in action:
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/toh/toh-anim.gif' alt="Tour of Heroes in Action">
</div>
</figure>
<div class="lightbox">
<img src='generated/images/guide/toh/toh-anim.gif' alt="Tour of Heroes in Action">
</div>

8
aio/content/tutorial/toh-pt2.md
View File

@ -196,11 +196,9 @@ It's difficult to identify the _selected hero_ in the list when all `<li>` eleme
If the user clicks "Magneta", that hero should render with a distinctive but subtle background color like this:
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/toh/heroes-list-selected.png' alt="Selected hero">
</div>
</figure>
<div class="lightbox">
<img src='generated/images/guide/toh/heroes-list-selected.png' alt="Selected hero">
</div>
That _selected hero_ coloring is the work of the `.selected` CSS class in the [styles you added earlier](#styles).
You just have to apply the `.selected` class to the `<li>` when the user clicks it.

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

@ -9,11 +9,9 @@ There are new requirements for the Tour of Heroes app:
When you’re done, users will be able to navigate the app like this:
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/toh/nav-diagram.png' alt="View navigations">
</div>
</figure>
<div class="lightbox">
<img src='generated/images/guide/toh/nav-diagram.png' alt="View navigations">
</div>
## Add the `AppRoutingModule`

8
aio/content/tutorial/toh-pt6.md
View File

@ -513,11 +513,9 @@ That's the job of the [`AsyncPipe`](#asyncpipe) in the template.
Run the app again. In the *Dashboard*, enter some text in the search box.
If you enter characters that match any existing hero names, you'll see something like this.
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/toh/toh-hero-search.png' alt="Hero Search Component">
</div>
</figure>
<div class="lightbox">
<img src='generated/images/guide/toh/toh-hero-search.png' alt="Hero Search Component">
</div>
## Final code review