Skip to content

Commit e30da86

Browse files
prateekjadhwaniprateekjadhwani
committed
Merge pull request #40 from prateekjadhwani/new-episode
New episode
2 parents b3b4dd4 + 91ab153 commit e30da86

File tree

6 files changed

+103
-23
lines changed

6 files changed

+103
-23
lines changed

‎app/content.json‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,23 @@
11
[
22
{
3-
"title": "53: Diving into Angular 2",
4-
"title2": "53: Diving into Angular 2"
3+
"title": "Diving into Angular 2",
4+
"episode": "53",
5+
"coverart": "http://assets.libsyn.com/content/9454132",
6+
"summary": "Pascal Precht (@PascalPrecht), Senior Software Engineer at Thoughtram & creator of ng-translate, chats with us about the Angular 2 and how developers can get ready today.",
7+
"resources": [
8+
{
9+
"title": "Angular 2",
10+
"link": "http://angular.io"
11+
},
12+
{
13+
"title": "TypeScript",
14+
"link": "http://www.typescriptlang.org/"
15+
},
16+
{
17+
"title": "Definitely Typed",
18+
"link": "https://github.com/DefinitelyTyped"
19+
}
20+
]
521
},
622
{
723
"title": "53: Diving into Angular 2",

‎app/elements/new-episode/new-episode.html‎

Lines changed: 83 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@
77
width: 100%;
88
display: block;
99
position: relative;
10+
font-family: 'Roboto', sans-serif;
11+
-webkit-font-smoothing: antialiased;
12+
text-rendering: optimizeLegibility;
1013
}
1114
.playerloc {
1215
position: relative;
@@ -19,18 +22,86 @@
1922
bottom: 0;
2023
}
2124
.episode-info {
22-
padding: 50px;
25+
margin: 50px;
26+
padding: 20px;
27+
}
28+
.episode-info h1{
29+
color: var(--primary-text-color);
30+
font-size: 40px;
31+
font-weight: 100;
32+
margin-top: 10px;
33+
}
34+
.episode-info h5{
35+
color: var(--secondary-text-color);
36+
font-weight: 100;
37+
margin-bottom: 0;
38+
margin-top: 40px;
39+
}
40+
.episode-coverart {
41+
width: 120px;
42+
height: 120px;
43+
}
44+
.resources {
45+
display: block;
46+
}
47+
.resources h3 {
48+
font-weight: 100;
49+
font-size: 20px;
50+
}
51+
.resources paper-item {
52+
display: inline-block;
53+
padding: 10px 20px;
54+
margin: 1px;
55+
color: var(--secondary-text-color);
56+
}
57+
.resources .item-title {
58+
font-weight: 100;
59+
font-size: 16sp;
60+
}
61+
.resources .item-link {
62+
font-weight: 100;
63+
font-size: 14sp;
64+
}
65+
.resources .item-link a {
66+
color: var(--secondary-text-color);
2367
}
2468
</style>
2569
<template>
26-
<iron-localstorage name="content" value="{{localstoragecontent}}" autoSaveDisabled="true"></iron-localstorage>
27-
<paper-material class="episode-info" elevation="0">
28-
<h1>{{content.title}}</h1>
29-
<p>New Episode Page</p>
30-
<p>New Episode Page</p>
31-
<p>New Episode Page</p>
32-
<p>New Episode Page</p>
33-
<p>New Episode Page</p>
70+
<iron-localstorage name="content" value="{{localstoragecontent}}"></iron-localstorage>
71+
<iron-ajax id="contentservice"
72+
auto
73+
url="http://localhost:3000/content.json"
74+
handle-as="json"
75+
on-response="_handleContentResponse"></iron-ajax>
76+
<paper-material class="episode-info" elevation="1">
77+
<div class="titlebar layout horizontal">
78+
<div class="flex layout vertical">
79+
<h5>Episode <span>{{content.episode}}</span></h5>
80+
<h1 class="flex">{{content.title}}</h1>
81+
</div>
82+
<div>
83+
<iron-image class="episode-coverart" src="{{content.coverart}}" sizing="contain"></iron-image>
84+
</div>
85+
</div>
86+
<div class="summary">
87+
<p>{{content.summary}}</p>
88+
</div>
89+
<div class="layout vertical resources">
90+
<div>
91+
<h3>Resources</h3>
92+
</div>
93+
<div class="flex layout horizontal">
94+
<template is="dom-repeat" items="{{content.resources}}">
95+
96+
<paper-item class="flex">
97+
<paper-item-body two-line>
98+
<div class="item-title">{{item.title}}</div>
99+
<div secondary class="item-link"><a href="{{item.link}}">{{item.link}}</a></div>
100+
</paper-item-body>
101+
</paper-item>
102+
</template>
103+
</div>
104+
</div>
34105
</paper-material>
35106
<div class="playerloc">
36107
<podcast-player
@@ -57,6 +128,9 @@ <h1>{{content.title}}</h1>
57128
},
58129
_updateContent: function () {
59130
this.content = this.localstoragecontent[0];
131+
},
132+
_handleContentResponse: function (e, detail) {
133+
this.localstoragecontent = detail.response;
60134
}
61135
});
62136
})();

‎app/episode-53_diving-into-angular-2.mp3‎

54.2 MB
Binary file not shown.

‎app/index.html‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -60,11 +60,6 @@
6060

6161
<template is="dom-bind" id="app">
6262
<paper-header-panel main mode="standard" class="tall">
63-
<iron-ajax id="contentservice"
64-
auto
65-
url="content.json"
66-
handle-as="json"
67-
on-response="handleContentResponse"></iron-ajax>
6863
<!-- Main Toolbar -->
6964
<paper-toolbar id="mainToolbar" class="tall layout vertical">
7065

‎app/scripts/app.js‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,4 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
3939
drawerPanel.closeDrawer();
4040
}
4141
};
42-
43-
// For Content service
44-
app.handleContentResponse = function(e, detail) {
45-
content = e.detail.response;
46-
localStorage.setItem("content", JSON.stringify(content));
47-
};
4842
})(document);

‎bower.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@
2929
"paper-tabs": "PolymerElements/paper-tabs#~1.0.1",
3030
"paper-button": "PolymerElements/paper-button#~1.0.3",
3131
"iron-ajax": "PolymerElements/iron-ajax#~1.0.3",
32-
"iron-localstorage": "PolymerElements/iron-localstorage#~1.0.4"
32+
"iron-localstorage": "PolymerElements/iron-localstorage#~1.0.4",
33+
"paper-item": "PolymerElements/paper-item#~1.0.2"
3334
},
3435
"devDependencies": {
3536
"web-component-tester": "*",

0 commit comments

Comments
 (0)