From a5c90fdbba89f2ffce0b09cded51caa35b34a46b Mon Sep 17 00:00:00 2001
From: Scott Miles <sjmiles@google.com>
Date: Fri, 1 Nov 2013 12:47:03 -0700
Subject: [PATCH] evolve discover.html

---
 discover.html | 75 ++++++++++++++++++++++++++++++++++++++++++++++-----
 elements.html |  1 +
 2 files changed, 69 insertions(+), 7 deletions(-)

diff --git a/discover.html b/discover.html
index a942610..9a76d24 100644
--- a/discover.html
+++ b/discover.html
@@ -5,10 +5,34 @@
   <style>
     body {
       font-family: "Helvetica Neue", Arial, Roboto, sans-serif;
+      padding: 10px 128px;
+    }
+    h2 {
+      width: auto;
+      font-size: 40px;
+      text-transform: uppercase;
+      border-radius: 0;
+      box-sizing: border-box;
+      margin: 0;
+      padding: 64px;
+      color: white;
+      background: #4285f4;
+    }
+    h3 {
+      color: #4285f4;
+      position: relative;
+      line-height: 24px;
+      padding: 0;
+      font-size: 24px;
+      font-weight: 700;
+      text-transform: uppercase;
+      Xdisplay: inline-block;
+      margin-bottom: 28px;
     }
   </style>
   <!--<script src="../platform/platform.js"></script>-->
   <script src="../polymer/polymer.js"></script>
+  <link rel="import" href="../polymer-elements/elements.html">
   <link rel="import" href="../polymer-ui-elements/polymer-ui-icon/polymer-ui-icon.html">
   <link rel="import" href="../designer-elements/x-meta/x-meta.html">
   <link rel="import" href="elements.html">
@@ -39,15 +63,52 @@ <h3>Individually Wrapped</h3>
 
   <polymer-element name="elt-list">
     <template>
+      <style>
+        .item {
+          border-top: 1px solid rgba(0,0,0,0.1);
+          position: relative;
+          cursor: pointer;
+          padding: 48px 0;
+        }
+        .inner {
+          height: 150px;
+        }
+        section {
+          margin-left: -100px;
+        }
+        h4 {
+          margin: 0px;
+          font-size: 20px;
+          line-height: 20px;
+          color: #666;
+          vertical-align: middle;
+          text-transform: uppercase;
+          font-weight: 400;
+        }
+        meta-archetype {
+          height: 300px;
+          width: 400px;
+          zoom: 50%;
+          X-webkit-transform-origin: 0 0;
+          X-webkit-transform: scale(0.5);
+          overflow: hidden;
+          border: 1px solid #ccc;
+          background-color: #eee;
+        }       
+      </style>
       <x-meta id="meta" list="{{list}}"></x-meta>
       <template repeat="{{list}}">
-        <div style="border: 1px dotted gray; padding: 8px; margin-bottom: 4px;">
-          <h4 style="margin-top: 0; line-height: 36px;">{{id}}<a href="http://localhost:3003/bower?{{id}}=https%3A//github.com/sjmiles/{{id}}.git"><polymer-ui-icon icon="shortcut" style="margin: 0 0 8px 8px;"></polymer-ui-icon></a></h4>
-          <meta-archetype meta="{{}}" style="display:block;"></meta-archetype>
-          <br>
-          <a href="{{id}}">Test Page</a>
-          <!--<br>
-          <a href="http://localhost:3003/bower?{{id}}=https%3A//github.com/sjmiles/{{id}}.git">Bowager Install</a>-->
+        <div class="item">
+          <div class="inner">
+            <polymer-layout></polymer-layout>
+            <meta-archetype meta="{{}}"></meta-archetype>
+            <section flex>
+              <h4>{{id}}<a href="http://localhost:3003/bower?{{id}}=https%3A//github.com/sjmiles/{{id}}.git"><polymer-ui-icon icon="shortcut" style="margin: 0 0 8px 8px;"></polymer-ui-icon></a></h4>
+              <p>We don't have text descriptions in our metadata at this time, sorry. Maybe you would like to take a look at the <a href="{{id}}">test page</a>.</p>
+              <!-- <br>
+              <a href="http://localhost:3003/bower?{{id}}=https%3A//github.com/sjmiles/{{id}}.git">Bowager Install</a> -->
+            </section>
+          </div>
         </div>
       </template>
     </template>
diff --git a/elements.html b/elements.html
index ebe38f4..2925eba 100644
--- a/elements.html
+++ b/elements.html
@@ -13,6 +13,7 @@
 <link rel="import" href="polymer-ui-overlay/polymer-ui-overlay.html">
 <link rel="import" href="polymer-ui-pages/polymer-ui-pages.html">
 <link rel="import" href="polymer-ui-ratings/polymer-ui-ratings.html">
+<link rel="import" href="polymer-ui-scaffold/polymer-ui-scaffold.html">
 <link rel="import" href="polymer-ui-sidebar/polymer-ui-sidebar.html">
 <link rel="import" href="polymer-ui-sidebar-header/polymer-ui-sidebar-header.html">
 <link rel="import" href="polymer-ui-sidebar-menu/polymer-ui-sidebar-menu.html">