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

Commit d1a9976

Browse files
SplaktarSplaktar
committed
docs: updates to landing page and getting started
- fix ul/li styles for "buckets" used for lists of links or videos - add Blank StackBlitz Demo starter - update issue template to use new StackBlitz blank demo and reduce passive voice - remove out of date CodePen starter that can't be updated anymore - since we stopped paying for the Pro license - remove links to unmaintained and out of date versions of material-start (es5, es6 + JSPM) - add AngularJS Material ngUpgrade example with the Angular CLI - remove unnecessary section with redundant links to Material Design - add a couple more conference video links - add link to StackOverflow `angularjs-material` tag - update list of supported browsers - fix CodePen embeds on layout troubleshooting page - having extra space at the whiteframe bottom
1 parent b9d8322 commit d1a9976

File tree

5 files changed

+84
-133
lines changed

5 files changed

+84
-133
lines changed

‎.github/ISSUE_TEMPLATE.md‎

Lines changed: 30 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,61 @@
11
<!--
2-
Filling out this template is required! Do not delete it when submitting your issue! Without this information, your issue may be auto-closed.
2+
Filling out this template is required! Do not delete it when submitting your issue!
3+
Without this information, your issue may be auto-closed.
34
4-
Please submit AngularJS Material questions to the [AngularJS Material Forum](https://groups.google.com/forum/#!forum/ngmaterial) instead of submitting an issue.
5+
Please submit AngularJS Material questions to the
6+
[AngularJS Material Forum](https://groups.google.com/forum/#!forum/ngmaterial)
7+
instead of submitting an issue.
58
69
---------------------------------------------------------------------
710
This repo is for AngularJS Material, not Angular Material or the CDK.
811
---------------------------------------------------------------------
912
10-
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).
13+
Please submit Angular Material and CDK questions
14+
[here](https://groups.google.com/forum/#!forum/angular-material2)
15+
and issues [here](https://github.com/angular/components/issues).
1116
-->
12-
## Bug, enhancement request, or proposal:
17+
## Bug, enhancement request, or proposal
1318

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

16-
# CodePen and steps to reproduce the issue:
17-
#### [CodePen Demo](http://codepen.io/team/AngularMaterial/pen/bEGJdd) which demonstrates the issue:
21+
# Demo and steps to reproduce the issue
22+
[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.
1823

24+
**Demo URL (required)***:
1925

20-
#### Detailed Reproduction Steps:
26+
#### Detailed Reproduction Steps
2127
1.
2228
1.
2329

24-
### What is the expected behavior?
30+
### Explain the expected behavior
2531

2632

27-
### What is the current behavior?
33+
### Explain the current behavior
2834

2935

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

3238

33-
### Which versions of AngularJS, Material, OS, and browsers are affected?
39+
### List the affected versions of AngularJS, Material, OS, and browsers
3440
<!-- Please note that only issues related to AngularJS 1.x and AngularJS Material 1.x should be submitted here.
35-
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).
41+
Please submit Angular Material and CDK questions [here](https://groups.google.com/forum/#!forum/angular-material2)
42+
and issues [here](https://github.com/angular/components/issues).
3643
-->
3744
- AngularJS: 1.
3845
- AngularJS Material: 1.
3946
- OS:
4047
- Browsers:
4148

42-
### Is there anything else we should know? Stack Traces, Screenshots, etc.
49+
### Add anything else we should know
4350

51+
#### Stack Trace
52+
```
4453
45-
<!-- Please double check that you have provided the required reproduction steps and a Demo via CodePen, Plunker, or GitHub repo. -->
54+
```
55+
56+
#### Screenshots
57+
58+
59+
<!-- Please double check that you have provided the required reproduction steps
60+
and a Demo via StackBlitz, CodePen, Plunker, or GitHub repo.
61+
-->

‎docs/app/css/style.css‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -603,20 +603,20 @@ md-toolbar.demo-toolbar .md-button {
603603
/***************
604604
* Landing Page
605605
***************/
606-
ul.buckets {
606+
main .doc-content ul.buckets {
607607
margin: 24px 0 24px -8px;
608608
padding: 0;
609609
position: relative;
610610
}
611-
ul.buckets li {
611+
main .doc-content ul.buckets li {
612612
list-style: none;
613613
margin: 0;
614614
text-align: center;
615615
}
616-
ul.buckets li md-card md-card-content {
616+
main .doc-content ul.buckets li md-card md-card-content {
617617
padding: 0;
618618
}
619-
ul.buckets li a {
619+
main .doc-content ul.buckets li a {
620620
display: block;
621621
font-weight: 500;
622622
padding: 16px 0;
@@ -626,15 +626,15 @@ ul.buckets li a {
626626
margin-right: 0;
627627
margin-top: 0;
628628
}
629-
ul.buckets li a,
630-
ul.buckets li a md-icon {
629+
main .doc-content ul.buckets li a,
630+
main .doc-content ul.buckets li a md-icon {
631631
color: #666 !important;
632632
transition: all 0.15s cubic-bezier(0.35, 0, 0.25, 1);
633633
}
634-
ul.buckets li a:hover,
635-
ul.buckets li a:focus,
636-
ul.buckets li a:hover md-icon,
637-
ul.buckets li a:focus md-icon {
634+
main .doc-content ul.buckets li a:hover,
635+
main .doc-content ul.buckets li a:focus,
636+
main .doc-content ul.buckets li a:hover md-icon,
637+
main .doc-content ul.buckets li a:focus md-icon {
638638
color: #106CC8 !important;
639639
background-color: #ebebeb !important;
640640
}

‎docs/app/partials/getting-started.tmpl.html‎

Lines changed: 34 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -21,71 +21,38 @@ <h2><em>New to AngularJS?</em> Before getting into AngularJS Material, it might
2121
<h2>How do I start with AngularJS Material?</h2>
2222
<ul style="margin-bottom: 2em;">
2323
<li>
24-
Get jump started with a free course: <a
24+
Get jump started with a free 30 minute video course: <a
2525
href="https://egghead.io/courses/introduction-to-angular-material" target="_blank"
2626
title="AngularJS Framework">Introduction to AngularJS Material</a>
2727
</li>
2828
<li>
29-
Visit the <a href="https://codepen.io/team/AngularMaterial/" target="_blank"
30-
title="CodePen Material Community">CodePen Community for AngularJS Material</a>
29+
<a href="https://stackblitz.com/edit/angularjs-material-blank?file=app%2Fapp.template.html"
30+
target="_blank" title="Blank AngularJS Material StackBlitz Demo">
31+
Start with a blank application on StackBlitz</a>
3132
</li>
3233
<li>
33-
<a href="https://codepen.io/team/AngularMaterial/pen/RrbXyW" target="_blank">Start with a
34-
blank CodePen Material Application</a>
34+
Test drive AngularJS Material examples on
35+
<a href="https://codepen.io/team/AngularMaterial/"
36+
target="_blank" title="AngularJS Material CodePen Examples">
37+
CodePen</a>
3538
</li>
3639
<li>
37-
<a href="https://github.com/angular/material-start/tree/es6-tutorial" target="_blank"
38-
title="Material-Start Tutorial">Learn with Material-Start: 10-step Tutorial (es6)</a>
39-
</li>
40-
<li>
41-
<a href="https://github.com/angular/material-start/tree/es6" target="_blank"
42-
title="Material Start - ES6">Learn with Material-Start: Completed (es6)</a>
43-
</li>
44-
<li>
45-
<a href="https://github.com/angular/material-start/tree/typescript" target="_blank"
46-
title="Material Start - Typescript">Learn with Material-Start: Completed (Typescript)</a>
47-
</li>
48-
<li>
49-
<a href="https://github.com/angular/material-start/tree/master" target="_blank"
50-
title="Material-Start - ES5">Learn with Material-Start: Completed (es5)</a>
40+
Checkout our
41+
<a href="https://github.com/Splaktar/angularjs-angular-material-hybrid-demo" target="_blank"
42+
title="AngularJS Material, Angular Material, TypeScript, Angular CLI repository">
43+
AngularJS Material + Angular Material + TypeScript + Angular CLI</a> repository
5144
</li>
5245
<li style="margin-bottom: 30px;">
53-
<a href="https://github.com/angular/material-start" target="_blank"
54-
title="GitHub Starter Project">Use the Github Starter Project</a>
46+
Checkout the <a href="https://github.com/angular/material-start/tree/typescript" target="_blank"
47+
title="Material Start - Typescript and SystemJS">AngularJS Material TypeScript + SystemJS</a>
48+
repository
5549
</li>
5650
<li>Use the "Edit on CodePen" button on any of our Demos<br/>
5751
<img
5852
src="https://cloud.githubusercontent.com/assets/210413/11568997/ed86795a-99b4-11e5-898e-1da172be80da.png"
59-
style="width:75%;margin: 10px 30px 0 0" alt="Image with arrow to Edit on CodePen button">
53+
style="width:75%; margin: 10px 30px 0 0" alt="Image with arrow to Edit on CodePen button">
6054
</li>
6155
</ul>
62-
63-
<h3>Build a Material Application (blank shell)</h3>
64-
65-
<p>
66-
See this example application on CodePen that loads
67-
the AngularJS Material library from the Google CDN:
68-
</p>
69-
70-
<iframe height='777' scrolling='no' title="AngularJS Material - Blank Starter"
71-
src='https://codepen.io/team/AngularMaterial/embed/RrbXyW/?height=777&theme-id=21180&default-tab=html'
72-
frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>
73-
See the Pen <a
74-
href='https://codepen.io/team/AngularMaterial/pen/RrbXyW/'>AngularJS Material - Blank
75-
Starter</a> by AngularJS
76-
Material (<a href='https://codepen.io/AngularMaterial'>@AngularMaterial</a>) on <a
77-
href='https://codepen.io'>CodePen</a>.
78-
</iframe>
79-
80-
<p>
81-
Now just your add your AngularJS Material components and other HTML content to your Blank
82-
starter app.
83-
</p>
84-
85-
<br/>
86-
87-
<hr>
88-
8956
<h3>Our CodePen Community</h3>
9057
<p>
9158
You can also visit our
@@ -103,7 +70,6 @@ <h3>Our CodePen Community</h3>
10370

10471

10572
<br/><br/>
106-
<hr>
10773

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

@@ -139,7 +105,6 @@ <h3>Installing the AngularJS Material Libraries</h3>
139105
</ul>
140106

141107
<br/>
142-
<hr>
143108

144109
<h3>Unsupported Integrations</h3>
145110
<p>
@@ -163,30 +128,31 @@ <h3>Unsupported Integrations</h3>
163128
<h2>Contributing to AngularJS Material</h2>
164129
<ul style="margin-bottom: 2em;">
165130
<li>
166-
Please read our <a href="https://github.com/angular/material#contributing">contributor
167-
guidelines</a>.
131+
Start by reading our <a href="https://github.com/angular/material#contributing">Contributor
132+
Guidelines</a>.
168133
</li>
169-
170134
<li>
171-
To contribute, fork our GitHub <a href="https://github.com/angular/material">repository</a>.
172-
</li>
173-
174-
<li>
175-
For bug reports,
135+
For bug reports, search our
176136
<a href="https://github.com/angular/material/issues?q=is%3Aissue+is%3Aopen"
177-
target="_blank">search the GitHub Issues</a> and/or
178-
<a href="https://github.com/angular/material/issues/new"
179-
target="_blank">create a New Issue</a>.
137+
target="_blank" title="AngularJS Material GitHub Issues">GitHub Issues</a>
138+
for existing issues that match your bug.
180139
</li>
181-
182-
<li>For questions and troubleshooting,
140+
<li style="margin-left: 40px">If none are found, please open a new issue.</li>
141+
<li>For questions and troubleshooting, search the
183142
<a href="https://groups.google.com/forum/#!forum/ngmaterial"
184-
target="_blank">search the Forum</a> and/or
185-
<a href="https://groups.google.com/forum/#!newtopic/ngmaterial">post a New Question</a>.
143+
target="_blank" title="AngularJS Material Forums">AngularJS Material Forums</a>
144+
for related discussions.
145+
</li>
146+
<li style="margin-left: 40px">If none are found, please post a new question.</li>
147+
<li>StackOverflow's
148+
<a href="https://stackoverflow.com/questions/tagged/angularjs-material" target="_blank"
149+
title="AngularJS Material tag on StackOverflow">
150+
[angularjs-material] tag</a> is another good resources for solving problems.
186151
</li>
187-
188152
<li>
189-
Join the <a href="https://gitter.im/angular/material" target="_blank">Gitter Chat</a>.
153+
You can also ask questions in our
154+
<a href="https://gitter.im/angular/material" target="_blank" title="Gitter Chat">
155+
Gitter Chat</a>.
190156
</li>
191157
</ul>
192158
</md-content>

‎docs/app/partials/home.tmpl.html‎

Lines changed: 8 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -133,39 +133,31 @@ <h3>The following table provides a more detailed view:</h3>
133133
Safari
134134
</td>
135135
<td>
136-
11.x<br>12.x
136+
12.x<br>13.x
137137
</td>
138138
</tr>
139139
<tr>
140140
<td>
141141
iOS
142142
</td>
143143
<td>
144-
11.x<br>12.x
144+
12.x<br>13.x
145145
</td>
146146
</tr>
147147
<tr>
148148
<td>
149-
Firefox for Android<br/>UC<br/>QQ<br/>Baidu
149+
Firefox for Android<br/>UC
150150
</td>
151151
<td>
152152
latest version
153153
</td>
154154
</tr>
155-
<tr>
156-
<td>
157-
Android Browser
158-
</td>
159-
<td>
160-
4.4.3-4.4.4<br>latest version
161-
</td>
162-
</tr>
163155
<tr>
164156
<td>
165157
Samsung Internet
166158
</td>
167159
<td>
168-
4<br>6.2<br>7.2
160+
10.x
169161
</td>
170162
</tr>
171163
<tr>
@@ -202,14 +194,16 @@ <h2 class="md-headline">Training Videos:</h2>
202194
</li>
203195
</ul>
204196

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

227-
228-
<br/>
229-
<h2 class="md-headline">Google's Material Design</h2>
230-
<p>
231-
Material Design is a specification for a unified system of visual, motion, and interaction
232-
design that adapts across different devices and different screen sizes.
233-
</p>
234-
<ul class="buckets" layout layout-align="center center" layout-wrap>
235-
<li flex="100" flex-gt-xs="50" ng-repeat="(index, link) in [
236-
{ href: 'https://www.youtube.com/watch?v=Q8TXgCzxEnw', icon: 'ondemand_video', text: 'Watch a video', site : 'Google' },
237-
{ href: 'https://material.io/archive/guidelines/', icon: 'launch', text: 'Learn More', site : 'Google' }
238-
]">
239-
<md-button
240-
class="md-primary md-raised"
241-
target="_blank"
242-
aria-label="{{link.text}}"
243-
ng-href="{{link.href}}">
244-
<md-icon class="block" md-svg-src="img/icons/ic_{{link.icon}}_24px.svg"></md-icon>
245-
{{link.site}} | <span class="training_link"> {{link.text}} </span>
246-
</md-button>
247-
</li>
248-
</ul>
249-
250221
<br/>
251222
<p class="md-caption" style="text-align: center; margin-bottom: 0;">
252223
These docs were generated from

‎docs/app/partials/layout-tips.tmpl.html‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -88,15 +88,13 @@ <h3>Layout Column</h3>
8888
as expected due to CSS specificity rules.
8989
</p>
9090

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

102100
<p>
@@ -209,7 +207,7 @@ <h3>Flex Element Heights</h3>
209207
it will prevent the content from scrolling correctly, instead scrolling the entire body.
210208
</p>
211209

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

0 commit comments

Comments
 (0)