Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

update(docs, layout): fix breakpoints, documentation, and gettingStarted #6082

Closed
wants to merge 5 commits into from
Closed

update(docs, layout): fix breakpoints, documentation, and gettingStarted #6082

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
887927c
update(docs, layout): fix breakpoints, documentation, and gettingStarted
ThomasBurleson Dec 4, 2015
8f142c1
fix(layout): RTE with $log injection
ThomasBurleson Dec 4, 2015
fed8831
update(layout): remove validateAttributeUsage from non-observables
ThomasBurleson Dec 4, 2015
f8f735a
fix(demo): workarounds for layout=column issues
ThomasBurleson Dec 4, 2015
87b5408
update(docs): add imrpovemetns based on review feedback
ThomasBurleson Dec 4, 2015
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
9 changes: 9 additions & 0 deletions docs/app/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -874,3 +874,12 @@ table.attributes tr td:last-child {
table.md-api-table tr td:first-child {
font-weight: bold;
}


.layout_note {
font-size: 0.9em;
margin: -5px 40px 0px 20px;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Weird indentation

color: rgb(1, 57, 114);
background-color: rgba(156, 204, 101,0.4);
padding: 20px;
}
27 changes: 18 additions & 9 deletions docs/app/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ function(SERVICES, COMPONENTS, DEMOS, PAGES,
}
})
.when('/layout/', {
redirectTo: '/layout/container'
redirectTo: '/layout/introduction'
})
.when('/demo/', {
redirectTo: DEMOS[0].url
Expand Down Expand Up @@ -248,23 +248,32 @@ function(SERVICES, COMPONENTS, DEMOS, PAGES, $location, $rootScope, $http, $wind
name: 'Layout',
type: 'toggle',
pages: [{
name: 'Container Elements',
name: 'Introduction',
id: 'layoutIntro',
url: 'layout/introduction'
}
,{
name: 'Layout Containers',
id: 'layoutContainers',
url: 'layout/container'
},{
name: 'Layout System',
}
,{
name: 'Layout Children',
id: 'layoutGrid',
url: 'layout/grid'
},{
url: 'layout/children'
}
,{
name: 'Child Alignment',
id: 'layoutAlign',
url: 'layout/alignment'
},{
}
,{
name: 'Options',
id: 'layoutOptions',
url: 'layout/options'
},{
name: 'Tips & Tricks', // Possibly rename to Troubleshooting
}
,{
name: 'Troubleshooting',
id: 'layoutTips',
url: 'layout/tips'
}]
Expand Down
98 changes: 74 additions & 24 deletions docs/app/partials/getting-started.tmpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,84 @@
<div ng-controller="GuideCtrl" class="doc-content">
<md-content>
<p><em>New to Angular.js? Before getting into Angular Material, it might be helpful to
<a href="https://egghead.io/articles/new-to-angularjs-start-learning-here" target="_blank"
title="Link opens in a new window">read about the framework</a>.</em></p>
<p><em>New to Angular? Before getting into Angular Material, it might be helpful to:</em>
<ul>
<li>watch the videos about <a href="https://egghead.io/articles/new-to-angularjs-start-learning-here" target="_blank"
title="Link opens in a new window">Angular.js framework</a></li>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Possibly reword: "watch the videos about the Angular.js framework".

Also, why is the title for both of these "Link opens in a new window"? Shouldn't it be related to the link? (I realize this was not your change, just wondering if there is a reason this was done.)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agree with Topher.

  • Make the entire sentence a hyperlink
  • "Angular.js" > "Angular"
  • Update title to say what's behind the link

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My interpretation is that when the user hovers over the link, it will show this tip of "intended action".

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

...The title attribute is used to provide additional information to help clarify or further describe the purpose of a link. If the supplementary information provided through the title attribute is something the user should know before following the link, such as a warning, then it should be provided in the link text rather than in the title attribute.

http://www.w3.org/TR/WCAG20-TECHS/H33.html

<li>
read the
<a href="https://www.google.com/design/spec/material-design/introduction.html" target="_blank"
title="Link opens in a new window">Material Design </a> specifications for components, animations, styles, and layouts.
</li>
</ul>

<h2>How do I start?</h2>
<p></p>
<h2>How do I start with Angular Material?</h2>
<ul style="margin-bottom: 2em;">
<li><a href="http://codepen.io/collection/AxKKgY/" target="_blank"
title="Link opens in a new window">Fork a Codepen</a></li>
<li><a href="https://codepen.io/collection/AxKKgY/" target="_blank"
title="Link opens in a new window">Visit CodePen Community </a></li>

<li><a href="https://github.com/angular/material-start/tree/es5-tutorial" target="_blank"
title="Link opens in a new window">Learn using an 8-step Tutorial</a></li>
<li><a href="https://github.com/angular/material-start" target="_blank"
title="Link opens in a new window">Clone a Github Starter Project</a></li>
</ul>
title="Link opens in a new window">Use the Github Starter Project</a></li>

<h3>Including Angular Material and its dependencies</h3>
<ul style="margin-bottom: 2em;">
<li><a href="https://github.com/angular/material#bower">Using Bower</a></li>
<li><a href="https://github.com/angular/material#cdn">Using a CDN</a> (example below)</li>
<li style="font-weight: 400;color: #106CC8;">Use 'Edit on CodePen' button on any of our Demos<br/>
<img src="https://cloud.githubusercontent.com/assets/210413/11568997/ed86795a-99b4-11e5-898e-1da172be80da.png" style="width:75%;margin: 10px 30px 0 0">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LOVE this addition; hopefully it will help people when creating issues too...

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should be hosting this image, not githubusercontent. Should also run the image through pngcrush (I can do this from my workstation if that's easier).
The images also need alt text.

</li>

<li>Easily build a Material application from scratch (below)</li>
</ul>

<iframe height='412' scrolling='no'
src='//codepen.io/team/AngularMaterial/embed/JYvaxJ/?height=412&theme-id=20485&default-tab=result'
frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>
See the Pen <a href='http://codepen.io/team/AngularMaterial/pen/JYvaxJ/'>Angular Material Basic App</a>
by Angular Material (<a href='http://codepen.io/AngularMaterial'>@AngularMaterial</a>) on
<a href='http://codepen.io'>CodePen</a>.
<p></p>
<h3>Build a Material Application (blank shell)</h3>

See this example application on CodePen that loads
the Angular Material library from the Google CDN:

<p></p>

<iframe height='777' scrolling='no'
src='//codepen.io/team/AngularMaterial/embed/RrbXyW/?height=777&theme-id=21180&default-tab=html'
frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a
href='http://codepen.io/team/AngularMaterial/pen/RrbXyW/'>Angular Material - Blank Starter</a> by Angular
Material (<a href='http://codepen.io/AngularMaterial'>@AngularMaterial</a>) on <a
href='http://codepen.io'>CodePen</a>.
</iframe>
<br/>


<p>Now just you add your Angular Material components and other HTML content to your Blank starter app.</p>

<br/>

<hr>

<h3>Include Optional Dependencies</h3>
<h3>Our CodePen Community</h3>
<p>
Angular Material integrates with some additional libraries which you may optionally include:
You can also visit our <a href="http://codepen.io/team/AngularMaterial/" target="_blank"
title="Link opens in a new window">CodePen Community</a> to explore more samples and ideas.
</p>
<div layout-align="center" style="width: 100%">
<a href="http://codepen.io/team/AngularMaterial/" target="_blank"
title="Link opens in a new window" style="text-decoration:none; border: 0 none;">
<img src="https://cloud.githubusercontent.com/assets/210413/11569469/ada7de16-99b7-11e5-91b5-cf252a7d9122.png" style="text-decoration:none; border: 0 none;">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same for this image.

</a>
</div>


<br/><br/>

<hr>

<h3>Installing the Angular Material Libraries</h3>

<br/>
You can install the Angular Material library (and it's dependent library) in your local project using either
<a href="https://github.com/angular/bower-material/#installing-angular-material">NPM, JSPM, or Bower</a>.

<p>
Angular Material also integrates with some additional, optional libraries which you may elect to include:
</p>

<ul style="margin-bottom: 2em;">
<li>
<a href="https://docs.angularjs.org/api/ngMessages">ngMessages</a>
Expand All @@ -49,14 +95,18 @@ <h3>Include Optional Dependencies</h3>
</li>
</ul>

<br/>
<hr>

<h3>Unsupported Integrations</h3>
<p>
Angular Material v1.0 has a few known integration issues with the following libraries:
Angular Material v1.0 has a few known integration issues
with the following libraries:
</p>
<ul style="margin-bottom: 2em;">
<li>
<a href="https://docs.angularjs.org/api/ngTouch">ngTouchs</a>
- This module interferes with ngMaterial's click, tap, and swipe support for touch-enabled devices.
<a href="https://docs.angularjs.org/api/ngTouch">ngTouch</a>
- This Angular.js Touch module interferes with ngMaterial's click, tap, and swipe support for touch-enabled devices.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we should add ngUpgrade

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need to talk about ngUpgrade just yet.

</li>

<li>
Expand Down
91 changes: 58 additions & 33 deletions docs/app/partials/layout-alignment.tmpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,75 @@
<div ng-controller="LayoutCtrl" class="layout-content" ng-cloak>

<p>
The <code>layout-align</code> attribute takes two words.
The first word says how the children will be aligned in the layout's direction, and the second word says how the children will be aligned perpendicular to the layout's direction.</p>
The <code>layout-align</code> directive takes two words.
The first word says how the children will be aligned in the lay3ut's direction, and the second word says how the children will be aligned perpendicular to the layout's direction.</p>

<p>Only one word is required for the attribute. For example, <code>layout="row" layout-align="center"</code> would make the elements center horizontally and use the default behavior vertically.</p>
<p>Only one value is required for this directive.
For example, <code>layout="row" layout-align="center"</code> would make the elements
center horizontally and use the default behavior vertically.</p>

<p><code>layout="column" layout-align="center end"</code> would make
children align along the center vertically and along the end (right) horizontally. </p>


<table class="md-api-table">
<thead>
<tr>
<th>API</th>
<th>Sets child alignments within the layout container</th>
</tr>
</thead>
<tr>
<td>layout-align</td>
<td>Sets default alignment unless overridden by another breakpoint.</td>
</tr>
<tr>
<td>layout-align</td>
<td>Sets child alignment.</td>
</tr>
<tr>
<td>layout-align-sm</td>
<td>Sets child alignment on devices less than 600px wide.</td>
</tr>
<tr>
<td>layout-align-gt-sm</td>
<td>Sets child alignment on devices greater than 600px wide.</td>
</tr>
<tr>
<td>layout-align-md</td>
<td>Sets child alignment on devices between 600px and 960px wide.</td>
</tr>
<tr>
<td>layout-align-gt-md</td>
<td>Sets child alignment on devices greater than 960px wide.
</tr>
<tr>
<td>layout-align-lg</td>
<td>Sets child alignment on devices between 960px and 1200px wide.</td>
</tr>
<tr>
<td>layout-align-gt-lg</td>
<td>Sets child alignment on devices greater than 1200px wide.</td>
</tr>
</table>
<td>layout-align-xs</td>
<td>width &lt; <b>600</b>px</td>
</tr>
<tr>
<td>layout-align-gt-xs</td>
<td>width &gt;= <b>600</b>px</td>
</tr>
<tr>
<td>layout-align-sm</td>
<td><b>600</b>px &lt;= width &lt; <b>960</b>px</td>
</tr>
<tr>
<td>layout-align-gt-sm</td>
<td>width &gt;= <b>960</b>px</td>
</tr>
<tr>
<td>layout-align-md</td>
<td><b>960</b>px &lt;= width &lt; <b>1280</b>px</td>
</tr>
<tr>
<td>layout-align-gt-md</td>
<td>width &gt;= <b>1280</b>px</td>
</tr>
<tr>
<td>layout-align-lg</td>
<td><b>1280</b>px &lt;= width &lt; <b>1920</b>px</td>
</tr>
<tr>
<td>layout-align-gt-lg</td>
<td>width &gt;= <b>1920/b>px</td>
</tr>
<tr>
<td>layout-align-xl</td>
<td>width &gt;= <b>1920</b>px</td>
</tr>
</table>

<br/>

<p>
See below for more examples:
Below is an interactive demo that lets you explore the visual results of the different settings:
</p>

<section class="layout-panel-parent">
<div ng-panel="layoutDemo">
<docs-demo demo-title='layout="{{layoutDemo.direction}}" layout-align="{{layoutAlign()}}"'
<docs-demo demo-title='layout="{{layoutDemo.direction}}" &nbsp; &nbsp; &nbsp; layout-align="{{layoutAlign()}}"'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

&nbsp; &nbsp; &nbsp; is this really necessary ?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not "necessary" per-se, but since this is the demo's title, it does help separate the the attributes a little bit and make them easier to read.

screen shot 2015-12-04 at 11 42 54 am

I'd vote to keep it this way.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To separate them visually so users will see that title area shows the updated attribute values (when changed).

class="small-demo colorNested" interpolate-code="true">
<demo-file name="index.html">
<div layout="{{layoutDemo.direction}}" layout-align="{{layoutAlign()}}">
Expand Down
Loading