Switch the twitter view to use a carousel

static/css/quay.css

@@ -1351,8 +1351,15 @@ i.toggle-icon:hover {
   margin-bottom: 10px;
 }
 
-.tweet-row {
+.landing-page .twitter-tweet {
-  min-height: 300px;
+  width: 100%;
+  margin: 0px;
+  border: 0px;
+}
+
+
+.landing-page .twitter-tweet .author:before {
+  content: "-";
 }
 
 .follow-button {
@@ -3936,4 +3943,87 @@ pre.command:before {
 .form-change input {
   margin-top: 12px;
   margin-bottom: 12px;
+}
+
+/*
+This is the visible area of you carousel.
+Set a width here to define how much items are visible.
+The width can be either fixed in px or flexible in %.
+Position must be relative!
+*/
+.jcarousel {
+    position: relative;
+    overflow: hidden;
+    margin-left: 30px;
+    margin-right: 30px;
+}
+
+.jcarousel-wrapper {
+    position: relative;
+}
+
+.jcarousel-wrapper .jcarousel-control {
+    font-size: 64px;
+    position: absolute;
+    top: -16px;
+    text-decoration: none !important;
+}
+
+.jcarousel-wrapper .jcarousel-control-prev {
+  left: 0px;
+}
+
+.jcarousel-wrapper .jcarousel-control-next {
+  right: 0px;
+}
+
+/*
+This is the container of the carousel items.
+You must ensure that the position is relative or absolute and
+that the width is big enough to contain all items.
+*/
+.jcarousel ul {
+    width: 20000em;
+    position: relative;
+
+    /* Optional, required in this case since it's a <ul> element */
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+/*
+These are the item elements. jCarousel works best, if the items
+have a fixed width and height (but it's not required).
+*/
+.jcarousel li {
+    /* Required only for block elements like <li>'s */
+    float: left;
+    display: block;
+}
+
+.jcarousel-page {
+  padding: 10px;
+  text-decoration: none !important;
+  font-size: 18px;
+  color: #aaa;
+}
+
+.jcarousel-page.active {
+  color: #428bca;
+}
+
+.jcarousel-page:before {
+  content: "\f10c";
+  font-family: FontAwesome;
+}
+
+.jcarousel-page.active:before {
+  content: "\f111";
+  font-family: FontAwesome;
+}
+
+.jcarousel-pagination {
+  display: block;
+  text-align: center;
 }

static/js/controllers.js

@@ -306,6 +306,52 @@ function LandingCtrl($scope, UserService, ApiService, Features, Config) {
 
   $scope.chromify = function() {
     browserchrome.update();
+
+    var jcarousel = $('.jcarousel');
+
+    jcarousel
+      .on('jcarousel:reload jcarousel:create', function () {
+        var width = jcarousel.innerWidth();
+        jcarousel.jcarousel('items').css('width', width + 'px');
+      })
+      .jcarousel({
+        wrap: 'circular'
+      });
+
+    $('.jcarousel-control-prev')
+      .on('jcarouselcontrol:active', function() {
+        $(this).removeClass('inactive');
+      })
+      .on('jcarouselcontrol:inactive', function() {
+        $(this).addClass('inactive');
+      })
+      .jcarouselControl({
+        target: '-=1'
+      });
+
+    $('.jcarousel-control-next')
+      .on('jcarouselcontrol:active', function() {
+        $(this).removeClass('inactive');
+      })
+      .on('jcarouselcontrol:inactive', function() {
+        $(this).addClass('inactive');
+      })
+      .jcarouselControl({
+        target: '+=1'
+      });
+
+    $('.jcarousel-pagination')
+      .on('jcarouselpagination:active', 'a', function() {
+        $(this).addClass('active');
+      })
+      .on('jcarouselpagination:inactive', 'a', function() {
+        $(this).removeClass('active');
+      })
+      .jcarouselPagination({
+        'item': function(page, carouselItems) {
+          return '<a href="javascript:void(0)" class="jcarousel-page"></a>';
+        }
+      });
   };
 
   $scope.getEnterpriseLogo = function() {

static/partials/landing-normal.html

@@ -150,27 +150,32 @@
   <div class="landing-section">
     <h2>See what people are saying about Quay.io</h2>
     <div class="container">
-      <div class="row tweet-row">
+      <div class="row">
-        <div class="col-md-4">
+        <div class="jcarousel-wrapper">
-          <blockquote class="twitter-tweet" data-conversation="none" lang="en"><p>Pushing Dockerfile changes to Github and having <a href="https://twitter.com/quayio">@quayio</a> build the <a href="https://twitter.com/docker">@docker</a> image/container for you is extremely awesome.</p>&mdash; Ross Timson (@rosstimson) <a href="https://twitter.com/rosstimson/statuses/451052618685882368">April 1, 2014</a></blockquote>
+          <div class="jcarousel">
-        </div>
+            <ul>
-        <div class="col-md-4">
+              <li>
-          <blockquote class="twitter-tweet" data-conversation="none" lang="en"><p><a href="https://twitter.com/quayio">@quayio</a> releases Docker build flair! <a href="http://t.co/72ULgveLj4">pic.twitter.com/72ULgveLj4</a></p>&mdash; Frank Macreery (@fancyremarker) <a href="https://twitter.com/fancyremarker/statuses/448528623692025857">March 25, 2014</a></blockquote>
+                <blockquote class="twitter-tweet" data-conversation="none" lang="en"><p>Pushing Dockerfile changes to Github and having <a href="https://twitter.com/quayio">@quayio</a> build the <a href="https://twitter.com/docker">@docker</a> image/container for you is extremely awesome.</p><span class="author">Ross Timson (@rosstimson)</span> <a href="https://twitter.com/rosstimson/statuses/451052618685882368">April 1, 2014</a></blockquote>
-        </div>
+              </li>
-        <div class="col-md-4">
+              <li>
-          <blockquote class="twitter-tweet" data-conversation="none" lang="en"><p>Just started playing with <a href="https://twitter.com/quayio">@quayio</a> builds tied to <a href="https://twitter.com/search?q=%23github&amp;src=hash">#github</a> repo. Really liking it. My first experiment: <a href="https://t.co/2LgyagwTEq">https://t.co/2LgyagwTEq</a></p>&mdash; Joshua Goldie (@jdgoldie) <a href="https://twitter.com/jdgoldie/statuses/446622958040408064">March 20, 2014</a></blockquote>
+                <blockquote class="twitter-tweet" data-conversation="none" lang="en"><p><a href="https://twitter.com/quayio">@quayio</a> releases Docker build flair! <a href="http://t.co/72ULgveLj4">pic.twitter.com/72ULgveLj4</a></p><span class="author">Frank Macreery (@fancyremarker)</span> <a href="https://twitter.com/fancyremarker/statuses/448528623692025857">March 25, 2014</a></blockquote>
-        </div>
+              </li>
-      </div>
+              <li>
+                <blockquote class="twitter-tweet" data-conversation="none" lang="en"><p>Just started playing with <a href="https://twitter.com/quayio">@quayio</a> builds tied to <a href="https://twitter.com/search?q=%23github&amp;src=hash">#github</a> repo. Really liking it. My first experiment: <a href="https://t.co/2LgyagwTEq">https://t.co/2LgyagwTEq</a></p><span class="author">Joshua Goldie (@jdgoldie)</span> <a href="https://twitter.com/jdgoldie/statuses/446622958040408064">March 20, 2014</a></blockquote>
+              </li>
+              <li>
+                <blockquote class="twitter-tweet" data-conversation="none" lang="en"><p>Great guys <a href="https://twitter.com/quayio">@quayio</a>. If you haven’t tried it, do.</p><span class="author">Evan Hazlett (@ehazlett)</span> <a href="https://twitter.com/ehazlett/statuses/442351806161510400">March 8, 2014</a></blockquote>
+              </li>
+              <li>
+                <blockquote class="twitter-tweet" data-conversation="none" lang="en"><p><a href="https://twitter.com/quayio">@quayio</a> has awesome support. <a href="https://twitter.com/search?q=%23awesomeTool&amp;src=hash">#awesomeTool</a> <a href="https://twitter.com/search?q=%23awesomeTeam&amp;src=hash">#awesomeTeam</a></p><span class="author">Jon Morehouse (@JonMorehouse)</span> <a href="https://twitter.com/JonMorehouse/statuses/441719785055739904">March 6, 2014</a></blockquote>
+              </li>
+            </ul>
+          </div>
 
-      <div class="row tweet-row">
+          <a href="#" class="jcarousel-control jcarousel-control-prev">&lsaquo;</a>
-        <div class="col-md-4">
+          <a href="#" class="jcarousel-control jcarousel-control-next">&rsaquo;</a>
-          <blockquote class="twitter-tweet" data-conversation="none" lang="en"><p>Great guys <a href="https://twitter.com/quayio">@quayio</a>. If you haven’t tried it, do.</p>&mdash; Evan Hazlett (@ehazlett) <a href="https://twitter.com/ehazlett/statuses/442351806161510400">March 8, 2014</a></blockquote>
+          
-        </div>
+          <p class="jcarousel-pagination"></p>
-        <div class="col-md-4">
-          <blockquote class="twitter-tweet" data-conversation="none" lang="en"><p><a href="https://twitter.com/quayio">@quayio</a> has awesome support. <a href="https://twitter.com/search?q=%23awesomeTool&amp;src=hash">#awesomeTool</a> <a href="https://twitter.com/search?q=%23awesomeTeam&amp;src=hash">#awesomeTeam</a></p>&mdash; Jon Morehouse (@JonMorehouse) <a href="https://twitter.com/JonMorehouse/statuses/441719785055739904">March 6, 2014</a></blockquote>
-        </div>
-        <div class="col-md-4">
-          <blockquote class="twitter-tweet" data-conversation="none" lang="en"><p><a href="https://twitter.com/quayio">@quayio</a> Have to say, your tutorial was pretty well made, waiting and providing feedback while you push (instead of pressing next). Kudos :)</p>&mdash; Stian Eikeλand (@stianeikeland) <a href="https://twitter.com/stianeikeland/statuses/441147669356896256">March 5, 2014</a></blockquote>
         </div>
       </div>