Skip to content

Commit

Permalink
Merge pull request #9 from thewebplatform/master
Browse files Browse the repository at this point in the history 
Updating From Parent
  • Loading branch information
@prateekjadhwani
prateekjadhwani committed Aug 1, 2015
2 parents 906265b + da7605f commit fd39682
Show file tree
Hide file tree
Showing 9 changed files with 207 additions and 27 deletions.
26 changes: 26 additions & 0 deletions app/content.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
[
{
"title": "Diving into Angular 2",
"episode": "53",
"coverart": "http://assets.libsyn.com/content/9454132",
"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.",
"resources": [
{
"title": "Angular 2",
"link": "http://angular.io"
},
{
"title": "TypeScript",
"link": "http://www.typescriptlang.org/"
},
{
"title": "Definitely Typed",
"link": "https://github.com/DefinitelyTyped"
}
]
},
{
"title": "53: Diving into Angular 2",
"title2": "53: Diving into Angular 2"
}
]
4 changes: 4 additions & 0 deletions app/elements/elements.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../bower_components/iron-image/iron-image.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../bower_components/iron-localstorage/iron-localstorage.html">

<!-- Paper elements -->
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html">
Expand All @@ -37,12 +39,14 @@

<!-- Other public elements -->
<link rel="import" href="../bower_components/universal-footer/universal-footer.html" />
<link rel="import" href="../bower_components/podcast-player/podcast-player.html" />

<!-- Add your elements here -->
<link rel="import" href="../styles/app-theme.html">
<link rel="import" href="new-episode/new-episode.html">
<link rel="import" href="previous-episodes/previous-episodes.html">
<link rel="import" href="about-us/about-us.html">


<!-- Configure your routes here -->
<link rel="import" href="routing.html">
170 changes: 161 additions & 9 deletions app/elements/new-episode/new-episode.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,174 @@
:host {
height: 100%;
width: 100%;
display: block;
position: relative;
font-family: 'Roboto', sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.playerloc {
position: relative;
display: block;
height: 150px;
margin-top: 50px;
}
podcast-player {
position: absolute;
bottom: 0;
}

.episode-info h1{
color: var(--primary-text-color);
font-weight: 100;
margin-top: 10px;
}
.episode-info h5{
color: var(--secondary-text-color);
font-weight: 100;
margin-bottom: 0;
}

.resources {
display: block;
}
.resources h3 {
font-weight: 100;
font-size: 20px;
}
.resources paper-material {
margin:0;
}
.resources paper-item {
padding: 10px 20px;
margin: 1px;
color: var(--secondary-text-color);
}
.resources .item-title {
font-weight: 100;
font-size: 16sp;
overflow: hidden;
text-overflow: ellipsis;
}
.resources .item-link {
font-weight: 100;
font-size: 14sp;
overflow: hidden;
text-overflow: ellipsis;
}
.resources .item-link a {
color: var(--secondary-text-color);
}

@media all and (min-width: 0) and (max-width: 600px) {
.resources paper-material {
width: auto;
display: block;
}
.episode-info {
margin: 20px;
padding: 10px;
}
.episode-coverart {
width: 80px;
height: 80px;
}
.episode-info h1{
font-size: 30px;
}
.episode-info h5{
margin-top: 0;
}
}
@media all and (min-width: 601px) {
.resources paper-material {
width: 49%;
display: inline-block;
}
.episode-info {
margin: 50px;
padding: 20px;
}
.episode-coverart {
width: 120px;
height: 120px;
}
.episode-info h1{
font-size: 40px;
}
.episode-info h5{
margin-top: 40px;
}
}

</style>
<template>
<h1>New Episode Page</h1>
<p>New Episode Page</p>
<p>New Episode Page</p>
<p>New Episode Page</p>
<p>New Episode Page</p>
<p>New Episode Page</p>
<p>New Episode Page</p>
<iron-localstorage name="content" value="{{localstoragecontent}}"></iron-localstorage>
<iron-ajax id="contentservice"
auto
url="http://localhost:3000/content.json"
handle-as="json"
on-response="_handleContentResponse"></iron-ajax>
<paper-material class="episode-info" elevation="1">
<div class="titlebar layout horizontal">
<div class="flex layout vertical">
<h5>Episode <span>{{content.episode}}</span></h5>
<h1 class="flex">{{content.title}}</h1>
</div>
<div>
<iron-image class="episode-coverart" src="{{content.coverart}}" sizing="contain"></iron-image>
</div>
</div>
<div class="summary">
<p>{{content.summary}}</p>
</div>
<div class="layout vertical resources">
<div>
<h3>Resources</h3>
</div>
<div class="block">
<template is="dom-repeat" items="{{content.resources}}">
<paper-material elevation="1">
<paper-item>
<paper-item-body two-line>
<div class="item-title">{{item.title}}</div>
<div secondary class="item-link"><a href="{{item.link}}">{{item.link}}</a></div>
</paper-item-body>
</paper-item>
</paper-material>
</template>
</div>
</div>
</paper-material>
<div class="playerloc">
<podcast-player
src="https://s3.amazonaws.com/thewebplatform/episode-53_diving-into-angular-2.mp3"
name="Diving into Angular 2"
coverart="http://assets.libsyn.com/content/9454132"
episode="53"></podcast-player>
</div>
</template>
</dom-module>
<script>
( function() {
Polymer({
is: 'new-episode'
is: 'new-episode',
properties: {
localstoragecontent: {
type: Object,
observer: '_updateContent'
},
content: {
type: Object,
value: []
}
},
_updateContent: function () {
this.content = this.localstoragecontent[0];
},
_handleContentResponse: function (e, detail) {
this.localstoragecontent = detail.response;
}
});
})();
</script>
</script>
3 changes: 1 addition & 2 deletions app/elements/routing.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<script>
window.addEventListener('WebComponentsReady', function() {

// We use Page.js for routing. This is a Micro
// We use Page.js for routing. This is a Micro
// client-side router inspired by the Express router
// More info: https://visionmedia.github.io/page.js/
page('/', function () {
Expand All @@ -36,6 +36,5 @@
page({
hashbang: true
});

});
</script>
Binary file added app/episode-53_diving-into-angular-2.mp3
View file
Binary file not shown.
15 changes: 7 additions & 8 deletions app/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!--
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
Expand Down Expand Up @@ -57,13 +57,12 @@

<body unresolved class="fullbleed layout vertical">
<span id="browser-sync-binding"></span>
<template is="dom-bind" id="app">

<template is="dom-bind" id="app">
<paper-header-panel main mode="standard" class="tall">

<!-- Main Toolbar -->
<paper-toolbar id="mainToolbar" class="tall layout vertical">

<span class="flex"></span>

<!-- Toolbar icons -->
Expand All @@ -77,7 +76,7 @@ <h3 class="paper-font-display2 flex center">The Web Platform Today</h3>
</div>

<!-- Tabs in the toolbar -->
<paper-tabs attr-for-selected="data-route" selected="{{route}}" class="bottom self-end">
<paper-tabs attr-for-selected="data-route" selected="{{route}}" class="middle self-end">

<paper-tab data-route="new">New Episode</paper-tab>
<paper-tab data-route="old">Previous Stuff</paper-tab>
Expand All @@ -89,17 +88,17 @@ <h3 class="paper-font-display2 flex center">The Web Platform Today</h3>

<!-- Main Content -->
<div class="content">

<!-- Tab Data -->
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<new-episode data-route="new"></new-episode>
<previous-episodes data-route="old"></previous-episodes>
<about-us data-route="about"></about-us>
</iron-pages>

<!-- Footer -->
<universal-footer>

<div multicol class="credits">
<div col center>
<div row>
Expand Down
5 changes: 3 additions & 2 deletions app/scripts/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
// Grab a reference to our auto-binding template
// and give it some initial binding values
// Learn more about auto-binding templates at http://goo.gl/Dx1u2g
var app = document.querySelector('#app');
var app = document.querySelector('#app'),
content = [];


app.displayInstalledToast = function() {
document.querySelector('#caching-complete').show();
Expand All @@ -37,5 +39,4 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
drawerPanel.closeDrawer();
}
};

})(document);
4 changes: 0 additions & 4 deletions app/styles/app-theme.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,10 +201,6 @@
left: 0px !important;
};
}

iron-pages {
padding: 48px 62px;
}

.multicol.universal-footer [multicol] > [col] {
flex: 1;
Expand Down
7 changes: 5 additions & 2 deletions bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,13 @@
"neon-elements": "PolymerElements/neon-elements#1.0.0",
"page": "visionmedia/page.js#~1.6.3",
"universal-footer": "*",
"podcast-player": "~1.0.1",
"podcast-player": "~1.0.5",
"iron-image": "PolymerElements/iron-image#~1.0.2",
"paper-tabs": "PolymerElements/paper-tabs#~1.0.1",
"paper-button": "PolymerElements/paper-button#~1.0.3"
"paper-button": "PolymerElements/paper-button#~1.0.3",
"iron-ajax": "PolymerElements/iron-ajax#~1.0.3",
"iron-localstorage": "PolymerElements/iron-localstorage#~1.0.4",
"paper-item": "PolymerElements/paper-item#~1.0.2"
},
"devDependencies": {
"web-component-tester": "*",
Expand Down

0 comments on commit fd39682

Please sign in to comment.