From: Tom Clegg <tom@clinicalfuture.com>
Date: Fri, 1 Feb 2013 01:51:58 +0000 (-0800)
Subject: add bootstrap
X-Git-Tag: 1.1.0~3374^2~87
X-Git-Url: https://git.arvados.org/arvados.git/commitdiff_plain/4fe932f760617054c213ee02d1fe7ab14461874c

add bootstrap
---

diff --git a/Gemfile b/Gemfile
index caba64e269..524e65e510 100644
--- a/Gemfile
+++ b/Gemfile
@@ -22,6 +22,7 @@ group :assets do
 end
 
 gem 'jquery-rails'
+gem 'anjlab-bootstrap-rails', '>= 2.2', :require => 'bootstrap-rails'
 
 # To use ActiveModel has_secure_password
 # gem 'bcrypt-ruby', '~> 3.0.0'
diff --git a/Gemfile.lock b/Gemfile.lock
index 38bb22fb0d..e8f6fb5fa4 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -28,6 +28,9 @@ GEM
     activesupport (3.2.11)
       i18n (~> 0.6)
       multi_json (~> 1.0)
+    anjlab-bootstrap-rails (2.2.2.1)
+      railties (>= 3.0)
+      sass (>= 3.2)
     arel (3.0.2)
     builder (3.0.4)
     capistrano (2.14.1)
@@ -133,6 +136,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  anjlab-bootstrap-rails (>= 2.2)
   coffee-rails (~> 3.2.1)
   jquery-rails
   passenger
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 9097d830e2..5733810651 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -12,4 +12,5 @@
 //
 //= require jquery
 //= require jquery_ujs
+//= require twitter/bootstrap
 //= require_tree .
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 91dfe2497c..0e11d7b09e 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -9,6 +9,8 @@
  * compiled file, but it's generally better to create a new file per style scope.
  *
  *= require_self
+ *= require twitter/bootstrap
+ *= require twitter/bootstrap-responsive
  *= require_tree .
  */
 
diff --git a/app/controllers/collections_controller.rb b/app/controllers/collections_controller.rb
index 335dc30649..f14b82fe9d 100644
--- a/app/controllers/collections_controller.rb
+++ b/app/controllers/collections_controller.rb
@@ -1,6 +1,10 @@
 class CollectionsController < ApplicationController
   before_filter :ensure_current_user_is_admin
 
+  def graph
+    index
+  end
+
   def index
     @links = Link.where(head_kind: 'orvos#collection') |
       Link.where(tail_kind: 'orvos#collection')
diff --git a/app/views/collections/graph.html.erb b/app/views/collections/graph.html.erb
new file mode 100644
index 0000000000..87f07eae18
--- /dev/null
+++ b/app/views/collections/graph.html.erb
@@ -0,0 +1,181 @@
+<% content_for :head do %>
+<%= javascript_include_tag '/d3.v3.min.js' %>
+
+    <style type="text/css">
+
+path.link {
+  fill: none;
+  stroke: #666;
+  stroke-width: 1.5px;
+}
+
+path.link.derived_from {
+  stroke: green;
+  stroke-dasharray: 0,4 1;
+}
+
+path.link.can_write {
+  stroke: green;
+}
+
+path.link.member_of {
+  stroke: blue;
+  stroke-dasharray: 0,4 1;
+}
+
+path.link.created {
+  stroke: red;
+}
+
+circle.node {
+  fill: #ccc;
+  stroke: #333;
+  stroke-width: 1.5px;
+}
+
+edgetext {
+  font: 12px sans-serif;
+  pointer-events: none;
+    text-align: center;
+}
+
+text {
+  font: 12px sans-serif;
+  pointer-events: none;
+}
+
+text.shadow {
+  stroke: #fff;
+  stroke-width: 3px;
+  stroke-opacity: .8;
+}
+
+    </style>
+<% end %>
+
+<% content_for :js do %>
+
+jQuery(function($){
+
+    var links = <%= raw d3ify_links(@links).to_json %>;
+
+    var nodes = {};
+
+    // Compute the distinct nodes from the links.
+    links.forEach(function(link) {
+	link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
+	link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
+    });
+
+    var fill_for = {'ldvyl': 'green',
+		    'j58dm': 'red',
+		    '4zz18': 'blue'};
+    jQuery.each(nodes, function(i, node) {
+	var m = node.name.match(/-([a-z0-9]{5})-/)
+	if (m)
+	    node.fill = fill_for[m[1]] || '#ccc';
+	else if (node.name.match(/^[0-9a-f]{32}/))
+	    node.fill = fill_for['4zz18'];
+	else
+	    node.fill = '#ccc';
+    });
+
+    var w = 960,
+    h = 600;
+
+    var force = d3.layout.force()
+	.nodes(d3.values(nodes))
+	.links(links)
+	.size([w, h])
+	.linkDistance(150)
+	.charge(-300)
+	.on("tick", tick)
+	.start();
+
+    var svg = d3.select("body").append("svg:svg")
+	.attr("width", w)
+	.attr("height", h);
+
+    // Per-type markers, as they don't inherit styles.
+    svg.append("svg:defs").selectAll("marker")
+	.data(["member_of", "owner", "derived_from"])
+	.enter().append("svg:marker")
+	.attr("id", String)
+	.attr("viewBox", "0 -5 10 10")
+	.attr("refX", 15)
+	.attr("refY", -1.5)
+	.attr("markerWidth", 6)
+	.attr("markerHeight", 6)
+	.attr("orient", "auto")
+	.append("svg:path")
+	.attr("d", "M0,-5L10,0L0,5");
+
+    var path = svg.append("svg:g").selectAll("path")
+	.data(force.links())
+	.enter().append("svg:path")
+	.attr("class", function(d) { return "link " + d.type; })
+	.attr("marker-end", function(d) { return "url(#" + d.type + ")"; });
+
+    var circle = svg.append("svg:g").selectAll("circle")
+	.data(force.nodes())
+	.enter().append("svg:circle")
+	.attr("r", 6)
+	.style("fill", function(d) { return d.fill; })
+	.call(force.drag);
+
+    var text = svg.append("svg:g").selectAll("g")
+	.data(force.nodes())
+	.enter().append("svg:g");
+
+    // A copy of the text with a thick white stroke for legibility.
+    text.append("svg:text")
+	.attr("x", 8)
+	.attr("y", ".31em")
+	.attr("class", "shadow")
+	.text(function(d) { return d.name.replace(/^([0-9a-z]{5}-){2}/,''); });
+
+    text.append("svg:text")
+	.attr("x", 8)
+	.attr("y", ".31em")
+	.text(function(d) { return d.name.replace(/^([0-9a-z]{5}-){2}/,''); });
+
+    var edgetext = svg.append("svg:g").selectAll("g")
+	.data(force.links())
+	.enter().append("svg:g");
+
+    edgetext
+	.append("svg:text")
+	.attr("x","-5em")
+	.attr("y","-0.2em")
+	.text(function(d) { return d.type; });
+
+    // Use elliptical arc path segments to doubly-encode directionality.
+    function tick() {
+	path.attr("d", function(d) {
+	    var dx = d.target.x - d.source.x,
+            dy = d.target.y - d.source.y,
+            // dr = Math.sqrt(dx * dx + dy * dy);
+            dr = 0;
+	    return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
+	});
+
+	circle.attr("transform", function(d) {
+	    return "translate(" + d.x + "," + d.y + ")";
+	});
+
+	text.attr("transform", function(d) {
+	    return "translate(" + d.x + "," + d.y + ")";
+	});
+
+	edgetext.attr("transform", function(d) {
+	    return "translate(" +
+		(d.source.x + d.target.x)/2 + "," +
+		(d.source.y + d.target.y)/2 +
+		")rotate(" +
+		(Math.atan2(d.target.y - d.source.y, d.target.x - d.source.x) * 180 / Math.PI) +
+		")";
+	});
+    }
+
+})(jQuery);
+<% end %>
diff --git a/app/views/collections/index.html.erb b/app/views/collections/index.html.erb
index 87f07eae18..fe4360756f 100644
--- a/app/views/collections/index.html.erb
+++ b/app/views/collections/index.html.erb
@@ -1,181 +1,5 @@
-<% content_for :head do %>
-<%= javascript_include_tag '/d3.v3.min.js' %>
+    <h1>Bootstrap starter template</h1>
+    <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
 
-    <style type="text/css">
-
-path.link {
-  fill: none;
-  stroke: #666;
-  stroke-width: 1.5px;
-}
-
-path.link.derived_from {
-  stroke: green;
-  stroke-dasharray: 0,4 1;
-}
-
-path.link.can_write {
-  stroke: green;
-}
-
-path.link.member_of {
-  stroke: blue;
-  stroke-dasharray: 0,4 1;
-}
-
-path.link.created {
-  stroke: red;
-}
-
-circle.node {
-  fill: #ccc;
-  stroke: #333;
-  stroke-width: 1.5px;
-}
-
-edgetext {
-  font: 12px sans-serif;
-  pointer-events: none;
-    text-align: center;
-}
-
-text {
-  font: 12px sans-serif;
-  pointer-events: none;
-}
-
-text.shadow {
-  stroke: #fff;
-  stroke-width: 3px;
-  stroke-opacity: .8;
-}
-
-    </style>
-<% end %>
-
-<% content_for :js do %>
-
-jQuery(function($){
-
-    var links = <%= raw d3ify_links(@links).to_json %>;
-
-    var nodes = {};
-
-    // Compute the distinct nodes from the links.
-    links.forEach(function(link) {
-	link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
-	link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
-    });
-
-    var fill_for = {'ldvyl': 'green',
-		    'j58dm': 'red',
-		    '4zz18': 'blue'};
-    jQuery.each(nodes, function(i, node) {
-	var m = node.name.match(/-([a-z0-9]{5})-/)
-	if (m)
-	    node.fill = fill_for[m[1]] || '#ccc';
-	else if (node.name.match(/^[0-9a-f]{32}/))
-	    node.fill = fill_for['4zz18'];
-	else
-	    node.fill = '#ccc';
-    });
-
-    var w = 960,
-    h = 600;
-
-    var force = d3.layout.force()
-	.nodes(d3.values(nodes))
-	.links(links)
-	.size([w, h])
-	.linkDistance(150)
-	.charge(-300)
-	.on("tick", tick)
-	.start();
-
-    var svg = d3.select("body").append("svg:svg")
-	.attr("width", w)
-	.attr("height", h);
-
-    // Per-type markers, as they don't inherit styles.
-    svg.append("svg:defs").selectAll("marker")
-	.data(["member_of", "owner", "derived_from"])
-	.enter().append("svg:marker")
-	.attr("id", String)
-	.attr("viewBox", "0 -5 10 10")
-	.attr("refX", 15)
-	.attr("refY", -1.5)
-	.attr("markerWidth", 6)
-	.attr("markerHeight", 6)
-	.attr("orient", "auto")
-	.append("svg:path")
-	.attr("d", "M0,-5L10,0L0,5");
-
-    var path = svg.append("svg:g").selectAll("path")
-	.data(force.links())
-	.enter().append("svg:path")
-	.attr("class", function(d) { return "link " + d.type; })
-	.attr("marker-end", function(d) { return "url(#" + d.type + ")"; });
-
-    var circle = svg.append("svg:g").selectAll("circle")
-	.data(force.nodes())
-	.enter().append("svg:circle")
-	.attr("r", 6)
-	.style("fill", function(d) { return d.fill; })
-	.call(force.drag);
-
-    var text = svg.append("svg:g").selectAll("g")
-	.data(force.nodes())
-	.enter().append("svg:g");
-
-    // A copy of the text with a thick white stroke for legibility.
-    text.append("svg:text")
-	.attr("x", 8)
-	.attr("y", ".31em")
-	.attr("class", "shadow")
-	.text(function(d) { return d.name.replace(/^([0-9a-z]{5}-){2}/,''); });
-
-    text.append("svg:text")
-	.attr("x", 8)
-	.attr("y", ".31em")
-	.text(function(d) { return d.name.replace(/^([0-9a-z]{5}-){2}/,''); });
-
-    var edgetext = svg.append("svg:g").selectAll("g")
-	.data(force.links())
-	.enter().append("svg:g");
-
-    edgetext
-	.append("svg:text")
-	.attr("x","-5em")
-	.attr("y","-0.2em")
-	.text(function(d) { return d.type; });
-
-    // Use elliptical arc path segments to doubly-encode directionality.
-    function tick() {
-	path.attr("d", function(d) {
-	    var dx = d.target.x - d.source.x,
-            dy = d.target.y - d.source.y,
-            // dr = Math.sqrt(dx * dx + dy * dy);
-            dr = 0;
-	    return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
-	});
-
-	circle.attr("transform", function(d) {
-	    return "translate(" + d.x + "," + d.y + ")";
-	});
-
-	text.attr("transform", function(d) {
-	    return "translate(" + d.x + "," + d.y + ")";
-	});
-
-	edgetext.attr("transform", function(d) {
-	    return "translate(" +
-		(d.source.x + d.target.x)/2 + "," +
-		(d.source.y + d.target.y)/2 +
-		")rotate(" +
-		(Math.atan2(d.target.y - d.source.y, d.target.x - d.source.x) * 180 / Math.PI) +
-		")";
-	});
-    }
-
-})(jQuery);
-<% end %>
+<p>foo
+</p>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 2b27522adc..5562cb856c 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -1,7 +1,11 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <meta charset="utf-8">
   <title>Vcffarm</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="">
+  <meta name="author" content="">
   <%= stylesheet_link_tag    "application", :media => "all" %>
   <%= javascript_include_tag "application" %>
   <%= csrf_meta_tags %>
@@ -9,10 +13,40 @@
   <%= javascript_tag do %>
   <%= yield :js %>
   <% end %>
+  <style>
+    body {
+    padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
+    }
+  </style>
 </head>
 <body>
 
-<%= yield %>
+  <div class="navbar navbar-inverse navbar-fixed-top">
+    <div class="navbar-inner">
+      <div class="container">
+        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+        </a>
+        <a class="brand" href="#"><%= Rails.configuration.site_name rescue Rails.application.class.parent_name %></a>
+        <div class="nav-collapse collapse">
+          <ul class="nav">
+	    <% [['Jobs', '/factory_jobs'],
+	       ['Graph', '/collections/graph']].each do |nav| %>
+            <li<%= raw ' class="active"' if request.fullpath.index(nav[1]) %>><a href="<%= nav[1] %>"><%= nav[0] %></a></li>
+	    <% end %>
+          </ul>
+        </div><!--/.nav-collapse -->
+      </div>
+    </div>
+  </div>
+
+  <div class="container">
+
+    <%= yield %>
+
+  </div> <!-- /container -->
 
 </body>
 </html>
diff --git a/config/environments/development.rb.example b/config/environments/development.rb.example
index 12d183afc3..e360169fe3 100644
--- a/config/environments/development.rb.example
+++ b/config/environments/development.rb.example
@@ -40,4 +40,6 @@ Vcffarm::Application.configure do
   config.data_import_dir = '/data/vcffarm-upload'
 
   config.secret_token = File.read('config/.secret_token') if File.exist? 'config/.secret_token'
+
+  config.site_name = 'vcffarm.example.com'
 end
diff --git a/config/environments/production.rb b/config/environments/production.rb
index 69cd50c407..bb7fd4505f 100644
--- a/config/environments/production.rb
+++ b/config/environments/production.rb
@@ -74,4 +74,6 @@ Vcffarm::Application.configure do
   config.accept_api_token = {}
 
   config.vcf_pipeline_uuid = '9ujm1-mxsvm-o62u4mdoxvs0ckp'
+
+  config.site_name = 'vcffarm.example.com'
 end
diff --git a/config/environments/test.rb b/config/environments/test.rb
index 9b32b2c6a9..88d0debebd 100644
--- a/config/environments/test.rb
+++ b/config/environments/test.rb
@@ -44,4 +44,6 @@ Vcffarm::Application.configure do
   config.accept_api_token = {}
 
   config.vcf_pipeline_uuid = '9ujm1-mxsvm-o62u4mdoxvs0ckp'
+
+  config.site_name = 'vcffarm.example.com'
 end
diff --git a/config/routes.rb b/config/routes.rb
index a24da46c36..97dea44237 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -25,6 +25,7 @@ Vcffarm::Application.routes.draw do
 
   resources :links
 
+  match '/collections/graph' => 'collections#graph'
 
   resources :collections