From ad8b72b3aad1527872b4a6636056f6038179e3af Mon Sep 17 00:00:00 2001 From: Joseph Schorr Date: Thu, 24 Apr 2014 01:18:47 -0400 Subject: [PATCH] Switch the twitter view to use a carousel --- static/css/quay.css | 94 ++++++++++++++++++++++++++++- static/js/controllers.js | 46 ++++++++++++++ static/partials/landing-normal.html | 45 ++++++++------ 3 files changed, 163 insertions(+), 22 deletions(-) diff --git a/static/css/quay.css b/static/css/quay.css index 93c9bc8f9..2367d2734 100644 --- a/static/css/quay.css +++ b/static/css/quay.css @@ -1351,8 +1351,15 @@ i.toggle-icon:hover { margin-bottom: 10px; } -.tweet-row { - min-height: 300px; +.landing-page .twitter-tweet { + 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