put onos nodes at top
diff --git a/web/ons-demo/css/layout.default.css b/web/ons-demo/css/layout.default.css
index cfca8c5..209c9f4 100644
--- a/web/ons-demo/css/layout.default.css
+++ b/web/ons-demo/css/layout.default.css
@@ -36,6 +36,7 @@
#status {
display: -webkit-box;
+ -webkit-box-flex: 1.0;
}
#left, #right {
@@ -48,7 +49,7 @@
-webkit-box-flex: 1.0;
}
-#controllers, #topology {
+#topology {
-webkit-box-flex: 1.0;
position: relative;
}
@@ -101,22 +102,19 @@
width: 100%;
}
-#controllers {
- display: -webkit-box;
- -webkit-box-orient: vertical;
-}
-
-
#controllerList {
display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-box-flex: 1.0;
+ -webkit-box-orient: horizontal;
overflow: scroll;
}
+#controllers {
+ display: -webkit-box;
+}
.controller {
margin: .25em;
background-color: blue;
+ -webkit-box-flex: 1.0;
}
#svg-container {
diff --git a/web/ons-demo/css/skin.2.css b/web/ons-demo/css/skin.2.css
deleted file mode 100644
index e69de29..0000000
--- a/web/ons-demo/css/skin.2.css
+++ /dev/null
diff --git a/web/ons-demo/css/skin.default.css b/web/ons-demo/css/skin.default.css
index a6c636d..c864103 100644
--- a/web/ons-demo/css/skin.default.css
+++ b/web/ons-demo/css/skin.default.css
@@ -45,7 +45,7 @@
padding: .25em;
}
-#status.top span {
+#status span {
font-size: 24px;
}
@@ -65,10 +65,6 @@
height: 50px;
}
-#topology {
- border-top: 1px solid #AAA;
-}
-
.selectedFlow {
border-bottom: 1px solid #AAA;
}
@@ -85,23 +81,14 @@
padding-bottom: 0px;
}
-#controllers .header {
- -webkit-box-pack: center;
- border-bottom: 1px solid #AAA;
-}
-
-
#right .header {
font-size: 12px;
padding-right: .25em;
-webkit-box-sizing: border-box;
}
-#controllers, #selectedFlows {
- border-top: 1px solid #AAA;
-}
-
#selectedFlows {
+ border-top: 1px solid #AAA;
border-bottom: 1px solid #AAA;
}
@@ -111,6 +98,10 @@
background-color: black;
}
+.header, #controllers {
+ border-bottom: 1px solid #AAA;;
+}
+
#flowChooser .selectedFlow {
background-color: rgba(255, 255, 255, .75);
color: black;
@@ -191,10 +182,6 @@
}
-#controllers {
- border-right: 1px solid #AAA;
-}
-
.controller {
padding: .25em;
padding-left: 2.5em;
diff --git a/web/ons-demo/index.html b/web/ons-demo/index.html
index d7e57c4..ef00091 100644
--- a/web/ons-demo/index.html
+++ b/web/ons-demo/index.html
@@ -24,31 +24,21 @@
<div id='contents'>
- <div id='columns'>
- <div id='left'>
- <div class='header'>
- <img id='logo' src='assets/logo.svg'></img>
- </div>
- <div id='controllers'>
- <div class='header'>ONOS Nodes</div>
- <div id='controllerList'></div>
- </div>
+ <div class='header'>
+ <img id='logo' src='assets/logo.svg'></img>
+ <div id='status'>
+ <div class='status'><span class='dynamic' id='activeFlows'>????</span><span class='static'>Flows</span></div>
+ <div class='status'><span class='dynamic' id='activeSwitches'>???</span><span class='static'>Active Switches</span></div>
</div>
-
- <div id='right'>
- <div class='header'>
- <div id='status' class='top'>
- <div class='status'><span class='dynamic' id='activeFlows'>????</span><span class='static'>Flows</span></div>
- <div class='status'><span class='dynamic' id='activeSwitches'>???</span><span class='static'>Active Switches</span></div>
- </div>
- <div id='traceButton' class='button'>Trace</div>
- <div id='lastUpdated' class='status top'><span class='static'>Last updated:</span><span id='lastUpdate' class='dynamic'>Mon Mar 18 11:11:12 PDT 2013</span></div>
- </div>
- <div id='topology'>
- <div id='svg-container'></div>
- </div>
- </div>
+ <div id='lastUpdated' class='status'><span class='static'>Last updated:</span><span id='lastUpdate' class='dynamic'>Mon Mar 18 11:11:12 PDT 2013</span></div>
</div>
+
+ <div id='controllers'></div>
+
+ <div id='topology'>
+ <div id='svg-container'></div>
+ </div>
+
<div id='selectedFlowsHeader'>
<div id='deleteFlow'></div>
<div id='showFlowChooser' class='flowId'><div class='white-eye'></div></div>
@@ -56,7 +46,9 @@
<div class='dstDPID'>dst</div>
<div class='iperf'>iperf</div>
</div>
+
<div id='selectedFlows'></div>
+
<div id='flowChooser'></div>
<script src="js/app.js"></script>
diff --git a/web/ons-demo/js/controllers.js b/web/ons-demo/js/controllers.js
index 75f2689..abe966b 100644
--- a/web/ons-demo/js/controllers.js
+++ b/web/ons-demo/js/controllers.js
@@ -1,5 +1,5 @@
function updateControllers() {
- var controllers = d3.select('#controllerList').selectAll('.controller').data(model.controllers);
+ var controllers = d3.select('#controllers').selectAll('.controller').data(model.controllers);
controllers.enter().append('div')
.each(function (c) {
controllerColorMap[c] = colors.pop();