move control panel to topbar

html/force.css

@@ -16,7 +16,7 @@
   fill: #FFF0B3;
 }
 
-#nodeinfo, #controlpanel {
+#nodeinfo {
   position: absolute;
   background: #fff;
   border: 1px solid #ddd;
@@ -34,16 +34,20 @@
 }
 
 #controlpanel {
-  top: 10px;
-  right: 10px;
   font-size: 10pt;
+  display: inline-block;
+  color: #fff;
+}
+
+#controlpanel * {
+  display: inline;
 }
 
 #controlpanel p {
-  margin: 0;
+  margin: 0 1em;
 }
 
-#nodeinfo h1, p {
+#nodeinfo h1, #nodeinfo p {
   color: #555;
 }
 
@@ -65,7 +69,7 @@
     color: #6e6e6e;
     font: bold 12px Helvetica, Arial, sans-serif;
     text-decoration: none;
-    padding: 7px 12px;
+    padding: 2px 8px;
     position: relative;
     display: inline-block;
     text-shadow: 0 1px 0 #fff;
@@ -118,8 +122,7 @@
     -webkit-border-bottom-left-radius: 0;
     -moz-border-radius-bottomleft: 0;
     border-bottom-left-radius: 0;
-    border-left: solid 1px #f3f3f3;
-    border-left: solid 1px rgba(255, 255, 255, 0);
+    margin-left: -1px;
 }
 
 .btn.active {

html/force.js

@@ -14,7 +14,7 @@ var offset = getOffset(document.getElementById('chart'))
 var w = window.innerWidth - offset.left,
     h = window.innerHeight - offset.top - 1
 
-var cp = d3.select("#chart").append("div")
+var cp = d3.select("header").append("div")
            .attr("id", "controlpanel")
 
 var updated_at = cp.append("p")
@@ -40,11 +40,6 @@ btns.append("button")
     .text("VPN")
     .on("click", update_graph)
 
-cp.append("label")
-  .text("Knoten hervorheben:")
-
-cp.append("br")
-
 cp.append("input")
   .on("keyup", function(){show_node(this.value)})
   .on("change", function(){show_node(this.value)})