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

docs: updates to landing page and getting started #11890

Merged
Splaktar merged 1 commit into from
Apr 22, 2020
Merged

docs: updates to landing page and getting started #11890

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
44 changes: 30 additions & 14 deletions .github/ISSUE_TEMPLATE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,61 @@
<!--
Filling out this template is required! Do not delete it when submitting your issue! Without this information, your issue may be auto-closed.
Filling out this template is required! Do not delete it when submitting your issue!
Without this information, your issue may be auto-closed.

Please submit AngularJS Material questions to the [AngularJS Material Forum](https://groups.google.com/forum/#!forum/ngmaterial) instead of submitting an issue.
Please submit AngularJS Material questions to the
[AngularJS Material Forum](https://groups.google.com/forum/#!forum/ngmaterial)
instead of submitting an issue.

---------------------------------------------------------------------
This repo is for AngularJS Material, not Angular Material or the CDK.
---------------------------------------------------------------------

Please submit Angular Material and CDK questions [here](https://groups.google.com/forum/#!forum/angular-material2) and issues [here](https://github.com/angular/components/issues).
Please submit Angular Material and CDK questions
[here](https://groups.google.com/forum/#!forum/angular-material2)
and issues [here](https://github.com/angular/components/issues).
-->
## Bug, enhancement request, or proposal:
## Bug, enhancement request, or proposal

<!-- Please note that we are not accepting major feature requests, i.e. requests for new components, at this time. -->

# CodePen and steps to reproduce the issue:
#### [CodePen Demo](http://codepen.io/team/AngularMaterial/pen/bEGJdd) which demonstrates the issue:
# Demo and steps to reproduce the issue
[This blank StackBlitz demo](https://stackblitz.com/edit/angularjs-material-blank?file=app%2Fapp.template.html) can be used to create a reproduction that demonstrates your issue.

**Demo URL (required)***:

#### Detailed Reproduction Steps:
#### Detailed Reproduction Steps
1.
1.

### What is the expected behavior?
### Explain the expected behavior


### What is the current behavior?
### Explain the current behavior


### What is the use-case or motivation for changing an existing behavior?
### Discuss the use-case or motivation for changing the existing behavior


### Which versions of AngularJS, Material, OS, and browsers are affected?
### List the affected versions of AngularJS, Material, OS, and browsers
<!-- Please note that only issues related to AngularJS 1.x and AngularJS Material 1.x should be submitted here.
Please submit Angular Material and CDK questions [here](https://groups.google.com/forum/#!forum/angular-material2) and issues [here](https://github.com/angular/components/issues).
Please submit Angular Material and CDK questions [here](https://groups.google.com/forum/#!forum/angular-material2)
and issues [here](https://github.com/angular/components/issues).
-->
- AngularJS: 1.
- AngularJS Material: 1.
- OS:
- Browsers:

### Is there anything else we should know? Stack Traces, Screenshots, etc.
### Add anything else we should know

#### Stack Trace
```

<!-- Please double check that you have provided the required reproduction steps and a Demo via CodePen, Plunker, or GitHub repo. -->
```

#### Screenshots


<!-- Please double check that you have provided the required reproduction steps
and a Demo via StackBlitz, CodePen, Plunker, or GitHub repo.
-->
20 changes: 10 additions & 10 deletions docs/app/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -603,20 +603,20 @@ md-toolbar.demo-toolbar .md-button {
/***************
* Landing Page
***************/
ul.buckets {
main .doc-content ul.buckets {
margin: 24px 0 24px -8px;
padding: 0;
position: relative;
}
ul.buckets li {
main .doc-content ul.buckets li {
list-style: none;
margin: 0;
text-align: center;
}
ul.buckets li md-card md-card-content {
main .doc-content ul.buckets li md-card md-card-content {
padding: 0;
}
ul.buckets li a {
main .doc-content ul.buckets li a {
display: block;
font-weight: 500;
padding: 16px 0;
Expand All @@ -626,15 +626,15 @@ ul.buckets li a {
margin-right: 0;
margin-top: 0;
}
ul.buckets li a,
ul.buckets li a md-icon {
main .doc-content ul.buckets li a,
main .doc-content ul.buckets li a md-icon {
color: #666 !important;
transition: all 0.15s cubic-bezier(0.35, 0, 0.25, 1);
}
ul.buckets li a:hover,
ul.buckets li a:focus,
ul.buckets li a:hover md-icon,
ul.buckets li a:focus md-icon {
main .doc-content ul.buckets li a:hover,
main .doc-content ul.buckets li a:focus,
main .doc-content ul.buckets li a:hover md-icon,
main .doc-content ul.buckets li a:focus md-icon {
color: #106CC8 !important;
background-color: #ebebeb !important;
}
Expand Down
102 changes: 34 additions & 68 deletions docs/app/partials/getting-started.tmpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,71 +21,38 @@ <h2><em>New to AngularJS?</em> Before getting into AngularJS Material, it might
<h2>How do I start with AngularJS Material?</h2>
<ul style="margin-bottom: 2em;">
<li>
Get jump started with a free course: <a
Get jump started with a free 30 minute video course: <a
href="https://egghead.io/courses/introduction-to-angular-material" target="_blank"
title="AngularJS Framework">Introduction to AngularJS Material</a>
</li>
<li>
Visit the <a href="https://codepen.io/team/AngularMaterial/" target="_blank"
title="CodePen Material Community">CodePen Community for AngularJS Material</a>
<a href="https://stackblitz.com/edit/angularjs-material-blank?file=app%2Fapp.template.html"
target="_blank" title="Blank AngularJS Material StackBlitz Demo">
Start with a blank application on StackBlitz</a>
</li>
<li>
<a href="https://codepen.io/team/AngularMaterial/pen/RrbXyW" target="_blank">Start with a
blank CodePen Material Application</a>
Test drive AngularJS Material examples on
<a href="https://codepen.io/team/AngularMaterial/"
target="_blank" title="AngularJS Material CodePen Examples">
CodePen</a>
</li>
<li>
<a href="https://github.com/angular/material-start/tree/es6-tutorial" target="_blank"
title="Material-Start Tutorial">Learn with Material-Start: 10-step Tutorial (es6)</a>
</li>
<li>
<a href="https://github.com/angular/material-start/tree/es6" target="_blank"
title="Material Start - ES6">Learn with Material-Start: Completed (es6)</a>
</li>
<li>
<a href="https://github.com/angular/material-start/tree/typescript" target="_blank"
title="Material Start - Typescript">Learn with Material-Start: Completed (Typescript)</a>
</li>
<li>
<a href="https://github.com/angular/material-start/tree/master" target="_blank"
title="Material-Start - ES5">Learn with Material-Start: Completed (es5)</a>
Checkout our
<a href="https://github.com/Splaktar/angularjs-angular-material-hybrid-demo" target="_blank"
title="AngularJS Material, Angular Material, TypeScript, Angular CLI repository">
AngularJS Material + Angular Material + TypeScript + Angular CLI</a> repository
</li>
<li style="margin-bottom: 30px;">
<a href="https://github.com/angular/material-start" target="_blank"
title="GitHub Starter Project">Use the Github Starter Project</a>
Checkout the <a href="https://github.com/angular/material-start/tree/typescript" target="_blank"
title="Material Start - Typescript and SystemJS">AngularJS Material TypeScript + SystemJS</a>
repository
</li>
<li>Use the "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" alt="Image with arrow to Edit on CodePen button">
style="width:75%; margin: 10px 30px 0 0" alt="Image with arrow to Edit on CodePen button">
</li>
</ul>

<h3>Build a Material Application (blank shell)</h3>

<p>
See this example application on CodePen that loads
the AngularJS Material library from the Google CDN:
</p>

<iframe height='777' scrolling='no' title="AngularJS Material - Blank Starter"
src='https://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='https://codepen.io/team/AngularMaterial/pen/RrbXyW/'>AngularJS Material - Blank
Starter</a> by AngularJS
Material (<a href='https://codepen.io/AngularMaterial'>@AngularMaterial</a>) on <a
href='https://codepen.io'>CodePen</a>.
</iframe>

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

<br/>

<hr>

<h3>Our CodePen Community</h3>
<p>
You can also visit our
Expand All @@ -103,7 +70,6 @@ <h3>Our CodePen Community</h3>


<br/><br/>
<hr>

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

Expand Down Expand Up @@ -139,7 +105,6 @@ <h3>Installing the AngularJS Material Libraries</h3>
</ul>

<br/>
<hr>

<h3>Unsupported Integrations</h3>
<p>
Expand All @@ -163,30 +128,31 @@ <h3>Unsupported Integrations</h3>
<h2>Contributing to AngularJS Material</h2>
<ul style="margin-bottom: 2em;">
<li>
Please read our <a href="https://github.com/angular/material#contributing">contributor
guidelines</a>.
Start by reading our <a href="https://github.com/angular/material#contributing">Contributor
Guidelines</a>.
</li>

<li>
To contribute, fork our GitHub <a href="https://github.com/angular/material">repository</a>.
</li>

<li>
For bug reports,
For bug reports, search our
<a href="https://github.com/angular/material/issues?q=is%3Aissue+is%3Aopen"
target="_blank">search the GitHub Issues</a> and/or
<a href="https://github.com/angular/material/issues/new"
target="_blank">create a New Issue</a>.
target="_blank" title="AngularJS Material GitHub Issues">GitHub Issues</a>
for existing issues that match your bug.
</li>

<li>For questions and troubleshooting,
<li style="margin-left: 40px">If none are found, please open a new issue.</li>
<li>For questions and troubleshooting, search the
<a href="https://groups.google.com/forum/#!forum/ngmaterial"
target="_blank">search the Forum</a> and/or
<a href="https://groups.google.com/forum/#!newtopic/ngmaterial">post a New Question</a>.
target="_blank" title="AngularJS Material Forums">AngularJS Material Forums</a>
for related discussions.
</li>
<li style="margin-left: 40px">If none are found, please post a new question.</li>
<li>StackOverflow's
<a href="https://stackoverflow.com/questions/tagged/angularjs-material" target="_blank"
title="AngularJS Material tag on StackOverflow">
[angularjs-material] tag</a> is another good resources for solving problems.
</li>

<li>
Join the <a href="https://gitter.im/angular/material" target="_blank">Gitter Chat</a>.
You can also ask questions in our
<a href="https://gitter.im/angular/material" target="_blank" title="Gitter Chat">
Gitter Chat</a>.
</li>
</ul>
</md-content>
Expand Down
45 changes: 8 additions & 37 deletions docs/app/partials/home.tmpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,39 +133,31 @@ <h3>The following table provides a more detailed view:</h3>
Safari
</td>
<td>
11.x<br>12.x
12.x<br>13.x
</td>
</tr>
<tr>
<td>
iOS
</td>
<td>
11.x<br>12.x
12.x<br>13.x
</td>
</tr>
<tr>
<td>
Firefox for Android<br/>UC<br/>QQ<br/>Baidu
Firefox for Android<br/>UC
</td>
<td>
latest version
</td>
</tr>
<tr>
<td>
Android Browser
</td>
<td>
4.4.3-4.4.4<br>latest version
</td>
</tr>
<tr>
<td>
Samsung Internet
</td>
<td>
4<br>6.2<br>7.2
10.x
</td>
</tr>
<tr>
Expand Down Expand Up @@ -202,14 +194,16 @@ <h2 class="md-headline">Training Videos:</h2>
</li>
</ul>


<br/>
<h2 class="md-headline">Conference Presentations:</h2>
<p>
Here are some conference presentations that will provide overviews for your development with AngularJS Material.
Here are some conference presentations that will provide overviews for your development with
AngularJS Material.
</p>
<ul class="buckets" layout layout-align="center center" layout-wrap>
<li flex="100" flex-gt-xs="50" ng-repeat="(index, link) in [
{ href: 'https://www.youtube.com/watch?v=rRiV_b3WsoY', icon: 'ondemand_video', text: 'AngularJS Material v1.1.0 Updates', site : 'ng-conf', date: '2016'},
{ href: 'https://www.youtube.com/watch?v=6PMe_wc0SjI', icon: 'ondemand_video', text: 'Adaptive UI with AngularJS Material', site : 'DevFest NC', date: '2015'},
{ href: 'https://www.youtube.com/watch?v=Qi31oO5u33U', icon: 'ondemand_video', text: 'Building with AngularJS Material', site : 'ng-conf', date: '2015'},
{ href: 'https://www.youtube.com/watch?v=363o4i0rdvU', icon: 'ondemand_video', text: 'AngularJS Material in Practice', site : 'AngularConnect', date:'2015'}
]">
Expand All @@ -224,29 +218,6 @@ <h2 class="md-headline">Conference Presentations:</h2>
</li>
</ul>


<br/>
<h2 class="md-headline">Google's Material Design</h2>
<p>
Material Design is a specification for a unified system of visual, motion, and interaction
design that adapts across different devices and different screen sizes.
</p>
<ul class="buckets" layout layout-align="center center" layout-wrap>
<li flex="100" flex-gt-xs="50" ng-repeat="(index, link) in [
{ href: 'https://www.youtube.com/watch?v=Q8TXgCzxEnw', icon: 'ondemand_video', text: 'Watch a video', site : 'Google' },
{ href: 'https://material.io/archive/guidelines/', icon: 'launch', text: 'Learn More', site : 'Google' }
]">
<md-button
class="md-primary md-raised"
target="_blank"
aria-label="{{link.text}}"
ng-href="{{link.href}}">
<md-icon class="block" md-svg-src="img/icons/ic_{{link.icon}}_24px.svg"></md-icon>
{{link.site}} | <span class="training_link"> {{link.text}} </span>
</md-button>
</li>
</ul>

<br/>
<p class="md-caption" style="text-align: center; margin-bottom: 0;">
These docs were generated from
Expand Down
6 changes: 2 additions & 4 deletions docs/app/partials/layout-tips.tmpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,15 +88,13 @@ <h3>Layout Column</h3>
as expected due to CSS specificity rules.
</p>

<div class="md-whiteframe-3dp">

<div class="md-whiteframe-3dp" style="height: 700px">
<iframe height='700' scrolling='no'
src='//codepen.io/team/AngularMaterial/embed/obgapg/?height=700&theme-id=21180&default-tab=result'
frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a
href='http://codepen.io/team/AngularMaterial/pen/obgapg/'>Card Layouts (corrected)</a> by AngularJS Material (<a
href='http://codepen.io/AngularMaterial'>@AngularMaterial</a>) on <a href='http://codepen.io'>CodePen</a>.
</iframe>

</div>

<p>
Expand Down Expand Up @@ -209,7 +207,7 @@ <h3>Flex Element Heights</h3>
it will prevent the content from scrolling correctly, instead scrolling the entire body.
</p>

<div class="md-whiteframe-3dp">
<div class="md-whiteframe-3dp" style="height: 376px">
<iframe height='376' scrolling='no'
src='//codepen.io/team/AngularMaterial/embed/NxKBwW/?height=376&theme-id=0&default-tab=result'
frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>
Expand Down