ONOS-1934 - CORD-GUI -- Styling edits for positioning, updated dashboard to use new json format.
Change-Id: Ia4ab3783ae3bbdf1a53dbba551c1cb5d49f6e49c
diff --git a/apps/demo/cord-gui/src/main/webapp/app/fw/foot/foot.css b/apps/demo/cord-gui/src/main/webapp/app/fw/foot/foot.css
index 193e4c5..8e55b9a 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/fw/foot/foot.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/fw/foot/foot.css
@@ -15,11 +15,15 @@
*/
div.foot {
- width: 100%;
+ width: 960px;
height: 20px;
background-color: gray;
position: absolute;
+ left: 0;
+ right: 0;
bottom: 0;
+ margin-left: auto;
+ margin-right: auto;
}
.foot div {
diff --git a/apps/demo/cord-gui/src/main/webapp/app/fw/icon/icon.js b/apps/demo/cord-gui/src/main/webapp/app/fw/icon/icon.js
index 67c69bf..b0d48fa 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/fw/icon/icon.js
+++ b/apps/demo/cord-gui/src/main/webapp/app/fw/icon/icon.js
@@ -27,7 +27,7 @@
'<svg class="embedded-icon" width="' + attrs.size + '" ' +
'height="' + attrs.size + '" viewBox="0 0 50 50">' +
'<g class="icon">' +
- '<rect width="50" height="50"></rect>' +
+ '<circle cx="25" cy="25" r="25"></circle>' +
'<use width="50" height="50" class="glyph '
+ attrs.id + '" xlink:href="#' + attrs.id +
'"></use>' +
diff --git a/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.css b/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.css
index 4eb917f..a0d8d59 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.css
@@ -19,7 +19,6 @@
height: 50px;
background-color: gray;
position: relative;
- margin-bottom: 2%;
}
.mast div {
@@ -35,3 +34,11 @@
.mast div.right {
right: 25px;
}
+
+.mast a {
+ text-decoration: none;
+ color: white;
+}
+.mast a:visited {
+ color: white;
+}
diff --git a/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.css b/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.css
index a449807..b2cc2be 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.css
@@ -15,10 +15,19 @@
*/
.nav ul {
+ display: table;
+ table-layout: fixed;
list-style-type: none;
width: 100%;
+ margin-bottom: 2%;
+ padding: 1% 0;
}
.nav li {
- display: inline;
+
+}
+
+.nav a {
+ display: table-cell;
+ text-align: center;
}
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/common/common.css b/apps/demo/cord-gui/src/main/webapp/app/view/common/common.css
index 1124811..195740a 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/common/common.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/common/common.css
@@ -27,14 +27,19 @@
font-family: "Lucida Grande", "Droid Sans", Arial, Helvetica, sans-serif;
}
-#view h2 {
- text-align: center;
-}
-
-#view div.container {
- width: 960px;
+div.container {
+ width: 75%;
margin: 0 auto;
}
+div.main-left, div.main-right {
+ float: left;
+}
+div.main-left {
+ width: 38%;
+}
+div.main-right {
+ width: 62%;
+}
svg#icon-defs {
display: none;
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/home/home.css b/apps/demo/cord-gui/src/main/webapp/app/view/home/home.css
index 43473e6..31cfe98 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/home/home.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/home/home.css
@@ -14,17 +14,10 @@
* limitations under the License.
*/
-div#db-bundle, div#db-users {
- float: left;
+#home table {
+ width: 100%;
}
-svg.embedded-icon g.icon rect {
- fill: none;
-}
-
-svg.embedded-icon g.icon .glyph.checkMark {
- fill: #3eff7d;
-}
-svg.embedded-icon g.icon .glyph.xMark {
- fill: #a81c22;
+#home td, #home th {
+ text-align: center;
}
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/home/home.html b/apps/demo/cord-gui/src/main/webapp/app/view/home/home.html
index f3b2598..2d9130e 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/home/home.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/home/home.html
@@ -1,37 +1,13 @@
<!-- Home page partial html -->
-<div class="container">
+<div id="home" class="container">
<nav></nav>
- <h2>Dashboard</h2>
- <div id="db-bundle">
- <table class="title">
- <tr>
- <th>{{bundle.name}}</th>
- </tr>
- </table>
- <table class="content">
- <thead>
- <tr>
- <th>ID</th>
- <th>Name</th>
- <th>Active</th>
- </tr>
- </thead>
- <tbody>
- <tr ng-repeat="func in bundle.functions">
- <td>{{func.id}}</td>
- <td>{{func.name}}</td>
- <td ng-if="func.active">
- <icon size="20" id="checkMark"></icon>
- </td>
- <td ng-if="!func.active">
- <icon size="20" id="xMark"></icon>
- </td>
- </tr>
- </tbody>
- </table>
+ <div class="main-left">
+ <h2>Dashboard</h2>
+ <h4>You are subscribed to the</h4>
+ <h3>{{bundle}}</h3>
</div>
- <div id="db-users">
+ <div class="main-right">
<table class="title">
<tr>
<th>Users</th>
@@ -40,16 +16,14 @@
<table class="content">
<thead>
<tr>
- <th>ID</th>
<th>Name</th>
- <th>Role</th>
+ <th>MAC Address</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
- <td>{{user.id}}</td>
<td>{{user.name}}</td>
- <td>{{user.role}}</td>
+ <td>{{user.mac}}</td>
</tr>
</tbody>
</table>
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/login/login.html b/apps/demo/cord-gui/src/main/webapp/app/view/login/login.html
index 318ae32..15c06e7 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/login/login.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/login/login.html
@@ -1,14 +1,18 @@
<!-- Login page partial html -->
<div id="login-header">
- <h2>Login to Subscriber Portal</h2>
+ <h2>Subscriber Portal</h2>
</div>
-<div id="login-form">
- <form>
- <input type="text" placeholder="email">
- <br>
- <input type="password" placeholder="password">
- <br>
- <a href="#/home"><input type="submit" value="Submit"></a>
- </form>
+<div class="container">
+ <div id="login-image"></div>
+
+ <div id="login-form">
+ <form>
+ <input type="text" placeholder="email">
+ <br>
+ <input type="password" placeholder="password">
+ <br>
+ <a href="#/home"><input type="submit" value="Login"></a>
+ </form>
+ </div>
</div>
\ No newline at end of file