Styling viz. And.. this is ready for prime time.

Author: drio

css/main.css

@@ -44,7 +44,7 @@ button.all {
   background: rgb(28, 184, 65); /* this is a green */
 }
 
-button.none {
+button.none, button.vizit {
   background: rgb(223, 117, 20); /* this is an orange */
 }
 
@@ -55,3 +55,7 @@ button:hover {
 button.small-button:hover {
   background-color: steelblue;
 }
+
+.ribbon {
+  position: fixed; top: 0; right: 0; border: 0;
+}

css/viz.css

@@ -1,3 +1,35 @@
+/*
+vim: ts=2 expandtab:
+*/
+input.input-text {
+  font-size: 120%;
+  color: #5a5854;
+  background-color: #f2f2f2;
+  border: 1px solid #bdbdbd;
+  border-radius: 5px;
+  padding: 5px 5px 5px 30px;
+  background-repeat: no-repeat;
+  background-posit5ion: 8px 9px;
+  margin-bottom: 10px;
+}
+
+input:focus {
+  background-color: #ffffff;
+  border: 1px solid #b1e1e4;
+}
+
+.region {
+  margin-top: 10px;
+}
+
+.current-region {
+  font-size: 100%;
+  font-style: italic;
+  text-align: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
 .group {
   margin-bottom: 1em;
 }

imgs/ribbon.png

@@ -15,6 +15,11 @@
   <div id="plots"></div>
 </body>
 
+<a id="github_link" href="https://github.com/drio/bedbrowser">
+<img class="ribbon" src="/imgs/ribbon.png" alt="Fork me on GitHub">
+</a>
+
+
 <script src="js/browser.js"></script>
 <script src="js/viz.js"></script>
 <script>

index.html

@@ -84,18 +84,20 @@ bb.viz = function(data) {
 
     var p =  main.append("p").attr("class", "region");
 
-    p.text("Region (Ex. Chr17:1100000-1200000)");
-
     p.append("input")
       .attr("type", "text")
+      .attr("size", "45")
       .attr("id", "region")
+      .attr("placeholder", "Region (Ex. Chr17:1100000-1200000)")
       .attr("class", "input-text");
 
     p.append("button")
       .text("Viz it!")
+      .attr("class", "vizit")
       .on("click", function() {
         var c = getRegion();
         clean();
+        console.log("here");
         if (c)
           horizon(c["start"], c["stop"], c["chrm"]);
         else