Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
sjtrimble wants to merge 2 commits into from
Closed

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
598f75a
feat(docs-infra): simplify image styles and remove figure references
sjtrimble Nov 11, 2019
7f39cf7
fixup! feat(docs-infra): simplify image styles and remove figure refe…
gkalpak Nov 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 6 additions & 10 deletions aio/content/guide/animations.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,11 +69,9 @@ Let's animate a simple transition that changes a single HTML element from one st

In HTML, these attributes are set using ordinary CSS styles such as color and opacity. In Angular, use the `style()` function to specify a set of CSS styles for use with animations. You can collect a set of styles in an animation state, and give the state a name, such as `open` or `closed`.

<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/animations/open-closed.png" alt="open and closed states">
</div>
</figure>
<div class="lightbox">
<img src="generated/images/guide/animations/open-closed.png" alt="open and closed states">
</div>

### Animation state and styles

Expand Down Expand Up @@ -168,11 +166,9 @@ The `trigger()` function describes the property name to watch for changes. When

In this example, we'll name the trigger `openClose`, and attach it to the `button` element. The trigger describes the open and closed states, and the timings for the two transitions.

<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/animations/triggering-the-animation.png" alt="triggering the animation">
</div>
</figure>
<div class="lightbox">
<img src="generated/images/guide/animations/triggering-the-animation.png" alt="triggering the animation">
</div>

<div class="alert is-helpful">

Expand Down
32 changes: 12 additions & 20 deletions aio/content/guide/architecture-components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,9 @@ You define a component's view with its companion template. A template is a form

Views are typically arranged hierarchically, allowing you to modify or show and hide entire UI sections or pages as a unit. The template immediately associated with a component defines that component's *host view*. The component can also define a *view hierarchy*, which contains *embedded views*, hosted by other components.

<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/architecture/component-tree.png" alt="Component tree" class="left">
</div>
</figure>
<div class="lightbox">
<img src="generated/images/guide/architecture/component-tree.png" alt="Component tree" class="left">
</div>

A view hierarchy can include views from components in the same NgModule, but it also can (and often does) include views from components that are defined in different NgModules.

Expand Down Expand Up @@ -83,11 +81,9 @@ Angular supports *two-way data binding*, a mechanism for coordinating the parts

The following diagram shows the four forms of data binding markup. Each form has a direction: to the DOM, from the DOM, or both.

<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/architecture/databinding.png" alt="Data Binding" class="left">
</div>
</figure>
<div class="lightbox">
<img src="generated/images/guide/architecture/databinding.png" alt="Data Binding" class="left">
</div>

This example from the `HeroListComponent` template uses three of these forms.

Expand All @@ -114,19 +110,15 @@ as with event binding.
Angular processes *all* data bindings once for each JavaScript event cycle,
from the root of the application component tree through all child components.

<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/architecture/component-databinding.png" alt="Data Binding" class="left">
</div>
</figure>
<div class="lightbox">
<img src="generated/images/guide/architecture/component-databinding.png" alt="Data Binding" class="left">
</div>

Data binding plays an important role in communication between a template and its component, and is also important for communication between parent and child components.

<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/architecture/parent-child-binding.png" alt="Parent/Child binding" class="left">
</div>
</figure>
<div class="lightbox">
<img src="generated/images/guide/architecture/parent-child-binding.png" alt="Parent/Child binding" class="left">
</div>

### Pipes

Expand Down
16 changes: 6 additions & 10 deletions aio/content/guide/architecture-modules.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,21 +35,17 @@ Here's a simple root NgModule definition.

NgModules provide a *compilation context* for their components. A root NgModule always has a root component that is created during bootstrap, but any NgModule can include any number of additional components, which can be loaded through the router or created through the template. The components that belong to an NgModule share a compilation context.

<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/architecture/compilation-context.png" alt="Component compilation context" class="left">
</div>
</figure>
<div class="lightbox">
<img src="generated/images/guide/architecture/compilation-context.png" alt="Component compilation context" class="left">
</div>

<br class="clear">

A component and its template together define a *view*. A component can contain a *view hierarchy*, which allows you to define arbitrarily complex areas of the screen that can be created, modified, and destroyed as a unit. A view hierarchy can mix views defined in components that belong to different NgModules. This is often the case, especially for UI libraries.

<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/architecture/view-hierarchy.png" alt="View hierarchy" class="left">
</div>
</figure>
<div class="lightbox">
<img src="generated/images/guide/architecture/view-hierarchy.png" alt="View hierarchy" class="left">
</div>

<br class="clear">

Expand Down
8 changes: 3 additions & 5 deletions aio/content/guide/architecture-services.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,11 +70,9 @@ When all requested services have been resolved and returned, Angular can call th

The process of `HeroService` injection looks something like this.

<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/architecture/injector-injects.png" alt="Service" class="left">
</div>
</figure>
<div class="lightbox">
<img src="generated/images/guide/architecture/injector-injects.png" alt="Service" class="left">
</div>

### Providing services

Expand Down
8 changes: 3 additions & 5 deletions aio/content/guide/architecture.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,11 +113,9 @@ To define navigation rules, you associate *navigation paths* with your component

You've learned the basics about the main building blocks of an Angular application. The following diagram shows how these basic pieces are related.

<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/architecture/overview2.png" alt="overview">
</div>
</figure>
<div class="lightbox">
<img src="generated/images/guide/architecture/overview2.png" alt="overview">
</div>

* Together, a component and template define an Angular view.
* A decorator on a component class adds the metadata, including a pointer to the associated template.
Expand Down
24 changes: 9 additions & 15 deletions aio/content/guide/attribute-directives.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,11 +175,9 @@ Here's the updated directive in full:
Run the app and confirm that the background color appears when
the mouse hovers over the `p` and disappears as it moves out.

<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/attribute-directives/highlight-directive-anim.gif" alt="Second Highlight">
</div>
</figure>
<div class="lightbox">
<img src="generated/images/guide/attribute-directives/highlight-directive-anim.gif" alt="Second Highlight">
</div>

{@a bindings}

Expand Down Expand Up @@ -273,11 +271,9 @@ Revise the `AppComponent.color` so that it has no initial value.

Here are the harness and directive in action.

<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/attribute-directives/highlight-directive-v2-anim.gif" alt="Highlight v.2">
</div>
</figure>
<div class="lightbox">
<img src="generated/images/guide/attribute-directives/highlight-directive-v2-anim.gif" alt="Highlight v.2">
</div>

{@a second-property}

Expand Down Expand Up @@ -311,11 +307,9 @@ because you made it _public_ with the `@Input` decorator.

Here's how the harness should work when you're done coding.

<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight">
</div>
</figure>
<div class="lightbox">
<img src="generated/images/guide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight">
</div>

## Summary

Expand Down
48 changes: 18 additions & 30 deletions aio/content/guide/component-interaction.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,9 @@ and each iteration's `hero` instance to the child's `hero` property.
The running application displays three heroes:


<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/component-interaction/parent-to-child.png" alt="Parent-to-child">
</div>
</figure>
<div class="lightbox">
<img src="generated/images/guide/component-interaction/parent-to-child.png" alt="Parent-to-child">
</div>



Expand Down Expand Up @@ -96,11 +94,9 @@ Here's the `NameParentComponent` demonstrating name variations including a name



<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/component-interaction/setter.png" alt="Parent-to-child-setter">
</div>
</figure>
<div class="lightbox">
<img src="generated/images/guide/component-interaction/setter.png" alt="Parent-to-child-setter">
</div>



Expand Down Expand Up @@ -156,11 +152,9 @@ The `VersionParentComponent` supplies the `minor` and `major` values and binds b
Here's the output of a button-pushing sequence:


<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/component-interaction/parent-to-child-on-changes.gif" alt="Parent-to-child-onchanges">
</div>
</figure>
<div class="lightbox">
<img src="generated/images/guide/component-interaction/parent-to-child-on-changes.gif" alt="Parent-to-child-onchanges">
</div>



Expand Down Expand Up @@ -212,11 +206,9 @@ The framework passes the event argument&mdash;represented by `$event`&mdash;to t
and the method processes it:


<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/component-interaction/child-to-parent.gif" alt="Child-to-parent">
</div>
</figure>
<div class="lightbox">
<img src="generated/images/guide/component-interaction/child-to-parent.gif" alt="Child-to-parent">
</div>



Expand Down Expand Up @@ -276,11 +268,9 @@ uses interpolation to display the child's `seconds` property.
Here we see the parent and child working together.


<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/component-interaction/countdown-timer-anim.gif" alt="countdown timer">
</div>
</figure>
<div class="lightbox">
<img src="generated/images/guide/component-interaction/countdown-timer-anim.gif" alt="countdown timer">
</div>



Expand Down Expand Up @@ -431,11 +421,9 @@ the parent `MissionControlComponent` and the `AstronautComponent` children,
facilitated by the service:


<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/component-interaction/bidirectional-service.gif" alt="bidirectional-service">
</div>
</figure>
<div class="lightbox">
<img src="generated/images/guide/component-interaction/bidirectional-service.gif" alt="bidirectional-service">
</div>



Expand Down
Loading