122 lines
3.0 KiB
HTML
122 lines
3.0 KiB
HTML
<!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>
|