--- 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');
});