initial layout work for detail page (bug 734435)

media/css/mkt/detail.less

@@ -1,7 +1,45 @@
 @import 'lib';
 
-.product-details {
+.button {
+    padding: 4px 8px;
+    .border-radius(8px);
+    display: block;
+    border: 1px solid black;
+    background: #888;
+    text-align: center;
+    color: #fff;
+    text-decoration: none;
+}
 
+.product-details {
+    .actions {
+        float: right;
+    }
+    .icon {
+    }
+    .vitals {
+        float: left;
+    }
+    .description {
+        clear: both;
+    }
+    .visual {
+        float: left;
+        width: 96px;
+        height: 100px;
+    }
+}
+
+.compat-list {
+    padding: 0;
+    display: block;
+    li {
+        height: 16px;
+        line-height: 16px;
+        display: inline-block;
+        padding-left: 4px;
+        border-left: 16px solid black;
+    }
 }
 
 // 7 columns
@@ -21,6 +59,21 @@
 // 3 columns
 @media (max-width: @3col) {
     .product-details {
-
+        .visual {
+            .width(1);
+        }
+        .vitals {
+            .width(2);
+        }
+        .actions {
+            float: none;
+            clear: both;
+        }
+    }
+    .compat-list {
+        li {
+            width: 0;
+            overflow: hidden;
+        }
     }
 }

media/css/mkt/lib.less

@@ -11,8 +11,8 @@
 }
 
 //Breakpoints
-@3col: 640px;
-@4col: 800px;
+@3col: 440px;
+@4col: 600px;
 @7col: 1024px;
 
 

mkt/detail/views.py

@@ -20,9 +20,7 @@ def detail(request, addon):
     """Product details page."""
 
     ctx = {
-        'addon': addon,
-        'review_form': ReviewForm(),
-        'reviews': Review.objects.latest().filter(addon=addon),
+        'product': addon,
     }
 
     return jingo.render(request, 'mkt/detail.html', ctx)

mkt/settings.py

@@ -57,6 +57,7 @@ MIDDLEWARE_CLASSES += (
     'amo.middleware.NoConsumerMiddleware',
 )
 
+TEMPLATE_DIRS += (path('mkt/templates'),)
 TEMPLATE_CONTEXT_PROCESSORS = list(TEMPLATE_CONTEXT_PROCESSORS)
 TEMPLATE_CONTEXT_PROCESSORS.remove('amo.context_processors.global_settings')
 TEMPLATE_CONTEXT_PROCESSORS += [

mkt/templates/mkt/detail.html

@@ -0,0 +1,41 @@
+{% extends 'mkt/base.html' %}
+
+{% block content %}
+  <section class="product-details">
+    <div class="visual">
+      <img class="icon" src="{{ product.get_icon_url(64) }}" />
+    </div>
+    <div class="vitals">
+      <h2>{{ product.name }}</h2>
+      <h3 class="authors">{{ users_list(product.listed_authors) }}</h3>
+      {% if product.device_types %}
+        <ul class="compat-list">
+          {% for device in product.device_types %}
+            <li class="{{ device.class_name }}">
+              {{ device.name }}
+            </li>
+          {% endfor %}
+        </ul>
+      {% endif %}
+    </div>
+    <div class="actions">
+      <a id="purchase" href="#" class="button">FREE</a>
+    </div>
+    <p class="description">{{ product.description }}</p>
+  </section>
+
+  {% if product.all_previews|length > 0 %}
+    <section class="previews slider row">
+      <ul>
+        {%- for preview in product.all_previews -%}
+          <li>
+            <a class="screenshot thumbnail" rel="jquery-lightbox"
+               href="{{ preview.image_url }}" title="{{ preview.caption }}">
+              <img src="{{ preview.thumbnail_url }}">
+            </a>
+          </li>
+        {%- endfor -%}
+      </ul>
+    </section>
+  {% endif %}
+{% endblock %}

templates/marketplace-experiments/fragment.html

@@ -1,2 +1,3 @@
+<!-- fragment -->
 {% block content %}
 {% endblock %}

templates/mkt/detail.html

@@ -1,32 +0,0 @@
-{% extends 'mkt/base.html' %}
-
-{% block content %}
-  <section>
-    <img alt="" src="{{ addon.get_icon_url(64) }}" />
-    <h2>{{ addon.name }}</h2>
-    <h3 class="authors">{{ users_list(addon.listed_authors) }}</h3>
-    <ul class="unstyled compatibility-list">
-      <li><span class="label">Phones</span></li>
-      <li><span class="label">Tablets</span></li>
-    </ul>
-    <a id="purchase" class="button">FREE</a>
-    <p class="description">{{ addon.description }}</p>
-  </section>
-
-  {% if addon.type != amo.ADDON_PERSONA %}
-    {% if addon.all_previews|length > 0 %}
-      <section class="previews slider row">
-        <ul>
-          {%- for preview in addon.all_previews -%}
-            <li>
-              <a class="screenshot thumbnail" rel="jquery-lightbox"
-                 href="{{ preview.image_url }}" title="{{ preview.caption }}">
-                <img src="{{ preview.thumbnail_url }}">
-              </a>
-            </li>
-          {%- endfor -%}
-        </ul>
-      </section>
-    {% endif %}
-  {% endif %}
-{% endblock %}