Skip to content

Instantly share code, notes, and snippets.

@tswast
Last active August 29, 2015 14:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tswast/2323b8798ce56a4eb5aa to your computer and use it in GitHub Desktop.
Save tswast/2323b8798ce56a4eb5aa to your computer and use it in GitHub Desktop.
designer
<link rel="import" href="../core-animated-pages/core-animated-pages.html">
<link rel="import" href="../core-animated-pages/transitions/hero-transition.html">
<link rel="import" href="../core-animated-pages/transitions/cross-fade.html">
<link rel="import" href="../core-animated-pages/transitions/slide-down.html">
<link rel="import" href="../core-animated-pages/transitions/slide-up.html">
<link rel="import" href="../core-animated-pages/transitions/tile-cascade.html">
<polymer-element name="music-demo">
<template>
<style>
.chip-container {
position: absolute;
top: 275px;
right: 0px;
left: 0px;
text-align: center;
}
.chip {
display: inline-block;
position: relative;
border-radius: 3px;
margin: 4px;
overflow: hidden;
text-align: start;
box-shadow: rgba(0, 0, 0, 0.156863) 0px 2px 10px 0px;
background-color: rgb(255, 255, 255);
}
.chip-top {
width: 200px;
height: 200px;
}
.chip-bottom {
padding: 8px;
line-height: 1.5;
}
.chip-album-title {
font-weight: bold;
}
#details {
padding: 200px 10% 0px;
}
.card {
height: 400px;
border-radius: 3px;
text-align: start;
overflow: hidden;
box-shadow: rgba(0, 0, 0, 0.188235) 0px 6px 20px 0px;
background: rgb(255, 255, 255);
}
.card-left {
width: 400px;
}
.card-right {
padding: 24px;
}
.card-icon {
border-radius: 50%;
width: 60px;
height: 60px;
margin-right: 16px;
}
.card-album-title {
font-size: 2em;
}
</style>
<core-animated-pages transitions="hero-transition" selected="{{ page }}" selectedindex="0" notap on-core-animated-pages-transition-end="{{ complete }}">
<section active>
<div class="chip-container" hero-p on-tap="{{ transition }}">
<template repeat="{{items as item}}"></template>
<div class="chip" hero-id="Tycho-Fragments">
<div class="chip-top" hero-id="Tycho-Fragments-art"></div>
<div class="chip-bottom">
<div class="chip-album-title">{{ item.album }}</div>
<div class="chip-artist">{{ item.artist }}</div>
</div>
</div>
<div class="chip" hero-id="Tycho-Past Prologue">
<div class="chip-top" hero-id="Tycho-Past Prologue-art"></div>
<div class="chip-bottom">
<div class="chip-album-title">{{ item.album }}</div>
<div class="chip-artist">{{ item.artist }}</div>
</div>
</div>
<div class="chip" hero-id="Tycho-Spectre">
<div class="chip-top" hero-id="Tycho-Spectre-art"></div>
<div class="chip-bottom">
<div class="chip-album-title">{{ item.album }}</div>
<div class="chip-artist">{{ item.artist }}</div>
</div>
</div>
<div class="chip" hero-id="Tycho-Awake">
<div class="chip-top" hero-id="Tycho-Awake-art"></div>
<div class="chip-bottom">
<div class="chip-album-title">{{ item.album }}</div>
<div class="chip-artist">{{ item.artist }}</div>
</div>
</div>
</div>
</section>
<section id="details">
<div class="card" layout horizontal hero-id="-" hero on-tap="{{ transition }}">
<div class="card-left" hero-id="--art" hero></div>
<div class="card-right" flex>
<div layout horizontal center>
<div>
<div class="card-icon"></div>
</div>
<div flex>
<div class="card-album-title">{{ selectedAlbum.album }}</div>
<div class="card-album-artist">{{ selectedAlbum.artist }}</div>
</div>
</div>
</div>
</div>
</section>
</core-animated-pages>
</template>
<script>
Polymer({
page: 0,
items: [
{
"artist": "Tycho",
"album": "Fragments",
"color": "#f4db33"
},
{
"artist": "Tycho",
"album": "Past Prologue",
"color": "#972ff8"
},
{
"artist": "Tycho",
"album": "Spectre",
"color": "#7dd6fe"
},
{
"artist": "Tycho",
"album": "Awake",
"color": "#dc3c84"
}
],
selectedAlbum: null,
transition: function (e) {
if (this.page === 0 && e.target.templateInstance.model.item) {
this.selectedAlbum = e.target.templateInstance.model.item;
this.page = 1;
} else {
this.page = 0;
}
}
});
</script>
</polymer-element>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment