aboutsummaryrefslogtreecommitdiff
path: root/catapult/third_party/polymer/components/app-route/demo/youtube-demo/search-results.html
diff options
context:
space:
mode:
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.html63
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>