| <!-- |
| @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/paper-card/paper-card.html"> |
| <link rel="import" href="../bower_components/paper-fab/paper-fab.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-header/app-header.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-toolbar/app-toolbar.html"> |
| |
| <dom-module id="recipe-list"> |
| <template> |
| |
| <style> |
| |
| app-header { |
| color: #fff; |
| background-color: #00AA8D; |
| } |
| |
| app-toolbar { |
| height: 120px; |
| } |
| |
| [condensed-title] { |
| position: absolute; |
| top: 0; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| background-image: url('//app-layout-assets.appspot.com/assets/pesto/logo_m.png'); |
| background-repeat: no-repeat; |
| background-position: center center; |
| background-size: 90px; |
| |
| /* The difference in font size is used to calculate the scale of the title in the transition. */ |
| font-size: 16px; |
| } |
| |
| [title] { |
| position: absolute; |
| top: -120px; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| background-image: url('//app-layout-assets.appspot.com/assets/pesto/logo_l.png'); |
| background-repeat: no-repeat; |
| background-position: center center; |
| background-size: 240px; |
| -webkit-transform-origin: center top !important; |
| transform-origin: center top !important; |
| |
| /* The difference in font size is used to calculate the scale of the title in the transition. */ |
| font-size: 32px; |
| } |
| |
| .content { |
| display: block; |
| position: relative; |
| max-width: 1000px; |
| margin: 5px auto; |
| } |
| |
| .card-container { |
| display: inline-block; |
| width: 33.33%; |
| color: black; |
| text-decoration: none; |
| } |
| |
| paper-card { |
| display: block; |
| margin: 5px; |
| |
| --paper-card-header-image: { |
| height: 200px; |
| } |
| } |
| |
| paper-card h2 { |
| margin: 4px; |
| font-weight: normal; |
| } |
| |
| paper-card p { |
| margin: 4px; |
| color: #999; |
| } |
| |
| paper-fab { |
| position: fixed; |
| right: 24px; |
| bottom: 24px; |
| |
| --paper-fab-background: #EF5458; |
| --paper-fab-keyboard-focus-background: #DF4448; |
| } |
| |
| @media (max-width: 960px) { |
| .content { |
| max-width: 800px; |
| } |
| |
| .card-container { |
| width: 50%; |
| } |
| } |
| |
| @media (max-width: 719px) { |
| app-toolbar { |
| height: 60px; |
| } |
| |
| [condensed-title] { |
| background-image: url('//app-layout-assets.appspot.com/assets/pesto/logo_s.png'); |
| background-size: 60px; |
| } |
| |
| [title] { |
| top: -60px; |
| background-image: url('//app-layout-assets.appspot.com/assets/pesto/logo_m.png'); |
| background-size: 90px; |
| } |
| |
| .content { |
| max-width: 400px; |
| } |
| |
| .card-container { |
| width: 100%; |
| } |
| } |
| |
| </style> |
| |
| <!-- main panel --> |
| <app-header-layout> |
| |
| <app-header effects="resize-title" condenses fixed shadow> |
| <app-toolbar class="top-toolbar"> |
| <content select="[drawer-toggle]"></content> |
| <div condensed-title></div> |
| </app-toolbar> |
| <app-toolbar class="bottom-toolbar"> |
| <div title></div> |
| </app-toolbar> |
| </app-header> |
| |
| <div class="content"> |
| <template is="dom-repeat" items="{{recipes}}"><!-- No empty text node |
| --><a href="#/detail/{{item.id}}" class="card-container"> |
| <paper-card image="{{item.imageUrl}}"> |
| <div class="card-content"> |
| <h2>{{item.name}}</h2> |
| <p>By <span>{{item.author}}</span></p> |
| </div> |
| </paper-card> |
| </a><!-- No empty text node |
| --></template> |
| </div> |
| |
| </app-header-layout> |
| |
| <paper-fab icon="app:create"></paper-fab> |
| </template> |
| |
| <script> |
| |
| Polymer({ |
| |
| is: 'recipe-list', |
| |
| properties: { |
| recipes: Object |
| } |
| |
| }); |
| |
| </script> |
| </dom-module> |