vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Switch the twitter view to use a carousel

Browse source
This commit is contained in:
Joseph Schorr 2014-04-24 01:18:47 -04:00
parent 4480d2d8e2
commit ad8b72b3aa
3 changed files with 163 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
static/css/quay.css
View file

@ -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 <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;
}

46
static/js/controllers.js
View file

@ -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() {

45
static/partials/landing-normal.html
View file

@ -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="col-md-4">
<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>
<div class="col-md-4">
<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>
</div>
<div class="col-md-4">
<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>
</div>
</div>
<div class="row">
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul>
<li>
<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>
</li>
<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><span class="author">Frank Macreery (@fancyremarker)</span> <a href="https://twitter.com/fancyremarker/statuses/448528623692025857">March 25, 2014</a></blockquote>
</li>
<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">
<div class="col-md-4">
<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>
<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>
<a href="#" class="jcarousel-control jcarousel-control-prev">&lsaquo;</a>
<a href="#" class="jcarousel-control jcarousel-control-next">&rsaquo;</a>
<p class="jcarousel-pagination"></p>
</div>
</div>