detail page work

media/css/mkt/breadcrumbs.less

@@ -10,6 +10,7 @@
     .light-text-shadow;
     padding-top: 3px;
     width: 100%;
+    overflow: hidden;
     ol {
         list-style: none;
         padding: 0;

media/css/mkt/detail.less

@@ -231,15 +231,6 @@ h1 .num {
             background: white;
             padding: 8px;
             margin: 0 16px;
-            display: table;
-            em {
-                display: table-row;
-                width: 100%;
-            }
-            span {
-                display: table-cell;
-                vertical-align: middle;
-            }
             img {
                 display: block;
                 margin: auto;
@@ -394,19 +385,35 @@ h1 .num {
 
 //4 columns
 @media (max-width: @4col) {
-    .description {
+    #page > .description {
         border-width: 1px 0;
-        padding: 16px;
+        padding: 15px 40px 15px 10px;
+    }
+    #upsell {
+        display: none;
+    }
+    #reviews {
+        display: none;
     }
     .product-details {
+        .visual {
+            margin: 0 10px 10px 0;
+        }
         .vitals,
         .actions {
             float: none;
             width: 100%;
         }
+        .actions {
+            margin: 10px auto;
+        }
         .vitals {
             margin: 0;
             max-width: 100%;
+            h1 {
+                font-size: 24px;
+                line-height: 24px;
+            }
         }
     }
     .support ul {
@@ -435,16 +442,4 @@ h1 .num {
 
 // 3 columns
 @media (max-width: @3col) {
-    .product-details {
-        .visual {
-        }
-        .vitals {
-            float: none;
-        }
-        .actions {
-            float: none;
-            clear: both;
-            .width(3);
-        }
-    }
 }

media/css/mkt/lib.less

@@ -21,7 +21,7 @@
 
 //Breakpoints
 @3col: 400px;
-@4col: 480px;
+@4col: 600px;
 @7col: 672px;
 @10col: 1024px;
 

media/js/mkt/init.js

@@ -11,6 +11,9 @@ var z = {
     canInstallApps: true
 };
 
+z.prefixUpper= z.prefix[0].toUpperCase() + z.prefix.substr(1);
+
+
 (function() {
     _.extend(z, {'nav': BrowserUtils()});
     if (!z.nav.browser.firefox ||
@@ -20,8 +23,6 @@ var z = {
     }
 })();
 
-
-
 // Initialize webtrends tracking.
 z.page.on('fragmentloaded', webtrendsAsyncInit);
 

media/js/mkt/slider.js

@@ -20,12 +20,14 @@
     function touchSlider() {
         var $el = $(this),
             $ul = $('ul', $el).eq(0),
+            ulRaw = $ul[0],
             startX,
             newX,
             prevX,
             currentX = 0;
             lastMove = 0;
             contentWidth = 0,
+            prop = z.prefixUpper + 'Transform',
             sliderWidth = $el.outerWidth();
         $ul.find('li').each(function() {
             contentWidth += $(this).outerWidth();
@@ -44,13 +46,10 @@
         });
         $el.bind('touchmove', function(e) {
             // e.preventDefault();
-            var oe = e.originalEvent;
-            var eX = oe.targetTouches[0].pageX;
             prevX = newX;
-            newX = currentX + (eX - startX);
-            $ul.css('-moz-transform', 'translate3d(' + newX + 'px, 0, 0)');
-            $ul.css('-webkit-transform', 'translate3d(' + newX + 'px, 0, 0)');
-            lastMove = oe.timeStamp;
+            newX = currentX + (e.originalEvent.targetTouches[0].pageX - startX);
+            ulRaw.style[prop] = 'translate3d(' + newX + 'px, 0, 0)';
+            lastMove = e.originalEvent.timeStamp;
         });
         $el.bind('touchend', function(e) {
             var oe = e.originalEvent;

mkt/detail/templates/detail/app.html

@@ -171,7 +171,7 @@
             <li>
               <a class="screenshot thumbnail{{ ' video' if preview.filetype == 'video/webm' }}"
                  href="{{ preview.image_url }}" title="{{ preview.caption }}">
-                <em><span><img src="{{ preview.thumbnail_url }}"></span></em>
+                <img src="{{ preview.thumbnail_url }}">
               </a>
             </li>
           {%- endfor -%}