From 6a9e35ae26302191f6668270ee0f7666ac557446 Mon Sep 17 00:00:00 2001
From: Hing-Wah Kwok <hw.kwok@gmail.com>
Date: Sun, 13 Jul 2014 23:33:03 +0930
Subject: [PATCH] added links and pictures to the news timeline

---
 views/contracts.handlebars | 8 ++++----
 views/timeline.handlebars  | 8 +++++---
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/views/contracts.handlebars b/views/contracts.handlebars
index c707ea5..dc73fb0 100644
--- a/views/contracts.handlebars
+++ b/views/contracts.handlebars
@@ -21,19 +21,19 @@
 <script type="text/javascript" src="bower_components/d3/d3.js"></script>
 <script>
 
-    var width = 1000,
-        height = 600;
+     var width = $("#graph").width(),
+         aspect = 500 / 950;
 
     var color = d3.scale.category20();
 
     var force = d3.layout.force()
             .charge(-60)
             .linkDistance(60)
-            .size([width, height]);
+            .size([width, width*aspect]);
 
     var svg = d3.select("#graph").append("svg")
             .attr("width", width)
-            .attr("height", height);
+            .attr("height", width*aspect);
 
     d3.json("data/contracts-2013.json", function(error, graph) {
         force.nodes(graph.nodes)
diff --git a/views/timeline.handlebars b/views/timeline.handlebars
index 29e2cc3..a861558 100644
--- a/views/timeline.handlebars
+++ b/views/timeline.handlebars
@@ -18,13 +18,15 @@
 
             for (i = 0; i< data.resultSize; i++) {
                 var article = data.results[i];
-                results[results.length] = {id: article.id, content: article.title, start: article.dateLive};
+                var link = "<a href='" + article.link + "'>" + article.title + "</a>";
+                var thumbnail = "<p><img src='" + article.thumbnailImage.link + "'></p>";
+                results[results.length] = {id: article.id, content: link + thumbnail, start: article.dateLive};
             }
 
             // Configuration for the Timeline
             var options = {
-                start: '2014-04-25',
-                end: '2014-07-01',
+                start: '2014-05-01',
+                end: '2014-05-20',
                 orientation: 'top',
                 height: '300px'
             };