[bug 986071] UI for select product

fjord/feedback/static/css/product_picker.less

@@ -0,0 +1,102 @@
+x-card {
+  section {
+    display: block;
+    margin: 5% auto;
+    max-width: 1000px;
+    overflow: visible;
+  }
+}
+
+.product-picker {
+  .content,
+    a,
+    li {
+      margin: 0;
+      padding: 0;
+    }
+    h1 {
+      font-size: 3em;
+      font-weight: normal;
+      line-height: 110%;
+      margin: 1rem auto;
+      text-align: center;
+      width: 70%;
+    }
+    h3 {
+      font-size: 1.3rem;
+      font-weight: normal;
+      padding: 5.5rem 1rem 0px;
+    }
+    .content {
+      text-align: center;
+      overflow: visible;
+    }
+    li {
+      color: #333;
+      display: inline-block;
+      list-style: none;
+    }
+    .product-card {
+      display: inline-block;
+      border-bottom: 1px solid #ddd;
+      border-radius: 6px;
+      box-shadow: 1px 1px 2px rgba(51, 51, 51, .7);
+      height: 9rem;
+      margin: 1rem 1rem 0 0;
+      vertical-align: top;
+      width: 20rem;
+    }
+    .firefox {
+      background: white url(../img/logo-sprite-2x.png) 50% 4% no-repeat;
+    }
+    .android {
+      background: white url(../img/logo-sprite-2x.png) 50% 17.5% no-repeat;
+    }
+    .fxos {
+      background: white url(../img/logo-sprite-2x.png) 50% 44% no-repeat;
+    }
+    .metrofirefox {
+      background: white url(../img/fx-metro.png) 50% 36% no-repeat;
+    }
+}
+
+@media only screen and (max-width: 1024px) {
+  .product-picker {
+    .product-card {
+      width: 15rem;
+    }
+  }
+}
+
+@media only screen and (max-width: 640px) {
+  .product-picker {
+    h3 {
+      font-size: 1rem;
+      padding: 4rem 1rem 0px;
+    }
+    .product-card {
+      height: 8rem;
+      width: 8rem;
+    }
+    .firefox {
+      background-position: 50% 3%;
+      background-size: 190px;
+    }
+    .android {
+      background-size: 190px;
+    }
+    .fxos {
+      background-size: 190px;
+    }
+    .metrofirefox {
+      background-size: 80px;
+    }
+    .firefox,
+    .fxos,
+    .metrofirefox {
+      h3 {
+        padding: 4.5rem 1rem 0px;
+      }
+    }
+  }
+}

fjord/feedback/templates/feedback/cyoa.html

@@ -8,30 +8,27 @@
   {{ js('singlecard') }}
 {% endblock %}
 
+{% block site_css %}
+  {{ css('product_picker') }}
+{% endblock %}
+
 {% block body %}
   <x-deck selected-index=0>
     <x-card id="picker">
-      <x-appbar heading="Which product?" subheading=""></x-appbar>
+    <x-appbar>
+        <header>{{ _('Select A Product To Leave Feedback') }}</header>
+      </x-appbar>
 
-      <section>
-        <p>
-          Here's a list of products you can leave feedback for:
-        </p>
-
-        <div class="content">
+      <section class="product-picker">
+        <ul class="content">
           {% for prod in products %}
-            <p>
-              <a href="{{ url('feedback', product=prod.slug) }}">{{ prod.display_name }}</a>
-            </p>
+            <a href="{{ url('feedback', product=prod.slug) }}" class="product-card {{ prod.slug }}">
+              <li>
+                <h3>{{ prod.display_name }}</h3>
+              </li>
+            </a>
           {% endfor %}
-        </div>
-
-        <aside>
-          <div>
-            Note: This is a prototype page and thus is not localized so as
-            to reduce l10n work.
-          </div>
-        </aside>
+        </ul>
       </section>
     </x-card>
   </x-deck>

fjord/settings/base.py

@@ -228,6 +228,15 @@
             'css/mobile/base.less',
             'css/generic_feedback.less',
         ),
+        'product_picker': (
+            'css/lib/normalize.css',
+            'css/lib/brick-1.0.0.byob.min.css',
+            # FIXME - This should become feedback.less and move out of
+            # mobile/.
+            'css/mobile/base.less',
+            'css/generic_feedback.less',
+            'css/product_picker.less',
+        ),
         'dashboard': (
             'css/ui-lightness/jquery-ui.css',
             'css/lib/normalize.css',