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

40
aio/content/start/data.md
View File

@ -105,14 +105,18 @@ When the "Buy" button is clicked, you'll use the cart service to add the current
1. To see the new "Buy" button, refresh the application and click on a product's name to display its details.
<figure>
<img src='generated/images/guide/start/product-details-buy.png' alt="Display details for selected product with a Buy button">
</figure>
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/start/product-details-buy.png' alt="Display details for selected product with a Buy button">
</div>
</figure>
1. Click the "Buy" button. The product is added to the stored list of items in the cart, and a message is displayed.
1. Click the "Buy" button. The product is added to the stored list of items in the cart, and a message is displayed.
<figure>
<img src='generated/images/guide/start/buy-alert.png' alt="Display details for selected product with a Buy button">
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/start/buy-alert.png' alt="Display details for selected product with a Buy button">
</div>
</figure>
@ -150,8 +154,10 @@ We'll create the cart page in two steps:
(Note: The "Checkout" button that we provided in the top-bar component was already configured with a `routerLink` for `/cart`.)
<figure>
<img src='generated/images/guide/start/cart-works.png' alt="Display cart page before customizing">
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/start/cart-works.png' alt="Display cart page before customizing">
</div>
</figure>
@ -204,8 +210,10 @@ Services can be used to share data across components:
1. Click "Checkout" to see the cart.
1. To add another product, click "My Store" to return to the product list. Repeat the steps above.
<figure>
<img src='generated/images/guide/start/cart-page-full.png' alt="Cart page with products added">
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/start/cart-page-full.png' alt="Cart page with products added">
</div>
</figure>
@ -363,14 +371,18 @@ Now that your app can retrieve shipping data, you'll create a shipping component
Click on the "Checkout" button to see the updated cart. (Remember that changing the app causes the preview to refresh, which empties the cart.)
<figure>
<img src='generated/images/guide/start/cart-empty-with-shipping-prices.png' alt="Cart with link to shipping prices">
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/start/cart-empty-with-shipping-prices.png' alt="Cart with link to shipping prices">
</div>
</figure>
Click on the link to navigate to the shipping prices.
<figure>
<img src='generated/images/guide/start/shipping-prices.png' alt="Display shipping prices">
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/start/shipping-prices.png' alt="Display shipping prices">
</div>
</figure>

6
aio/content/start/forms.md
View File

@ -73,8 +73,10 @@ Next, you'll add a checkout form at the bottom of the "Cart" page.
After putting a few items in the cart, users can now review their items, enter name and address, and submit their purchase:
<figure>
<img src='generated/images/guide/start/cart-with-items-and-form.png' alt="Cart page with checkout form">
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/start/cart-with-items-and-form.png' alt="Cart page with checkout form">
</div>
</figure>

45
aio/content/start/index.md
View File

@ -34,8 +34,10 @@ bar&mdash;containing the store name and
checkout icon&mdash;and the title for a product list.
<figure>
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/start/new-app.png" alt="Starter online store app">
</div>
</figure>
@ -96,8 +98,10 @@ file `product-list.component.html`.
The preview pane immediately updates to display the name of each product in the list.
<figure>
<img src="generated/images/guide/start/template-syntax-product-names.png" alt="Product names added to list">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/start/template-syntax-product-names.png" alt="Product names added to list">
</div>
</figure>
1. To make each product name a link to product details, add the `<a>` element and set its title to be the product's name by using the property binding `[ ]` syntax, as follows:
@ -112,8 +116,10 @@ file `product-list.component.html`.
property value as text; property binding `[ ]` lets you
use the property value in a template expression.
<figure>
<img src="generated/images/guide/start/template-syntax-product-anchor.png" alt="Product name anchor text is product name property">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/start/template-syntax-product-anchor.png" alt="Product name anchor text is product name property">
</div>
</figure>
@ -124,8 +130,10 @@ file `product-list.component.html`.
The app now displays the name and description of each product in the list. Notice that the final product does not have a description paragraph. Because the product's description property is empty, Angular doesn't create the `<p>` element&mdash;including the word "Description".
<figure>
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/start/template-syntax-product-description.png" alt="Product descriptions added to list">
</div>
</figure>
1. Add a button so users can share a product with friends. Bind the button's `click` event to the `share()` method (in `product-list.component.ts`). Event binding uses a set of parentheses, `( )`, around the event, as in the following `<button>` element:
@ -135,14 +143,18 @@ file `product-list.component.html`.
Each product now has a "Share" button:
<figure>
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/start/template-syntax-product-share-button.png" alt="Share button added for each product">
</div>
</figure>
Test the "Share" button:
<figure>
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/start/template-syntax-product-share-alert.png" alt="Alert box indicating product has been shared">
</div>
</figure>
The app now has a product list and sharing feature.
@ -198,8 +210,10 @@ An Angular application comprises a tree of components, in which each Angular com
Currently, the example app has three components:
<figure>
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/start/app-components.png" alt="Online store with three components">
</div>
</figure>
* `app-root` (orange box) is the application shell. This is the first component to load and the parent of all other components. You can think of it as the base page.
@ -228,8 +242,10 @@ The next step is to create a new alert feature that takes a product as an input.
1. Right click on the `app` folder and use the `Angular Generator` to generate a new component named `product-alerts`.
<figure>
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/start/generate-component.png" alt="StackBlitz command to generate component">
</div>
</figure>
The generator creates starter files for all three parts of the component:
@ -277,11 +293,12 @@ The next step is to create a new alert feature that takes a product as an input.
The new product alert component takes a product as input from the product list. With that input, it shows or hides the "Notify Me" button, based on the price of the product. The Phone XL price is over $700, so the "Notify Me" button appears on that product.
<figure>
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/start/product-alert-button.png" alt="Product alert button added to products over $700">
</div>
</figure>
<div class="alert is-helpful">
See [Component Interaction](guide/component-interaction "Components & Templates > Component Interaction") for more information about passing data from a parent to child component, intercepting and acting upon a value from the parent, and detecting and acting on changes to input property values.
@ -323,8 +340,10 @@ To make the "Notify Me" button work, you need to configure two things:
1. Try the "Notify Me" button:
<figure>
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/start/product-alert-notification.png" alt="Product alert notification confirmation dialog">
</div>
</figure>

12
aio/content/start/routing.md
View File

@ -54,8 +54,10 @@ The app is already set up to use the Angular router and to use routing to naviga
Notice that the URL in the preview window changes. The final segment is `products/1`.
<figure>
<img src="generated/images/guide/start/product-details-works.png" alt="Product details page with updated URL">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/start/product-details-works.png" alt="Product details page with updated URL">
</div>
</figure>
@ -108,8 +110,10 @@ The product details component handles the display of each product. The Angular R
Now, when the user clicks on a name in the product list, the router navigates you to the distinct URL for the product, swaps out the product list component for the product details component, and displays the product details.
<figure>
<img src="generated/images/guide/start/product-details-routed.png" alt="Product details page with updated URL and full details displayed">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/start/product-details-routed.png" alt="Product details page with updated URL and full details displayed">
</div>
</figure>