diff --git a/src/main/resources/web/css/bootstrap.css b/src/main/resources/web/css/bootstrap.css
index 495188af7faca02cfd553ebb7c809ee469cf1a8b..98f31f3f08260b9a4528278ba6f65b5494f6e50a 100644
--- a/src/main/resources/web/css/bootstrap.css
+++ b/src/main/resources/web/css/bootstrap.css
@@ -135,8 +135,8 @@ body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 18px;
- color: #333333;
- background-color: #ffffff;
+ color: #0c028; /* #333333 */
+ background-color: white; /* #ffffff; */
}
a {
color: #0088cc;
@@ -148,6 +148,7 @@ a:hover {
}
.row {
margin-left: -20px;
+ margin-top: 5px;
*zoom: 1;
}
.row:before,
@@ -358,21 +359,21 @@ h6 small {
color: #999999;
}
h1 {
- font-size: 30px;
- line-height: 36px;
+ font-size: 23px;
+ line-height: 25px;
}
h1 small {
font-size: 18px;
}
h2 {
- font-size: 24px;
- line-height: 36px;
+ font-size: 18px;
+ line-height: 22px;
}
h2 small {
font-size: 18px;
}
h3 {
- line-height: 27px;
+ line-height: 18px;
font-size: 18px;
}
h3 small {
@@ -381,7 +382,7 @@ h3 small {
h4,
h5,
h6 {
- line-height: 18px;
+ line-height: 16px;
}
h4 {
font-size: 14px;
@@ -2489,7 +2490,7 @@ input[type="submit"].btn.btn-mini {
font-size: 11px;
font-weight: bold;
line-height: 18px;
- color: #999999;
+ color: white;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
text-transform: uppercase;
}
@@ -2782,8 +2783,9 @@ input[type="submit"].btn.btn-mini {
.navbar-inner {
padding-left: 20px;
padding-right: 20px;
- background-color: #2c2c2c;
- background-image: -moz-linear-gradient(top, #333333, #222222);
+ background-color: white;
+ border-bottom: 2px solid #221e50;
+/* background-image: -moz-linear-gradient(top, #333333, #222222);
background-image: -ms-linear-gradient(top, #333333, #222222);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
background-image: -webkit-linear-gradient(top, #333333, #222222);
@@ -2796,7 +2798,7 @@ input[type="submit"].btn.btn-mini {
border-radius: 4px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);*/
}
.navbar .container {
width: auto;
@@ -2919,7 +2921,7 @@ input[type="submit"].btn.btn-mini {
.navbar-search {
position: relative;
float: left;
- margin-top: 6px;
+ margin-top: 17px;
margin-bottom: 0;
}
.navbar-search .search-query {
@@ -2989,40 +2991,42 @@ input[type="submit"].btn.btn-mini {
left: 0;
display: block;
float: left;
- margin: 0 10px 0 0;
+ margin: 0 10px 0px 0;
}
.navbar .nav.pull-right {
float: right;
}
.navbar .nav > li {
display: block;
+ margin-top: 10px;
+ font-size: 130%;
float: left;
}
.navbar .nav > li > a {
float: none;
padding: 10px 10px 11px;
- line-height: 19px;
- color: #999999;
+ line-height: 25px;
+ color: #221e50;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.navbar .nav > li > a:hover {
background-color: transparent;
- color: #ffffff;
- text-decoration: none;
+ color: #221e50;
+ text-decoration: underline;
}
.navbar .nav .active > a,
.navbar .nav .active > a:hover {
- color: #ffffff;
- text-decoration: none;
- background-color: #222222;
+ color: #221e50;
+ text-decoration: underline;
+ background-color: white;
}
.navbar .divider-vertical {
height: 40px;
width: 1px;
margin: 0 9px;
overflow: hidden;
- background-color: #222222;
+ background-color: white;
border-right: 1px solid #333333;
}
.navbar .nav.pull-right {
@@ -3988,3 +3992,9 @@ a.thumbnail:hover {
.invisible {
visibility: hidden;
}
+
+td.status-head {
+ font-weight:bold;
+ width:150px;
+ padding:7px;
+}
\ No newline at end of file
diff --git a/src/main/resources/web/img/floodlight.png b/src/main/resources/web/img/floodlight.png
new file mode 100644
index 0000000000000000000000000000000000000000..98d047798ecd496ae12a2dfc8025ebfb3423417a
Binary files /dev/null and b/src/main/resources/web/img/floodlight.png differ
diff --git a/src/main/resources/web/index.html b/src/main/resources/web/index.html
index 78118293f292f0f437c528553db23ba74acf6445..1812037aed3ce286cdcd31ace15edd21f4a16e9c 100644
--- a/src/main/resources/web/index.html
+++ b/src/main/resources/web/index.html
@@ -51,7 +51,11 @@
<div class="header"></div>
<!-- FIXME closing these alerts returns to the dashboard; why? -->
+
+
<div class="container">
+
+<!--
<div class="row">
<div class="span12">
<div class="alert alert-info">
@@ -69,6 +73,7 @@ This Web interface is <strong>incomplete and buggy</strong>! Don't be surprised
</div>
</div>
</div>
+-->
<div id="content"></div>
diff --git a/src/main/resources/web/js/main.js b/src/main/resources/web/js/main.js
index 00f0b9feb408e3158be2d82187f3a16a5dd431a7..cde561b7f24f525ee74023242b6194a498b92e6f 100644
--- a/src/main/resources/web/js/main.js
+++ b/src/main/resources/web/js/main.js
@@ -99,8 +99,9 @@ tpl.loadTemplates(['home', 'status', 'topology', 'header', 'switch', 'switch-lis
$(document).ready(function () {
// trigger Backbone routing when clicking on links, thanks to Atinux and pbnv
+ app.navigate("", true);
- window.document.addEventListener('click', function(e) {
+ window.document.addEventListener('click', function(e) {
e = e || window.event
var target = e.target || e.srcElement
if ( target.nodeName.toLowerCase() === 'a' ) {
@@ -112,6 +113,7 @@ tpl.loadTemplates(['home', 'status', 'topology', 'header', 'switch', 'switch-lis
window.addEventListener('popstate', function(e) {
app.navigate(location.pathname.substr(1), true);
});
+
});
});
diff --git a/src/main/resources/web/js/views/topology.js b/src/main/resources/web/js/views/topology.js
index b79694895827d2581620c0985c3d91d72eb4e3c4..dee1461f68ec84c1f5675fe319354744c7beec29 100644
--- a/src/main/resources/web/js/views/topology.js
+++ b/src/main/resources/web/js/views/topology.js
@@ -25,8 +25,8 @@ window.TopologyView = Backbone.View.extend({
render:function (eventName) {
$(this.el).html(this.template());
// code from D3 force-directed graph example since there's no other docs
- var width = 940,
- height = 940; // might as well make it square
+ var width = 500,
+ height = 400; // might as well make it square
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
diff --git a/src/main/resources/web/tpl/header.html b/src/main/resources/web/tpl/header.html
index ca69b473dfbb1a81328494c4ed46c77638da7937..ae4545bab75917dea2a1783b4f38146140c153a6 100644
--- a/src/main/resources/web/tpl/header.html
+++ b/src/main/resources/web/tpl/header.html
@@ -1,3 +1,4 @@
+
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
@@ -7,8 +8,7 @@
<span class="icon-bar"></span>
</a>
<!-- TODO we could use a better version of the OF logo without the drop shadow -->
- <img src="img/openflow-logo-40px.png" style="float:left;">
- <a class="brand" href="/">Floodlight</a>
+ <img src="img/floodlight.png" style="float:left;">
<div class="nav-collapse">
<ul class="nav">
@@ -25,4 +25,4 @@
<!--/.nav-collapse -->
</div>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/main/resources/web/tpl/status.html b/src/main/resources/web/tpl/status.html
index a5da864c5bf57988c902fafccbfd9ceb91116710..86b77bf396f5a30cfb946bf7a6f13c06bd69395a 100644
--- a/src/main/resources/web/tpl/status.html
+++ b/src/main/resources/web/tpl/status.html
@@ -3,10 +3,11 @@
<div class="page-header">
<h1>Controller Status</h1>
</div>
-Hostname: <%= host %>:<%= ofport %><br>
-Healthy: <%= healthy %><br>
-Uptime: <%= uptime %><br>
-JVM memory bloat: <%= free %> free out of <%= total %><br>
-Modules loaded: <%= moduleText %>
+<table class="status-table">
+ <tr><td class="status-head">Hostname:<td><%= host %>:<%= ofport %></td></tr>
+ <tr><td class="status-head">Healthy:<td><%= healthy %></td>
+ <tr><td class="status-head">Uptime:<td><%= uptime %><td>
+ <tr><td class="status-head">JVM memory bloat:<td><%= free %> free out of <%= total %></td>
+ <Tr><td class="status-head">Modules loaded:<td><%= moduleText %></td>
</div>
</div>