move control panel to topbar
This commit is contained in:
parent
ba895ba396
commit
218d05e8d5
|
@ -16,7 +16,7 @@
|
||||||
fill: #FFF0B3;
|
fill: #FFF0B3;
|
||||||
}
|
}
|
||||||
|
|
||||||
#nodeinfo, #controlpanel {
|
#nodeinfo {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
|
@ -34,16 +34,20 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#controlpanel {
|
#controlpanel {
|
||||||
top: 10px;
|
|
||||||
right: 10px;
|
|
||||||
font-size: 10pt;
|
font-size: 10pt;
|
||||||
|
display: inline-block;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
#controlpanel * {
|
||||||
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
#controlpanel p {
|
#controlpanel p {
|
||||||
margin: 0;
|
margin: 0 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#nodeinfo h1, p {
|
#nodeinfo h1, #nodeinfo p {
|
||||||
color: #555;
|
color: #555;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -65,7 +69,7 @@
|
||||||
color: #6e6e6e;
|
color: #6e6e6e;
|
||||||
font: bold 12px Helvetica, Arial, sans-serif;
|
font: bold 12px Helvetica, Arial, sans-serif;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
padding: 7px 12px;
|
padding: 2px 8px;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-shadow: 0 1px 0 #fff;
|
text-shadow: 0 1px 0 #fff;
|
||||||
|
@ -118,8 +122,7 @@
|
||||||
-webkit-border-bottom-left-radius: 0;
|
-webkit-border-bottom-left-radius: 0;
|
||||||
-moz-border-radius-bottomleft: 0;
|
-moz-border-radius-bottomleft: 0;
|
||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
border-left: solid 1px #f3f3f3;
|
margin-left: -1px;
|
||||||
border-left: solid 1px rgba(255, 255, 255, 0);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn.active {
|
.btn.active {
|
||||||
|
|
|
@ -14,7 +14,7 @@ var offset = getOffset(document.getElementById('chart'))
|
||||||
var w = window.innerWidth - offset.left,
|
var w = window.innerWidth - offset.left,
|
||||||
h = window.innerHeight - offset.top - 1
|
h = window.innerHeight - offset.top - 1
|
||||||
|
|
||||||
var cp = d3.select("#chart").append("div")
|
var cp = d3.select("header").append("div")
|
||||||
.attr("id", "controlpanel")
|
.attr("id", "controlpanel")
|
||||||
|
|
||||||
var updated_at = cp.append("p")
|
var updated_at = cp.append("p")
|
||||||
|
@ -40,11 +40,6 @@ btns.append("button")
|
||||||
.text("VPN")
|
.text("VPN")
|
||||||
.on("click", update_graph)
|
.on("click", update_graph)
|
||||||
|
|
||||||
cp.append("label")
|
|
||||||
.text("Knoten hervorheben:")
|
|
||||||
|
|
||||||
cp.append("br")
|
|
||||||
|
|
||||||
cp.append("input")
|
cp.append("input")
|
||||||
.on("keyup", function(){show_node(this.value)})
|
.on("keyup", function(){show_node(this.value)})
|
||||||
.on("change", function(){show_node(this.value)})
|
.on("change", function(){show_node(this.value)})
|
||||||
|
|
Loading…
Reference in a new issue