--- a/integ/css/iri-buzz.css Fri Apr 12 17:31:27 2013 +0200
+++ b/integ/css/iri-buzz.css Mon Apr 15 16:34:31 2013 +0200
@@ -1,9 +1,33 @@
.wrap-buzz{padding-top: 80px;}
-.timer-bar{width: 500px; height: 10px; border: 1px solid #ffd;}
-.timer-bar-value{width: 200px; height: 100%; background-color: #aaa;}
-.hours li{float: left;}
+.timeline-head{position: fixed; width:100%; z-index:10; text-align: center;}
+.timeline-head-wrap{display: inline-block;}
+.timer-wrap{float:left;margin-right:34px;}
+.timer-bar{width: 500px; height: 8px; background-color: #151515; border-bottom: 1px solid #474747;}
+.timer-bar-value{width: 200px; height: 100%; background-color: #6b6b6b;-webkit-box-shadow: inset 0px 1px 1px 0px #8d8d8d;box-shadow: inset 0px 1px 1px 0px #8d8d8d;}
+.hours li{padding-top: 10px;float: left;text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);color:#919191; font-size: 12px;}
+.hours li:last-child{float: right; margin-right: 0;}
+a.rejouer{float:left;width: 92px; height: 32px; display: inline-block; text-align: center; line-height: 32px; font-size: 11px; font-weight: bold;text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.75);-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.75);box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.75);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;background: #126ae3;background: -moz-linear-gradient(top, #126ae3 0%, #1899e1 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#126ae3), color-stop(100%,#1899e1)); background: -webkit-linear-gradient(top, #126ae3 0%,#1899e1 100%);background: -o-linear-gradient(top, #126ae3 0%,#1899e1 100%); background: -ms-linear-gradient(top, #126ae3 0%,#1899e1 100%); background: linear-gradient(to bottom, #126ae3 0%,#1899e1 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#126ae3', endColorstr='#1899e1',GradientType=0 ); /* IE6-9 */}
+a.rejouer:hover{background: #1899e1;background: -moz-linear-gradient(top, #1899e1 0%, #126ae3 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1899e1), color-stop(100%,#126ae3));background: -webkit-linear-gradient(top, #1899e1 0%,#126ae3 100%);background: -o-linear-gradient(top, #1899e1 0%,#126ae3 100%);background: -ms-linear-gradient(top, #1899e1 0%,#126ae3 100%);background: linear-gradient(to bottom, #1899e1 0%,#126ae3 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1899e1', endColorstr='#126ae3',GradientType=0 );}
.posters{ margin-top:-7px; margin-left: 5px;}
.posters li{float: left;width: 100px; height: 130px;overflow: hidden;margin-right: 10px;}
-.posters img{}
\ No newline at end of file
+.posters img{}
+
+#data-viz{padding-top: 50px;}
+
+.comment{-webkit-border-radius: 4px;border-radius: 4px;border:2px solid #323232;width: 470px; min-height: 80px; background-color:rgba(0,0,0,.9); padding-top: 12px;}
+.comment-info{margin-bottom: 8px;}
+.comment .date{color: #626262; font-size: 10px;}
+.comment .username{color: #ffb500; font-size: 15px; font-weight: bold;}
+.comment .avatar{margin-left: 10px;float: left;width: 50px; height: 50px; border:1px solid #a4a3a8; overflow: hidden;}
+.comment-right{padding-bottom: 12px;width: 380px; padding-right: 15px;float: right;}
+.comment .rating{display: inline-block; float: right;}
+.comment .rating li{margin-right: 2px;background: url(../img/review-rating-star-sprite.png) top right no-repeat; width:19px; height: 16px;display: inline-block;}
+.comment .rating li:last-child{margin-right: 0;}
+.rating.rate-1 li:first-child{background-position: top left;}
+.rating.rate-2 li:first-child,.rating.rate-2 li:nth-child(2){background-position: top left;}
+.rating.rate-3 li:first-child,.rating.rate-3 li:nth-child(2),.rating.rate-3 li:nth-child(3){background-position: top left;}
+.rating.rate-4 li:first-child,.rating.rate-4 li:nth-child(2),.rating.rate-4 li:nth-child(3),.rating.rate-4 li:nth-child(4){background-position: top left;}
+.rating.rate-5 li{background-position: top left;}
+.comment p{color: #ededed; font-size: 13px; }
\ No newline at end of file
Binary file integ/img/review-rating-star-sprite.png has changed
--- a/integ/iri-buzz.html Fri Apr 12 17:31:27 2013 +0200
+++ b/integ/iri-buzz.html Mon Apr 15 16:34:31 2013 +0200
@@ -53,21 +53,54 @@
<div class="wrap-buzz">
- <div class="timer-wrap">
- <div class="timer-bar">
- <div class="timer-bar-value"></div>
- <ul class="hours">
- <li>0h</li>
- <li>6h</li>
- <li>12h</li>
- <li>18h</li>
- <li>24h</li>
- </ul>
+ <div class="comment clearfix">
+ <div class="avatar"><img src="img/profil_50_1.jpg" alt="" /></div>
+
+ <div class="comment-right">
+ <div class="comment-info clearfix">
+ <span class="username">Angelo Chiacchio</span>
+ <span class="date">il y a 23 heures</span>
+ <ul class="rating rate-5">
+ <li></li><li></li><li></li><li></li><li></li>
+ </ul>
+ </div>
+ <p class="review-content">J’ai adoré ce film. Il fait sourire et pleurer au meme temps. Bien longtemps qu'on avait pas vu une comédie française aussi hilarante et émouvante.</p>
+ </div>
+
+
+ </div><!-- /comment -->
+
+ <div class="timeline-head clearfix">
+ <div class="timeline-head-wrap">
+ <div class="timer-wrap clearfix">
+ <div class="timer-bar">
+ <div class="timer-bar-value"></div>
+ <ul class="hours">
+ <li>0h</li>
+ <li>2h</li>
+ <li>4h</li>
+ <li>6h</li>
+ <li>8h</li>
+ <li>10h</li>
+ <li>12h</li>
+ <li>14h</li>
+ <li>16h</li>
+ <li>18h</li>
+ <li>20h</li>
+ <li>22h</li>
+ <li>24h</li>
+ </ul>
+ </div>
+ </div>
+ <a href="#" class="rejouer">REJOUER</a>
</div>
</div>
<div id="data-viz"></div>
<ul class="posters clearfix"></ul>
+
+
+
</div>
</section>
@@ -100,6 +133,7 @@
<!-- custom scrollbars plugin -->
<script src="js/jquery.mCustomScrollbar.js"></script>
+
<script type="text/javascript" src="js/script.js"></script>
<!-- IRI -->
--- a/integ/js/iri-buzz.js Fri Apr 12 17:31:27 2013 +0200
+++ b/integ/js/iri-buzz.js Mon Apr 15 16:34:31 2013 +0200
@@ -1,5 +1,41 @@
$(function(){
+/*
+$(window).bind('resize', function(){
+ setSidebarContentHeight();
+});
+setSidebarContentHeight();
+function setSidebarContentHeight(){
+ var newHeight = $(window).height() - $('header').height() - $('footer').height();
+ $(".sidebar .content").css('height', newHeight);
+}
+
+
+$(".central").mCustomScrollbar({
+ advanced:{
+ updateOnContentResize: true
+ }
+});
+
+*/
+function init(){
+ var wWin = ($(window).width()>520) ? $(window).width() : 520;
+ $('.timer-bar').width(wWin - 170);
+
+
+ var wTimerBar = $('.timer-bar').width(),
+ nbIndicator = $('.hours li').length-1;
+ mrIndicator = wTimerBar/ (nbIndicator);
+ $('.timeline-head').css('min-width', wWin);
+ $('.hours li').each(function(k,v){
+ if(k >= nbIndicator - 1) return;
+ var mr = mrIndicator - $('.hours li:last-child').width()/2 - $(v).width()/2;
+ $(v).css('margin-right', mr);
+ });
+}
+
+init();
+
function resizeImg(parentId){
$(parentId+" img").each(function() {
var img = $(this),
@@ -60,7 +96,7 @@
var movies = data.feed.movie;
nbMovies = movies.length;
- bcSettings.width = nbMovies * CONFIG.wChart + 10 * nbMovies;
+ bcSettings.width = nbMovies * CONFIG.wChart + (10 * nbMovies);
$('.posters').css('width', bcSettings.width);
//var wItem = bcSettings.width / nbMovies;
