ONOS-1934 - CORD-GUI -- Styling edits for positioning, updated dashboard to use new json format.

Change-Id: Ia4ab3783ae3bbdf1a53dbba551c1cb5d49f6e49c

@@ -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 {

@@ -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>' +

@@ -19,7 +19,6 @@ div.mast {
     height: 50px;
     background-color: gray;
     position: relative;
-    margin-bottom: 2%;
 }
 
 .mast div {
@@ -35,3 +34,11 @@ div.mast {
 .mast div.right {
     right: 25px;
 }
+
+.mast a {
+    text-decoration: none;
+    color: white;
+}
+.mast a:visited {
+    color: white;
+}

@@ -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;
 }

@@ -27,14 +27,19 @@ p, a, li, th, td {
     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;

@@ -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;
 }

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

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