Skip to content
This repository was archived by the owner on Mar 13, 2018. It is now read-only.

Commit 919059f

Browse files
author
Arthur Evans
committed
Tutorial cleanup & editorial suggestions.
1 parent 9cf4b01 commit 919059f

8 files changed

Lines changed: 100 additions & 24 deletions

File tree

‎finished/index.html‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,14 @@
22
<html>
33

44
<head>
5+
56
<title>unquote</title>
7+
68
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
7-
<script src="../components/platform/platform.js"></script>
9+
10+
<script src="../components/platform/platform.js">
11+
</script>
12+
813
<link rel="import" href="../components/font-roboto/roboto.html">
914
<link rel="import"
1015
href="../components/core-header-panel/core-header-panel.html">
@@ -13,6 +18,7 @@
1318
<link rel="import"
1419
href="../components/paper-tabs/paper-tabs.html">
1520
<link rel="import" href="post-list.html">
21+
1622
<style>
1723
html,body {
1824
height: 100%;
@@ -36,6 +42,7 @@
3642
-moz-user-select: none;
3743
-ms-user-select: none;
3844
user-select: none;
45+
text-transform: uppercase;
3946
}
4047
.container {
4148
width: 80%;
@@ -50,24 +57,31 @@
5057
}
5158
}
5259
</style>
60+
5361
</head>
5462

5563
<body unresolved>
64+
5665
<core-header-panel>
66+
5767
<core-toolbar>
68+
5869
<paper-tabs id="tabs" selected="all" self-end>
59-
<paper-tab name="all">ALL</paper-tab>
60-
<paper-tab name="favorites">FAVORITES</paper-tab>
70+
<paper-tab name="all">All</paper-tab>
71+
<paper-tab name="favorites">Favorites</paper-tab>
6172
</paper-tabs>
73+
6274
</core-toolbar>
75+
6376
<div class="container" layout vertical center>
6477
<post-list show="all"></post-list>
6578
</div>
79+
6680
</core-header-panel>
6781

6882
<script>
69-
var list = document.querySelector('post-list');
7083
var tabs = document.querySelector('paper-tabs');
84+
var list = document.querySelector('post-list');
7185

7286
tabs.addEventListener('core-select', function() {
7387
list.show = tabs.selected;

‎finished/post-card.html‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,18 +38,24 @@
3838
color: #da4336;
3939
}
4040
</style>
41+
4142
<div class="card-header" layout horizontal center>
43+
4244
<content select="img"></content>
4345
<content select="h2"></content>
46+
4447
</div>
48+
4549
<core-icon-button
4650
id="favicon"
4751
icon="favorite"
48-
on-tap="{{favoriteTapped}}"></core-icon-button>
49-
<content></content>
52+
on-tap="{{favoriteTapped}}">
53+
</core-icon-button>
54+
55+
<content></content>
5056
</template>
5157
<script>
52-
Polymer('post-card', {
58+
Polymer({
5359
publish: {
5460
favorite: {
5561
value: false,

‎starter/index.html‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,17 @@
22
<html>
33

44
<head>
5+
56
<title>unquote</title>
6-
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
7-
<script src="../components/platform/platform.js"></script>
7+
8+
<meta name="viewport"
9+
content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
10+
11+
<script src="../components/platform/platform.js">
12+
</script>
13+
814
<link rel="import" href="../components/font-roboto/roboto.html">
15+
916
<style>
1017
html,body {
1118
height: 100%;
@@ -26,6 +33,7 @@
2633
}
2734
}
2835
</style>
36+
2937
</head>
3038

3139
<body unresolved>

‎step-1/index.html‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,23 @@
22
<html>
33

44
<head>
5+
56
<title>unquote</title>
6-
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
7-
<script src="../components/platform/platform.js"></script>
7+
8+
<meta name="viewport"
9+
content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
10+
11+
<script src="../components/platform/platform.js">
12+
</script>
13+
814
<link rel="import" href="../components/font-roboto/roboto.html">
915
<link rel="import"
1016
href="../components/core-header-panel/core-header-panel.html">
1117
<link rel="import"
1218
href="../components/core-toolbar/core-toolbar.html">
1319
<link rel="import"
1420
href="../components/paper-tabs/paper-tabs.html">
21+
1522
<style>
1623
html,body {
1724
height: 100%;
@@ -35,6 +42,7 @@
3542
-moz-user-select: none;
3643
-ms-user-select: none;
3744
user-select: none;
45+
text-transform: uppercase;
3846
}
3947
.container {
4048
width: 80%;
@@ -49,15 +57,19 @@
4957
}
5058
}
5159
</style>
60+
5261
</head>
5362

5463
<body unresolved>
5564
<core-header-panel>
65+
5666
<core-toolbar>
67+
5768
<paper-tabs id="tabs" selected="all" self-end>
58-
<paper-tab name="all">ALL</paper-tab>
59-
<paper-tab name="favorites">FAVORITES</paper-tab>
69+
<paper-tab name="all">All</paper-tab>
70+
<paper-tab name="favorites">Favorites</paper-tab>
6071
</paper-tabs>
72+
6173
</core-toolbar>
6274

6375
<!-- main page content will go here -->

‎step-2/index.html‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,15 @@
22
<html>
33

44
<head>
5+
56
<title>unquote</title>
6-
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
7-
<script src="../components/platform/platform.js"></script>
7+
8+
<meta name="viewport"
9+
content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
10+
11+
<script src="../components/platform/platform.js">
12+
</script>
13+
814
<link rel="import" href="../components/font-roboto/roboto.html">
915
<link rel="import"
1016
href="../components/core-header-panel/core-header-panel.html">
@@ -13,6 +19,7 @@
1319
<link rel="import"
1420
href="../components/paper-tabs/paper-tabs.html">
1521
<link rel="import" href="post-card.html">
22+
1623
<style>
1724
html,body {
1825
height: 100%;
@@ -36,6 +43,7 @@
3643
-moz-user-select: none;
3744
-ms-user-select: none;
3845
user-select: none;
46+
text-transform: uppercase;
3947
}
4048
.container {
4149
width: 80%;
@@ -50,24 +58,33 @@
5058
}
5159
}
5260
</style>
61+
5362
</head>
5463

5564
<body unresolved>
65+
5666
<core-header-panel>
67+
5768
<core-toolbar>
69+
5870
<paper-tabs id="tabs" selected="all" self-end>
59-
<paper-tab name="all">ALL</paper-tab>
60-
<paper-tab name="favorites">FAVORITES</paper-tab>
71+
<paper-tab name="all">All</paper-tab>
72+
<paper-tab name="favorites">Favorites</paper-tab>
6173
</paper-tabs>
74+
6275
</core-toolbar>
6376

6477
<div class="container" layout vertical center>
78+
6579
<post-card>
66-
<img src="../images/avatar-07.svg" width="70" height="70">
80+
<img width="70" height="70"
81+
src="../images/avatar-07.svg">
6782
<h2>Another Developer</h2>
6883
<p>I'm composing with shadow DOM!</p>
6984
</post-card>
85+
7086
</div>
87+
7188
</core-header-panel>
7289

7390
<script>

‎step-3/index.html‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,15 @@
22
<html>
33

44
<head>
5+
56
<title>unquote</title>
6-
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
7-
<script src="../components/platform/platform.js"></script>
7+
8+
<meta name="viewport"
9+
content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
10+
11+
<script src="../components/platform/platform.js">
12+
</script>
13+
814
<link rel="import" href="../components/font-roboto/roboto.html">
915
<link rel="import"
1016
href="../components/core-header-panel/core-header-panel.html">
@@ -13,6 +19,7 @@
1319
<link rel="import"
1420
href="../components/paper-tabs/paper-tabs.html">
1521
<link rel="import" href="post-list.html">
22+
1623
<style>
1724
html,body {
1825
height: 100%;
@@ -36,6 +43,7 @@
3643
-moz-user-select: none;
3744
-ms-user-select: none;
3845
user-select: none;
46+
text-transform: uppercase;
3947
}
4048
.container {
4149
width: 80%;
@@ -50,15 +58,20 @@
5058
}
5159
}
5260
</style>
61+
5362
</head>
5463

5564
<body unresolved>
65+
5666
<core-header-panel>
67+
5768
<core-toolbar>
69+
5870
<paper-tabs id="tabs" selected="all" self-end>
59-
<paper-tab name="all">ALL</paper-tab>
60-
<paper-tab name="favorites">FAVORITES</paper-tab>
71+
<paper-tab name="all">All</paper-tab>
72+
<paper-tab name="favorites">Favorites</paper-tab>
6173
</paper-tabs>
74+
6275
</core-toolbar>
6376

6477
<div class="container" layout vertical center>

‎step-3/post-card.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,14 @@
2929
margin: 10px;
3030
}
3131
</style>
32+
3233
<div class="card-header" layout horizontal center>
34+
3335
<content select="img"></content>
3436
<content select="h2"></content>
37+
3538
</div>
39+
3640
<content></content>
3741
</template>
3842
<script>

‎step-3/post-list.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,22 @@
1414
}
1515
</style>
1616

17-
<post-service id="service" posts="{{posts}}"></post-service>
17+
<post-service id="service" posts="{{posts}}">
18+
</post-service>
1819

1920
<div layout vertical center>
21+
2022
<template repeat="{{post in posts}}">
2123
<post-card>
2224
<img src="{{post.avatar}}" width="70" height="70">
2325
<h2>{{post.username}}</h2>
2426
<p>{{post.text}}</p>
2527
</post-card>
2628
</template>
29+
2730
</div>
2831
</template>
2932
<script>
3033
Polymer({});
3134
</script>
32-
3335
</polymer-element>

0 commit comments

Comments
 (0)