unreadpoly: Initial polymer app for unread counts.

This commit is contained in:
Bill Thiede 2014-08-03 20:18:34 -07:00
parent 4027b56589
commit 6a144bca28
2 changed files with 144 additions and 0 deletions

23
unreadpoly/bower.json Normal file
View File

@ -0,0 +1,23 @@
{
"name": "unreadpoly",
"version": "0.0.0",
"authors": [
"Bill Thiede <git@xinu.tv>"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"polymer": "Polymer/polymer#~0.3.4",
"polymer-dev": "Polymer/polymer-dev#~0.3.4",
"platform": "Polymer/platform#~0.3.4",
"platform-dev": "Polymer/platform-dev#~0.3.4",
"paper-elements": "Polymer/paper-elements#~0.3.4",
"core-elements": "Polymer/core-elements#~0.3.4"
}
}

121
unreadpoly/index.html Normal file
View File

@ -0,0 +1,121 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="format-detection" content="telephone=no">
<!--<link rel="shortcut icon" href="favicon.ico">-->
<!-- 1. Load platform.js for polyfill support. -->
<script src="bower_components/platform-dev/platform.js"></script>
<!-- 2. Use an HTML Import to bring in the element. -->
<link rel="import" href="bower_components/core-ajax/core-ajax.html">
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="bower_components/core-icon/core-icon.html">
<link rel="import" href="bower_components/core-icons/core-icons.html">
<link rel="import" href="bower_components/core-menu/core-menu.html">
<link rel="import" href="bower_components/font-roboto/roboto.html">
<link rel="import" href="bower_components/paper-fab/paper-fab.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<style>
html,body {
height: 100%;
margin: 0;
background-color: #E5E5E5;
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
}
/*
core-header-panel {
float: left;
width: 360px;
height: 400px;
margin: 5px;
}
*/
core-header-panel[mode=cover]::shadow #mainContainer {
left: 70px;
}
.core-header {
height: 4em;
line-height: 2em;
font-size: 18px;
padding: 0 10px;
background-color: #4F7DC9;
color: #FFF;
transition: height 0.2s;
}
.core-header.tall {
height: 180px;
}
.core-header.medium-tall {
height: 120px;
}
.content {
}
paper-fab#refresh {
background: #080;
}
</style>
</head>
<body unresolved fullbleed layout vertical touch-action="auto">
<polymer-element name="xinu-unread" noscript>
<template>
<style >
a {
color: #000;
text-decoration: none;
}
/*
.item {
background: linear-gradient(#fff, #f8f8f8);
padding: .5em;
}
.item:hover {
background: linear-gradient(#e8e8e8, #eee);
}
*/
</style>
<core-ajax url="/unread?format=list" auto handleAs="json" response="{{boxes}}">
</core-ajax>
<template repeat="{{box in boxes}}">
<a href="#{{box.name}}" target="_self">
<paper-item icon="folder" horizontal layout>
<div flex>{{box.name}}</div>
<div end>{{box.count}}</div>
</paper-item>
</a>
</template>
</template>
</polymer-element>
<core-header-panel flex mode="waterfall">
<div class="core-header" horizontal layout center>
<div flex>Unread</div>
<paper-fab id="refresh" icon="refresh" end></paper-fab>
</div>
<div class="content">
<xinu-unread></xinu-unread>
</div>
</core-header-panel>
</body>
</html>