add bootstrap
authorTom Clegg <tom@clinicalfuture.com>
Fri, 1 Feb 2013 01:51:58 +0000 (17:51 -0800)
committerTom Clegg <tom@clinicalfuture.com>
Fri, 1 Feb 2013 01:51:58 +0000 (17:51 -0800)
12 files changed:
Gemfile
Gemfile.lock
app/assets/javascripts/application.js
app/assets/stylesheets/application.css
app/controllers/collections_controller.rb
app/views/collections/graph.html.erb [new file with mode: 0644]
app/views/collections/index.html.erb
app/views/layouts/application.html.erb
config/environments/development.rb.example
config/environments/production.rb
config/environments/test.rb
config/routes.rb

diff --git a/Gemfile b/Gemfile
index caba64e269e317cfdf731e2bc039c1a62cea14f4..524e65e510d3de84769123baa6ed184ea0ba6a5a 100644 (file)
--- 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'
index 38bb22fb0d038b2c22842fcc34feb3f2cc5ea89a..e8f6fb5fa41d057ce7c7ca85e8172d485c4ca8bc 100644 (file)
@@ -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
index 9097d830e2c27e4b1dd291b1e3ee72149251cca1..57338106516a2b723d0cf10831884342fd9928ba 100644 (file)
@@ -12,4 +12,5 @@
 //
 //= require jquery
 //= require jquery_ujs
+//= require twitter/bootstrap
 //= require_tree .
index 91dfe2497c189e93d9fbb7f6dcd30029e18eac55..0e11d7b09e480c30138cb62f05c4ed3ca6a8e6a0 100644 (file)
@@ -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 .
  */
 
index 335dc3064961062d1f9328da6e72be847d563722..f14b82fe9d99ffb29f00ac2f1c1e0126d7acd972 100644 (file)
@@ -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 (file)
index 0000000..87f07ea
--- /dev/null
@@ -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 %>
index 87f07eae1840ace6cf91e5c8e71712325332ae96..fe4360756f4a90f5c34753dd79c0f0fd1c8e6ee2 100644 (file)
@@ -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>
index 2b27522adc52fbdaf6f8d50497c18707e50ef320..5562cb856ce518ad48ab5c412c16cbc9b1f5a1c8 100644 (file)
@@ -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 %>
   <%= 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>
index 12d183afc32db8964079db9235904ec9c8bb49e0..e360169fe3f1dfb955b3978ce82d2990e3baf984 100644 (file)
@@ -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
index 69cd50c407f0a0138c7067da1712a805a73f2aab..bb7fd4505f6e00560f39f5b270d91fbef631d1ed 100644 (file)
@@ -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
index 9b32b2c6a9159153258a4a5367c4dca30fa63342..88d0debebdc370d82b3c2502f7beb3a5fe57161c 100644 (file)
@@ -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
index a24da46c36af074bca8235d42f5913980bb61c98..97dea442375914314a404eadba5f4643bd05d5f0 100644 (file)
@@ -25,6 +25,7 @@ Vcffarm::Application.routes.draw do
 
   resources :links
 
+  match '/collections/graph' => 'collections#graph'
 
   resources :collections