ONOS-1934 - CORD-GUI -- CSS for demo user page and navigation bar. Updated bundles page to use the new JSON format. WIP.

Change-Id: I8d6b8c5c5d3de0a23d9cb7e2ccf7529bb27de299
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 31cfe98..dae5251 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
@@ -15,9 +15,59 @@
  */
 
 #home table {
-    width: 100%;
+    width: 94%;
+    table-layout: fixed;
+    margin-left: 6%;
+}
+#home table.title {
+    background: linear-gradient(lightgray, darkgray);
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+}
+#home table.title th {
+    text-align: center;
+}
+
+#home table.content {
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+#home table.content th,
+#home table.content td {
+    font-size: 90%;
+}
+#home table.content th {
+    background-color: rgba(173, 216, 230, 0.75);
+}
+
+#home table.content tbody tr:nth-of-type(even) {
+    background-color: rgba(173, 216, 230, 0.25);
+}
+#home table.content tbody tr:nth-of-type(odd) {
+    background-color: rgba(173, 216, 230, 0.5);
 }
 
 #home td, #home th {
-    text-align: center;
+    text-align: left;
+    padding: 2%;
+}
+
+#home h3 {
+    font-weight: normal;
+    margin-bottom: 4%;
+}
+
+#home h4 {
+    color: rgb(107, 107, 107);
+    font-style: italic;
+    font-weight: normal;
+    font-size: 90%;
+    margin-bottom: 1%;
+}
+
+#home p {
+    font-size: 70%;
+    color: rgba(0,0,0, 0.8);
+    text-indent: 20px;
+    text-align: justify;
 }
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 2d9130e..7b95cb0 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
@@ -2,9 +2,16 @@
 <div id="home" class="container">
     <nav></nav>
     <div class="main-left">
-        <h2>Dashboard</h2>
         <h4>You are subscribed to the</h4>
         <h3>{{bundle}}</h3>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit
+            amet ultricies metus. Praesent pretium diam et nibh lacinia
+            faucibus. Donec commodo efficitur ex quis faucibus.
+            Pellentesque nec commodo metus. Nulla ultrices odio vitae tellus
+            tempor, quis fringilla arcu pellentesque. Duis efficitur massa
+            libero, et molestie diam vulputate nec. Nulla vitae lacinia odio.
+        </p>
     </div>
 
     <div class="main-right">
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/home/home.js b/apps/demo/cord-gui/src/main/webapp/app/view/home/home.js
index b4b8a0d..be600f7 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/home/home.js
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/home/home.js
@@ -17,8 +17,7 @@
 (function () {
     'use strict';
 
-    var before = 'http://localhost:8080/rs/dashboard/0',
-        after = 'http://localhost:8080/rs/dashboard/1';
+    var url = 'http://localhost:8080/rs/dashboard';
 
     angular.module('cordHome', [])
         .controller('CordHomeCtrl', ['$log', '$scope', '$resource',
@@ -26,7 +25,7 @@
                 var DashboardData, resource;
                 $scope.page = 'dashboard';
 
-                DashboardData = $resource(before);
+                DashboardData = $resource(url);
                 resource = DashboardData.get({},
                     // success
                     function () {