api-console-assets
Version:
This repo only exists to publish api console components to npm
332 lines (253 loc) • 9.22 kB
HTML
<!--
@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
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<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/paper-fab/paper-fab.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-styles/shadow.html">
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/app-layout/app-scrollpos-control/app-scrollpos-control.html">
<link rel="import" href="article-headline.html">
<link rel="import" href="article-detail.html">
<link rel="import" href="two-columns-grid.html">
<dom-module id="blog-app">
<template>
<style>
:host {
--app-primary-color: #404040;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
app-drawer {
--app-drawer-content-container: {
background-color: var(--app-primary-color);
overflow-x: hidden;
};
}
app-drawer app-header {
background-color: var(--app-primary-color);
}
.nav-menu {
background-color: var(--app-primary-color);
color: #fff;
}
a {
text-decoration: none;
color: inherit;
font-size: inherit;
}
.nav-menu > a {
display: block;
padding: 12px 16px;
font-size: 20px;
font-weight: 500;
}
.nav-menu > a.iron-selected {
background-color: #888;
}
.main-header {
border-bottom: 1px solid #ddd;
background-color: #fff;
color: #444;
}
.title-toolbar {
@apply(--layout-center-center);
box-sizing: border-box;
}
.nav-title-toolbar {
color: #fff;
width: 100vw;
}
.main-title-toolbar {
width: 100%;
}
.title {
padding-bottom: 40px;
font-size: 60px;
font-weight: 800;
}
.category-page {
min-height: 100vh;
}
[is=article-headline] {
@apply(--shadow-transition);
@apply(--shadow-elevation-2dp);
cursor: pointer;
}
article-detail {
max-width: 736px;
margin: 64px auto;
background-color: #fff;
@apply(--shadow-elevation-2dp);
}
@media (max-width: 580px) {
/* make title smaller to fit on screen */
.title {
font-size: 40px;
padding-bottom: 16px;
}
}
/* narrow layout */
@media (max-width: 808px) {
article-detail {
max-width: none;
margin: 0;
}
}
</style>
<!-- setup routes -->
<app-location route="{{route}}" use-hash-as-path></app-location>
<app-route
route="{{route}}"
pattern="/:category"
data="{{categoryData}}"
tail="{{subRoute}}"></app-route>
<app-route
route="{{subRoute}}"
pattern="/:page"
data="{{pageData}}"
tail="{{subsubRoute}}"></app-route>
<app-route
route="{{subsubRoute}}"
pattern="/:id"
data="{{idData}}"></app-route>
<!-- manages page's scroll position -->
<app-scrollpos-control
selected="[[categoryData.category]]/[[pageData.page]]"
reset="[[_equal(pageData.page, 'detail')]]"></app-scrollpos-control>
<app-drawer-layout drawer-width="288px" responsive-width="1280px">
<!-- nav panel -->
<app-drawer id="drawer">
<app-header-layout has-scrolling-region>
<app-header fixed>
<!-- top toolbar -->
<app-toolbar></app-toolbar>
<!-- bottom toolbar -->
<app-toolbar class="title-toolbar nav-title-toolbar">
<div class="title">ZUPERKÜLBLOG</div>
</app-toolbar>
</app-header>
<!-- nav menu -->
<iron-selector
class="nav-menu"
selected="[[categoryData.category]]"
attr-for-selected="name"
on-iron-activate="_drawerSelected">
<template is="dom-repeat" items="[[articles]]">
<a name="[[item.name]]" href="#/[[item.name]]/list">{{item.title}}</a>
</template>
</iron-selector>
</app-header-layout>
</app-drawer>
<!-- main panel -->
<app-header-layout>
<app-header fixed effects="waterfall" class="main-header">
<!-- top toolbar -->
<app-toolbar>
<!-- menu button -->
<paper-icon-button
drawer-toggle
icon="app:menu"
hidden$="[[_equal(pageData.page, 'detail')]]"></paper-icon-button>
<!-- back button -->
<a
href="#/[[categoryData.category]]/list"
hidden$="[[_equal(pageData.page, 'list')]]">
<paper-icon-button icon="app:arrow-back"></paper-icon-button>
</a>
</app-toolbar>
<!-- bottom toolbar -->
<app-toolbar class="title-toolbar main-title-toolbar">
<div class="title">ZUPERKÜLBLOG</div>
</app-toolbar>
</app-header>
<!-- list/detail pages -->
<iron-pages selected="[[pageData.page]]" attr-for-selected="name">
<!-- list page -->
<iron-pages name="list" selected="[[categoryData.category]]" attr-for-selected="name">
<template is="dom-repeat" items="[[articles]]" as="category">
<!-- category page (lazy-loaded) -->
<template is="dom-if" if="[[_equal(category, [[categoryData.category.name]])]]">
<section class="category-page" name="[[category.name]]">
<!-- 2-columns grid -->
<two-columns-grid column-width="396" gutter="4">
<template is="dom-repeat" items="[[category.items]]" as="article">
<a
is="article-headline"
href="#/[[category.name]]/detail/[[article.id]]"
article="[[article]]"></a>
</template>
</two-columns-grid>
</section>
</template>
</template>
</iron-pages>
<!-- detail page (lazy-loaded) -->
<template is="dom-if" if="[[_equal(pageData.page, 'detail')]]">
<article-detail name="detail" article="[[article]]"></article-detail>
</template>
</iron-pages>
</app-header-layout>
</app-drawer-layout>
</template>
<script>
Polymer({
is: 'blog-app',
properties: {
/**
* Articles data.
*/
articles: Object,
route: Object,
subRoute: Object,
subsubRoute: Object,
categoryData: Object,
pageData: Object,
idData: Object
},
observers: [
'_updateArticle(articles, categoryData.category, idData.id)'
],
attached: function() {
this.async(function() {
if (!this.route.path) {
this.set('route.path', '/art/list');
}
});
},
_equal: function(value1, value2) {
return value1 === value2;
},
_updateArticle: function(articles, category, id) {
for (var i=0, cat; cat=articles[i]; i++) {
if (cat.name === category) {
for (var j=0, article; article=cat.items[j]; j++) {
if (article.id === id) {
this.article = article;
return;
}
}
}
}
},
_drawerSelected: function() {
if (!this.$.drawer.persistent) this.$.drawer.close();
}
});
</script>
</dom-module>