1<!-- 2@license 3Copyright (c) 2016 The Polymer Project Authors. All rights reserved. 4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 7Code distributed by Google as part of the polymer project is also 8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 9--> 10<link rel="import" href="../../../polymer/polymer.html"> 11<link rel="import" href="../../../paper-card/paper-card.html"> 12<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html"> 13 14<dom-module id="search-results"> 15 <template> 16 <style> 17 :host { 18 @apply(--layout-horizontal); 19 @apply(--layout-center-center); 20 @apply(--layout-wrap); 21 } 22 23 a { 24 color: black; 25 text-decoration: none; 26 } 27 28 paper-card { 29 width: 300px; 30 margin: 1em 0.5em 0em; 31 font-size: 14px; 32 } 33 34 .card-content { 35 white-space: nowrap; 36 overflow: hidden; 37 text-overflow: ellipsis; 38 } 39 </style> 40 <template is="dom-repeat" items="{{items}}" as="video"> 41 <!-- The '#' is included because the use-hash-as-path property is 42 set to true in the app-location --> 43 <a href="./#/video/{{video.id}}"> 44 <paper-card image="{{video.thumbnail}}"> 45 <div class="card-content"> 46 {{video.title}} 47 </div> 48 </paper-card> 49 </a> 50 </template> 51 </template> 52 <script> 53 Polymer({ 54 is: 'search-results', 55 56 properties: { 57 items: { 58 type: Array 59 } 60 } 61 }) 62 </script> 63</dom-module> 64