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

feat(docs-infra): implement figure styles (#33259)

Browse Source 
PR#28396 originally addressed an update via issue #23983 to make images more visible with a white background (implementation of gray "lightbox").

This PR implements those styles defined in PR#28396.

PR Close #33259
This commit is contained in:
Stefanie Fluin
2019-10-18 16:22:06 -07:00
committed by Andrew Kushnir
parent 355e54a410
commit ba29e4d953
46 changed files with 666 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,8 +49,10 @@ 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>
<img src='generated/images/guide/toh/heroes-dashboard-1.png' alt="Output of heroes dashboard">
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/toh/heroes-dashboard-1.png' alt="Output of heroes dashboard">
</div>
</figure>
You can click the two links above the dashboard ("Dashboard" and "Heroes")
@ -59,8 +61,10 @@ 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>
<img src='generated/images/guide/toh/hero-details-1.png' alt="Details of hero in app">
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/toh/hero-details-1.png' alt="Details of hero in app">
</div>
</figure>
Clicking the "Back" button returns you to the Dashboard.
@ -68,8 +72,10 @@ 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>
<img src='generated/images/guide/toh/heroes-list-2.png' alt="Output of heroes list app">
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/toh/heroes-list-2.png' alt="Output of heroes list app">
</div>
</figure>
When you click a different hero name, the read-only mini detail beneath the list reflects the new choice.
@ -79,12 +85,16 @@ editable details of the selected hero.
The following diagram captures all of the navigation options.
<figure>
<img src='generated/images/guide/toh/nav-diagram.png' alt="View navigations">
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/toh/nav-diagram.png' alt="View navigations">
</div>
</figure>
Here's the app in action:
<figure>
<img src='generated/images/guide/toh/toh-anim.gif' alt="Tour of Heroes 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>

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

@ -196,10 +196,10 @@ 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>
<img src='generated/images/guide/toh/heroes-list-selected.png' alt="Selected hero">
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/toh/heroes-list-selected.png' alt="Selected hero">
</div>
</figure>
That _selected hero_ coloring is the work of the `.selected` CSS class in the [styles you added earlier](#styles).

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

@ -9,10 +9,10 @@ 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>
<img src='generated/images/guide/toh/nav-diagram.png' alt="View navigations">
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/toh/nav-diagram.png' alt="View navigations">
</div>
</figure>
## Add the `AppRoutingModule`

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

@ -513,8 +513,10 @@ 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>
<img src='generated/images/guide/toh/toh-hero-search.png' alt="Hero Search Component">
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/toh/toh-hero-search.png' alt="Hero Search Component">
</div>
</figure>
## Final code review