diff options
Diffstat (limited to 'catapult/third_party/polymer/components/app-route/demo/youtube-demo/search-results.html')
-rw-r--r-- | catapult/third_party/polymer/components/app-route/demo/youtube-demo/search-results.html | 63 |
1 files changed, 63 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/app-route/demo/youtube-demo/search-results.html b/catapult/third_party/polymer/components/app-route/demo/youtube-demo/search-results.html new file mode 100644 index 00000000..752fdb16 --- /dev/null +++ b/catapult/third_party/polymer/components/app-route/demo/youtube-demo/search-results.html @@ -0,0 +1,63 @@ +<!-- +@license +Copyright (c) 2016 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="../../../polymer/polymer.html"> +<link rel="import" href="../../../paper-card/paper-card.html"> +<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html"> + +<dom-module id="search-results"> + <template> + <style> + :host { + @apply(--layout-horizontal); + @apply(--layout-center-center); + @apply(--layout-wrap); + } + + a { + color: black; + text-decoration: none; + } + + paper-card { + width: 300px; + margin: 1em 0.5em 0em; + font-size: 14px; + } + + .card-content { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + </style> + <template is="dom-repeat" items="{{items}}" as="video"> + <!-- The '#' is included because the use-hash-as-path property is + set to true in the app-location --> + <a href="./#/video/{{video.id}}"> + <paper-card image="{{video.thumbnail}}"> + <div class="card-content"> + {{video.title}} + </div> + </paper-card> + </a> + </template> + </template> + <script> + Polymer({ + is: 'search-results', + + properties: { + items: { + type: Array + } + } + }) + </script> +</dom-module> |