CORD GUI -- Dashboard and login pages have new look. WIP.
Change-Id: Ib38870c8acb5f443d2aedb6580180f5457f944df
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 fd873a1..1f44657 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,36 +14,73 @@
* limitations under the License.
*/
+#home div.main-left {
+ width: 55%;
+ padding: 0;
+}
+#home div.main-right {
+ padding: 1% 0 0 3%;
+ width: 42%;
+}
+#home div.move-down {
+ margin-top: 19%;
+}
+
+#home div.image-holder {
+ width: 100%;
+ position: relative;
+}
+
+#home div.main-left img {
+ width: 100%;
+ opacity: 0.8;
+ box-shadow: 10px 0 12px 1px rgba(54, 136, 210, 0.25);
+}
+
+#home div.main-right div.bundle-title {
+ padding: 2% 0;
+}
+
+#home h4 {
+ padding-bottom: 2%;
+}
+
+#home p {
+ margin-bottom: 3%;
+}
+
#home table {
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;
+ border-left: 1px solid #CE5650;
}
-#home table.content th,
-#home table.content td {
+#home table.users th,
+#home table.users 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 table.users th {
+ background-color: #7AB6EA;
+ color: white;
+ letter-spacing: 0.05em;
+ font-weight: lighter;
}
#home td, #home th {
text-align: left;
padding: 2%;
}
+
+#home table.users th.user-pic {
+ background-color: white;
+}
+#home table.users th.user-pic,
+#home table.users td.user-pic {
+ width: 30px;
+ padding-left: 4%;
+}
+#home table.users td.user-pic img {
+ width: 25px;
+ opacity: 0.5;
+}
\ No newline at end of file
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 857d694..2c634ee 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,38 +1,46 @@
<!-- Home page partial html -->
<div id="home" class="container">
- <nav></nav>
<div class="main-left">
- <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>
+ <img src="/imgs/bin_ball.jpg">
</div>
<div class="main-right">
- <table class="title">
- <tr>
- <th>Users</th>
- </tr>
- </table>
- <table class="content">
- <thead>
- <tr>
- <th>Name</th>
- <th>MAC Address</th>
- </tr>
- </thead>
- <tbody>
+ <div class="move-down">
+ <div class="bundle-title">
+ <h5>You are subscribed to the</h5>
+ <h3>{{bundle}}</h3>
+ </div>
+
+ <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>
+
+
+ <h4>Users</h4>
+ <table class="users">
+ <thead>
+ <tr>
+ <th class="user-pic"></th>
+ <th>Name</th>
+ <th>Last Login</th>
+ </tr>
+ </thead>
+ <tbody>
+
<tr ng-repeat="user in users" class="fadein">
- <td>{{user.name}}</td>
- <td>{{user.mac}}</td>
- </tr>
- </tbody>
- </table>
+ <td class="user-pic">
+ <img ng-src="{{'/imgs/' + user.icon_id + '.png'}}">
+ </td>
+ <td>{{user.name}}</td>
+ <td>Session Activity</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
</div>
</div>
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 c28cb81..4460f14 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
@@ -23,7 +23,7 @@
.controller('CordHomeCtrl', ['$log', '$scope', '$resource',
function ($log, $scope, $resource) {
var DashboardData, resource;
- $scope.page = 'dashboard';
+ $scope.page.curr = 'dashboard';
DashboardData = $resource($scope.shared.url + urlSuffix);
resource = DashboardData.get({},