update buzz
authorAnthony Ly <anthonyly.com@gmail.com>
Fri, 12 Apr 2013 17:31:27 +0200
changeset 29 6917b55f901f
parent 28 84719280c84d
child 30 a96fd5fdc4b9
update buzz
integ/css/iri-buzz.css
integ/iri-buzz.html
integ/js/iri-buzz.js
--- a/integ/css/iri-buzz.css	Fri Apr 12 15:08:00 2013 +0200
+++ b/integ/css/iri-buzz.css	Fri Apr 12 17:31:27 2013 +0200
@@ -1,4 +1,9 @@
-.wrap-buzz{padding-top: 60px;}
-.posters{border:1px solid #088;}
-.posters li{float: left;}
-.posters img{width: 100px;}
\ No newline at end of file
+.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;}
+
+.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
--- a/integ/iri-buzz.html	Fri Apr 12 15:08:00 2013 +0200
+++ b/integ/iri-buzz.html	Fri Apr 12 17:31:27 2013 +0200
@@ -52,6 +52,20 @@
 		<section class="central">
 
 			<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>
+				</div>
+
 				<div id="data-viz"></div>
 				<ul class="posters clearfix"></ul>
 			</div>
@@ -114,6 +128,8 @@
 <script src="renkan/js/i18n.js"></script>
 <script src="renkan/js/paper-renderer.js"></script>
 
+<!-- IRI -->
+
 <script src="js/vs/_VisualSedimentation.js"></script>
 
 <script src="js/iri-buzz.js"></script>
--- a/integ/js/iri-buzz.js	Fri Apr 12 15:08:00 2013 +0200
+++ b/integ/js/iri-buzz.js	Fri Apr 12 17:31:27 2013 +0200
@@ -1,5 +1,27 @@
 $(function(){
 
+function resizeImg(parentId){
+	$(parentId+" img").each(function() {
+	    var img = $(this),
+	        div = $(this).parent();
+	    img.load(function() {
+	        var iw = img.width(),
+	            ih = img.height(),
+	            dw = div.width(),
+	            dh = div.height(),
+	            scale = Math.max(dw/iw, dh/ih),
+	            niw = iw * scale,
+	            nih = ih * scale;
+	        img.css({
+	            width: niw,
+	            height: nih,
+	            "margin-left": (dw - niw) / 2,
+	            "margin-top": (dh - nih) / 3
+	        });
+	    });
+	});
+}
+
 var CONFIG = {
 	wChart : 100,
 	now : new Date(),
@@ -12,7 +34,7 @@
 	width : 960,
 	height : 400,
 	chart : {
-		spacer : 0
+		spacer : 5
 	},
 	data : {
 		model :[],
@@ -38,7 +60,7 @@
 	
 	var movies = data.feed.movie;
 	nbMovies = movies.length;
-	bcSettings.width = nbMovies * CONFIG.wChart;
+	bcSettings.width = nbMovies * CONFIG.wChart + 10 * nbMovies;
 	$('.posters').css('width', bcSettings.width);
 	//var wItem = bcSettings.width / nbMovies;
 
@@ -77,6 +99,7 @@
 */
 	});
 
+	resizeImg('.posters');
 	barChart = $("#data-viz").vs(bcSettings).data('visualSedimentation');
 
 });