Skip to content

Instantly share code, notes, and snippets.

@OSUblake

OSUblake/designer.html

Created November 22, 2014 07:21
Show Gist options
  • Save OSUblake/69a45a9b97f614f5755d to your computer and use it in GitHub Desktop.
Save OSUblake/69a45a9b97f614f5755d to your computer and use it in GitHub Desktop.
Download ZIP
designer
Raw
designer.html
<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">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../core-icons/av-icons.html">
<link rel="import" href="../paper-fab/paper-fab.html">
<polymer-element name="my-element">
<template>
<style>
:host {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
}
section {
overflow: hidden;
}
#core_animated_pages {
width: 100%;
height: 100%;
overflow: hidden;
left: 0px;
top: 0px;
position: absolute;
background-color: rgb(238, 238, 238);
}
#section1 {
left: 0px;
top: 0px;
position: absolute;
width: 100%;
height: 100%;
opacity: 1;
background-color: rgb(255, 128, 64);
}
#section2 {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgb(128, 255, 0);
}
#section3 {
background-color: rgb(128, 128, 255);
}
#section4 {
background-color: rgb(128, 128, 0);
}
#section5 {
background-color: rgb(64, 128, 128);
}
#section6 {
background-color: rgb(0, 128, 192);
}
#section {
box-sizing: border-box;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
}
#toolbar {
box-sizing: border-box;
height: 15%;
position: relative;
color: rgb(255, 255, 255);
font-size: 48px;
background-color: rgb(0, 187, 211);
}
.tiles-container {
padding-left: 3px;
height: 85%;
}
#tile-profile {
box-sizing: border-box;
float: left;
height: 30%;
width: 48%;
margin: 3px;
background-color: rgb(204, 204, 204);
}
#core_icon {
height: 128px;
width: 128px;
}
#div {
padding: 8px;
color: rgb(255, 255, 255);
background-color: rgb(170, 170, 170);
}
#tile-general {
box-sizing: border-box;
float: left;
height: 30%;
width: 48%;
margin: 3px;
}
#section8 {
background-color: rgb(255, 255, 141);
}
#core_icon1 {
height: 128px;
width: 128px;
}
#div1 {
padding: 8px;
color: rgb(255, 255, 255);
background-color: rgb(255, 235, 59);
}
#div7 {
box-sizing: border-box;
float: left;
height: 30%;
width: 48%;
margin: 3px;
background-color: rgb(185, 246, 202);
}
#core_icon2 {
height: 128px;
width: 128px;
}
#div8 {
padding: 8px;
color: rgb(255, 255, 255);
background-color: rgb(15, 157, 88);
}
#div9 {
box-sizing: border-box;
float: left;
height: 30%;
width: 48%;
margin: 3px;
background-color: rgb(255, 138, 128);
}
#core_icon3 {
height: 128px;
width: 128px;
}
#div10 {
padding: 8px;
color: rgb(255, 255, 255);
background-color: rgb(219, 68, 55);
}
#div11 {
box-sizing: border-box;
float: left;
height: 30%;
width: 48%;
margin: 3px;
background-color: rgb(130, 177, 255);
}
#core_icon4 {
height: 128px;
width: 128px;
}
#div12 {
padding: 8px;
color: rgb(255, 255, 255);
background-color: rgb(66, 133, 244);
}
#div13 {
box-sizing: border-box;
float: left;
height: 30%;
width: 48%;
margin: 3px;
background-color: rgb(179, 136, 255);
}
#core_icon5 {
height: 128px;
width: 128px;
}
#div14 {
padding: 8px;
color: rgb(255, 255, 255);
background-color: rgb(126, 87, 194);
}
.tile {
box-sizing: border-box;
float: left;
height: 200px;
width: 49%;
margin: 3px;
}
.tile-bottom {
padding: 8px;
color: rgb(255, 255, 255);
}
.t1 {
background-color: rgb(255, 255, 141);
}
.t1-bottom {
background-color: rgb(255, 235, 59);
}
.t2 {
background-color: rgb(185, 246, 202);
}
.t2-bottom {
background-color: rgb(15, 157, 88);
}
.t3 {
background-color: rgb(255, 138, 128);
}
.t3-bottom {
background-color: rgb(219, 68, 55);
}
.t4 {
background-color: rgb(130, 177, 255);
}
.t4-bottom {
background-color: rgb(66, 133, 244);
}
.top {
background-color: rgb(255, 255, 141);
}
.bottom {
box-sizing: border-box;
position: relative;
height: 80px;
padding: 24px;
color: rgb(255, 255, 255);
font-size: 32px;
background-color: rgb(255, 235, 59);
}
.tall-toolbar {
box-sizing: border-box;
height: 240px;
position: relative;
color: rgb(255, 255, 255);
padding: 48px;
font-size: 48px;
}
.tall-toolbar.categories {
margin-bottom: 2px;
background-color: rgb(0, 187, 211);
}
.tall-toolbar.questions {
background-color: rgb(255, 235, 59);
}
.middle {
color: rgb(63, 63, 63);
padding: 24px 48px;
font-size: 24px;
line-height: 1.5;
background-color: rgb(250, 250, 250);
}
.footer {
height: 80px;
}
.avatar {
height: 80px;
width: 80px;
background-color: rgb(255, 128, 171);
}
.footer-right, .score {
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgb(204, 204, 204);
padding: 30px;
background-color: rgb(255, 255, 255);
}
.fab {
position: absolute;
fill: rgb(255, 255, 255);
}
.fab-0 {
bottom: 50px;
right: 24px;
}
.fab-1 {
top: 210px;
right: 24px;
}
paper-fab {
background-color: rgb(255, 64, 129);
}
#core_icon_button {
left: 1690px;
top: 660px;
}
</style>
<core-animated-pages transitions="hero-transition slide-up slide-down cross-fade list-cascade" selected="{{ page }}" selectedindex="0" notap id="core_animated_pages" on-core-animated-pages-transition-end="{{ complete }}">
<section id="section" layout vertical active>
<div id="div" class="tall-toolbar categories" slide-down>
<span>Your name here</span>
</div>
<div id="div1" class="tiles-container">
<div class="tile t1" layout vertical>
<div class="tile-top" flex>Top</div>
<div class="tile-bottom t1-bottom">Tile 1</div>
</div>
<div class="tile t2" hero-id="category-image" hero layout vertical on-tap="{{ transition }}">
<div class="tile-top" flex>Click Me</div>
<div class="tile-bottom t2-bottom" hero-id="footer" hero>Tile 2</div>
</div>
<div class="tile t3" layout vertical>
<div id="div2" class="tile-top" flex></div>
<div class="tile-bottom t3-bottom">Tile 3</div>
</div>
<div class="tile t4" layout vertical>
<div class="tile-top" flex></div>
<div class="tile-bottom t4-bottom">Tile 4</div>
</div>
</div>
</section>
<section layout vertical>
<div class="top" hero-id="category-image" hero flex layout horizontal center center-justified>
<div class="top-image" cross-fade></div>
</div>
<div class="bottom" hero-id="footer" hero cross-fade>
<span cross-fade>General Knowledge</span>
</div>
<div class="fab fab-0" hero-id="fab" hero>
<paper-fab icon="av:play-arrow" on-tap="{{ transition }}" hero></paper-fab>
</div>
</section>
<section layout vertical>
<div class="tall-toolbar questions" hero-id="footer" hero>
<span cross-fade>Question here</span>
</div>
<div class="fab fab-1" hero-id="fab" hero>
<paper-fab icon="av:play-arrow" on-tap="{{ transition }}" hero></paper-fab>
</div>
<div flex class="middle" slide-up list-cascade>
<p>Option 1</p>
<p>Option 2</p>
<p>Option 3</p>
<p>Option 4</p>
<p>Option 5</p>
</div>
<div class="footer" layout horizontal slide-up>
<div class="avatar"></div>
<div class="footer-right" flex>
some text here
</div>
<div class="score">
32 pts
</div>
</div>
</section>
</core-animated-pages>
</template>
<script>
Polymer({
page: 0,
max: 5,
si: 0,
transition: function (e) {
if(this.page === 2) {
this.page = 0;
} else {
this.page += 1;
}
},
foo: function () {
if(this.si === this.max){
//this.si = 0;
} else {
//this.si++;
}
}
});
</script>
</polymer-element>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment