Determine network height based on window size

Dmitriy Zaporozhets
1 parent 6aa34c0e
Showing 3 changed files with 22 additions and 15 deletions Show diff stats
app/assets/javascripts/network.js.coffee
app/assets/stylesheets/sections/graph.scss
app/views/projects/network/show.html.haml
@@ -0,0 +1,11 @@
+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
-.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;
 = 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}'
-  });
+  })
@@ -0,0 +1,11 @@		@@ -0,0 +1,11 @@
	1	+class Network
	2	+ constructor: (opts) ->
	3	+ $("#filter_ref").click ->
	4	+ $(this).closest('form').submit()
	5	+
	6	+ branch_graph = new BranchGraph($(".network-graph"), opts)
	7	+
	8	+ vph = $(window).height() - 250
	9	+ $('.network-graph').css 'height': (vph + 'px')
	10	+
	11	+@Network = Network