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/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