Skip to content

Commit

Permalink
update(docs, layout): fix breakpoints, documentation, and gettingStarted
Browse files Browse the repository at this point in the history 
* update component custom mediaQueries to be consistent with ranges defined for Layout mediaQueries
* update `hide` API for mediaQueries
* fix hide SCSS and component mediaQuery(s)
* fix mixins for gt-lg and xl
* fix flex-order with negative ordering; support -20 to 20
* fix RTE with $log injection
  *  update(layout): Currently `validateAttributeUsage( )` is only used for the `flex` API, so remove its use from the non-observable APIs.
* fix menu demos with workarounds for layout=column issues
  * wrapper div for `<p>` tags
  * min-height for `<div class="menus">`

Fixes angular#5646. Fixes angular#6056. Fixes angular#5576. Fixes angular#6057. Fixes angular#5962. Closes angular#6082,
  • Loading branch information
@ThomasBurleson
ThomasBurleson committed Dec 4, 2015
1 parent 1771b29 commit f6e97a0
Show file tree
Hide file tree
Showing 24 changed files with 1,137 additions and 490 deletions.
9 changes: 9 additions & 0 deletions docs/app/css/style.css
View file
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;
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
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
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>
<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">
</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;">
</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.
</li>

<li>
Expand Down
91 changes: 58 additions & 33 deletions docs/app/partials/layout-alignment.tmpl.html
View file
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()}}"'
class="small-demo colorNested" interpolate-code="true">
<demo-file name="index.html">
<div layout="{{layoutDemo.direction}}" layout-align="{{layoutAlign()}}">
Expand Down
Loading

0 comments on commit f6e97a0

Please sign in to comment.