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 @@
	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
...	...
1		-.graph_holder {
	1	+.project-network {
2	2	border: 1px solid #aaa;
3	3	padding: 1px;
4	4
5		-
6		- h4 {
7		- margin: 0;
	5	+ .tip {
	6	+ color: #888;
	7	+ font-size: 14px;
8	8	padding: 10px;
9	9	border-bottom: 1px solid #bbb;
10	10	@include bg-gray-gradient;
11	11	}
12	12
13		- .graph {
	13	+ .network-graph {
14	14	background: #f1f1f1;
15	15	height: 500px;
16	16	overflow-y: scroll;
...	...
1	1	= render "head"
2		-.graph_holder
3		- %h4
4		- %small You can move around the graph by using the arrow keys.
5		- #holder.graph
	2	+.project-network
	3	+ .tip
	4	+ You can move around the graph by using the arrow keys.
	5	+ .network-graph
6	6	.loading.loading-gray
7	7
8	8	:javascript
9		- var branch_graph;
10		- $("#filter_ref").click(function() {
11		- $(this).closest('form').submit();
12		- });
13		- branch_graph = new BranchGraph($("#holder"), {
	9	+ new Network({
14	10	url: '#{project_network_path(@project, @ref, @options.merge(format: :json))}',
15	11	commit_url: '#{project_commit_path(@project, 'ae45ca32').gsub("ae45ca32", "%s")}',
16	12	ref: '#{@ref}',
17	13	commit_id: '#{@commit.id}'
18		- });
	14	+ })
...	...