Determine network height based on window size

app/assets/javascripts/network.js.coffee

+class Network
+  constructor: (opts) ->
+    $("#filter_ref").click ->
+      $(this).closest('form').submit()
+
+    branch_graph = new BranchGraph($(".network-graph"), opts)
+
+    vph = $(window).height() - 250
+    $('.network-graph').css 'height': (vph + 'px')
+
+@Network = Network

app/assets/stylesheets/sections/graph.scss

-.graph_holder {
+.project-network {
   border: 1px solid #aaa;
   padding: 1px;
-
-  h4 {
-    margin: 0;
+  .tip {
+    color: #888;
+    font-size: 14px;
     padding: 10px;
     border-bottom: 1px solid #bbb;
     @include bg-gray-gradient;
   }
-  .graph {
+  .network-graph {
     background: #f1f1f1;
     height: 500px;
     overflow-y: scroll;

app/views/projects/network/show.html.haml

 = render "head"
-.graph_holder
-  %h4
-    %small You can move around the graph by using the arrow keys.
-  #holder.graph
+.project-network
+  .tip
+    You can move around the graph by using the arrow keys.
+  .network-graph
     .loading.loading-gray
 :javascript
-  var branch_graph;
-  $("#filter_ref").click(function() {
-    $(this).closest('form').submit();
-  });
-  branch_graph = new BranchGraph($("#holder"), {
+  new Network({
     url: '#{project_network_path(@project, @ref, @options.merge(format: :json))}',
     commit_url: '#{project_commit_path(@project, 'ae45ca32').gsub("ae45ca32", "%s")}',
     ref: '#{@ref}',
     commit_id: '#{@commit.id}'
-  });
+  })