Graph: navigation with keyboard

app/assets/javascripts/graph.js

+function initGraphNav() { 
+  $("body").keydown(function(e) {
+    if(e.keyCode == 37) { // left
+      $(".graph svg").animate({ left: "+=400" });
+    } else if(e.keyCode == 39) { // right
+      $(".graph svg").animate({ left: "-=400" });
+    }
+  });
+}

app/assets/stylesheets/common.scss

@@ -413,18 +413,6 @@ a.project-update.titled {
     top:0;
   }
 }
-/**
- * Project graph
- */
-#holder {
-  cursor: move;
-  height: 70%;
-  overflow: hidden;
-  background:white;
-  border: 1px solid $style_color;
-}
-
-
 input.git_clone_url { 
   width:325px;
@@ -889,3 +877,27 @@ li.note {
     @extend .primary;
   }
 }
+
+.graph_holder { 
+  border: 1px solid #aaa;
+  padding:1px;
+
+
+  h4 { 
+    padding:0 10px;
+    border-bottom: 1px solid #bbb;
+    background:#eee;
+    background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
+    background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
+    background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
+    background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
+  }
+
+  .graph { 
+    background: #f1f1f1;
+    cursor: move;
+    height: 70%;
+    overflow: hidden;
+  }
+
+}

app/views/projects/graph.html.haml

-%h3 Network Graph
+%h3 Project Network Graph
 %br
-#holder.graph
+.graph_holder
+  %h4
+    %small You can move around the graph by using arrow keys.
+  #holder.graph
 :javascript
   var chunk1={commits:#{@commits_json}};
   var days=#{@days_json};
   initGraph();
   $(function(){
     branchGraph($("#holder")[0]);
+    initGraphNav();
   });

vendor/assets/javascripts/branch-graph.js

@@ -37,17 +37,17 @@ function branchGraph(holder) {
         r = Raphael("holder", cw, ch),
         top = r.set();
     var cuday = 0, cumonth = "";
-    r.rect(0, 0, days.length * 20 + 80, 30).attr({fill: "#FFF"});
-    r.rect(0, 30, days.length * 20 + 80, 20).attr({fill: "#f1f1f1"});
+    r.rect(0, 0, days.length * 20 + 80, 30).attr({fill: "#222"});
+    r.rect(0, 30, days.length * 20 + 80, 20).attr({fill: "#444"});
     for (mm = 0; mm < days.length; mm++) {
         if(days[mm] != null){
             if(cuday != days[mm][0]){
-                r.text(10 + mm * 20, 40, days[mm][0]).attr({font: "14px Fontin-Sans, Arial", fill: "#444"});
+                r.text(10 + mm * 20, 40, days[mm][0]).attr({font: "14px Fontin-Sans, Arial", fill: "#DDD"});
                 cuday = days[mm][0]
             }
             if(cumonth != days[mm][1]){
-                r.text(10 + mm * 20, 15, days[mm][1]).attr({font: "14px Fontin-Sans, Arial", fill: "#474D57"});
+                r.text(10 + mm * 20, 15, days[mm][1]).attr({font: "14px Fontin-Sans, Arial", fill: "#EEE"});
                 cumonth = days[mm][1]
             }