fancy slider

media/css/mkt/detail.less

@@ -1,7 +1,7 @@
 @import 'lib';
 
 .button {
-    padding: 4px 8px;
+    padding: 8px;
     .border-radius(8px);
     display: block;
     border: 1px solid black;
@@ -14,21 +14,27 @@
 .product-details {
     .actions {
         float: right;
+        margin-bottom: 16px;
     }
     .icon {
     }
     .vitals {
         float: left;
     }
-    .description {
-        clear: both;
-    }
     .visual {
         float: left;
         width: 96px;
         height: 100px;
     }
 }
+.description {
+    clear: both;
+    padding: 16px;
+    p {
+        .max-width(10);
+        margin: 0 auto;
+    }
+}
 
 .compat-list {
     padding: 0;
@@ -51,12 +57,10 @@
 
 //4 columns
 @media (max-width: @4col) {
-    .product-details {
-        .description {
-            border: 1px solid black;
-            border-width: 1px 0;
-            padding: 8px 0;
-        }
+    .description {
+        border: 1px solid black;
+        border-width: 1px 0;
+        padding: 16px;
     }
 }
 

media/css/mkt/lib.less

@@ -9,11 +9,14 @@
 .width(@cols:1) {
     width: (@cols * (@column + @gutter) - @gutter) * @px;
 }
+.max-width(@cols:1) {
+    max-width: (@cols * (@column + @gutter) - @gutter) * @px;
+}
 
 //Breakpoints
 @3col: 440px;
-@4col: 600px;
-@7col: 1024px;
+@4col: 750px;
+@7col: 1100px;
 
 
 // Colors

media/css/mkt/site.less

@@ -18,7 +18,6 @@ body {
         }
         &.full {
             width: 100%;
-            padding: 0 16px;
         }
     }
 }

media/css/mkt/slider.less

@@ -0,0 +1,40 @@
+@import 'lib';
+
+.slider {
+    display: block;
+    position: relative;
+    overflow: hidden;
+    padding: 16px 0;
+    max-width: 100%;
+
+    ul {
+        white-space: nowrap;
+        margin: 0;
+        padding: 0;
+        -webkit-transition: .5s -webkit-transform ease-out;
+        -moz-transition: .5s -moz-transform ease-out;
+        &.panning {
+            -webkit-transition: none;
+            -moz-transition: none;
+        }
+    }
+    li {
+        list-style-type: none;
+        display: inline-block;
+        margin: 0;
+        padding: 0;
+        a {
+            display: block;
+            width: 200px;
+            height: 150px;
+            background: white;
+            border: 1px solid black;
+            padding: 8px;
+            margin-right: 16px;
+            img {
+                display: block;
+                margin: auto;
+            }
+        }
+    }
+}

media/js/mkt/slider.js

@@ -0,0 +1,74 @@
+window.onerror = window.dbg = function(e) {
+    document.querySelector('h1').innerHTML = e;
+}
+
+function slider(el) {
+    var $el = $(el),
+        $ul = $('ul', $el).eq(0),
+        startX,
+        newX,
+        prevX,
+        currentX = 0;
+        lastMove = 0;
+        contentWidth = 0,
+        sliderWidth = $el.outerWidth();
+    $ul.find('li').each(function() {
+        contentWidth += $(this).outerWidth();
+    });
+    var maxScroll = sliderWidth - contentWidth;
+    $el.find('img').bind('mousedown mouseup mousemove', function(e) {
+        e.preventDefault();
+    })
+    $el.bind('touchstart', function(e) {
+        // e.preventDefault();
+        var oe = e.originalEvent;
+        startX = oe.touches[0].pageX;
+        $ul.addClass('panning');
+        $ul.css('-webkit-transition-timing', null)
+        lastMove = oe.timeStamp;
+    });
+    $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;
+    });
+    $el.bind('touchend', function(e) {
+        // dbg("maxScroll: " + maxScroll);
+        var oe = e.originalEvent;
+        var eX = oe.changedTouches[0].pageX;
+        newX = currentX + (eX - startX);
+        var dist = newX - prevX;
+        if (Math.abs(startX - newX) < 10) {
+            return true;
+        }
+        e.preventDefault();
+        var time = oe.timeStamp - lastMove;
+        var finalX = newX + (dist * 350 / time);
+        // if (finalX > 0 || finalX < contentWidth) {
+        //     var overShoot = Math.abs(finalX > 0 ? finalX : (contentWidth - finalX));
+        //     var after_finalX = Math.min(Math.max(finalX, maxScroll), 0);
+        //     $ul.one('webkitTransitionEnd', function() {
+        //         $ul.css('-webkit-transform', 'translate3d(' + after_finalX + 'px, 0, 0)');
+        //         currentX = after_finalX;
+        //     });
+        // } else {
+            finalX = Math.min(Math.max(finalX, maxScroll), 0);
+        // }
+        currentX = finalX;
+        $ul.removeClass('panning');
+        $ul.css('-moz-transform', 'translate3d(' + currentX + 'px, 0, 0)');
+        $ul.css('-webkit-transform', 'translate3d(' + currentX + 'px, 0, 0)');
+    });
+    $(window).bind('saferesize', function() {
+        sliderWidth = $el.outerWidth();
+        maxScroll = sliderWidth - contentWidth;
+        document.title = (new Date()).getTime();
+    });
+}
+
+slider($('.slider')[0]);

mkt/asset_bundles.py

@@ -69,6 +69,7 @@ CSS = {
         'css/mkt/reset.less',
         'css/mkt/site.less',
         'css/mkt/detail.less',
+        'css/mkt/slider.less',
     ),
     'marketplace-experiments': (
         'marketplace-experiments/css/reset.less',
@@ -138,6 +139,7 @@ JS = {
     ),
     'mkt': (
         'js/lib/jquery-1.7.1.js',
+        'js/mkt/slider.js',
     ),
     'marketplace-experiments': (
         'js/marketplace-experiments/jquery-1.7.1.min.js',

mkt/templates/mkt/detail.html

@@ -22,12 +22,12 @@
       <a id="purchase" href="#" class="button">FREE</a>
     </div>
   </section>
-  <section class="full">
-    <p class="description">{{ product.description }}</p>
+  <section class="full description">
+    <p>{{ product.description }}</p>
   </section>
 
   {% if product.all_previews|length > 0 %}
-    <section class="previews slider row">
+    <section class="previews slider full">
       <ul>
         {%- for preview in product.all_previews -%}
           <li>