Bri Prebilic Cole

ONOS-1934 - CORD-GUI -- CSS for demo user page and navigation bar. Updated bundl…

…es page to use the new JSON format. WIP.

Change-Id: I8d6b8c5c5d3de0a23d9cb7e2ccf7529bb27de299
...@@ -24,11 +24,18 @@ ...@@ -24,11 +24,18 @@
24 24
25 .nav li { 25 .nav li {
26 background-color: lightgray; 26 background-color: lightgray;
27 - padding: 1% 0; 27 + padding: 2.5% 0;
28 + transition: background-color 0.4s;
29 +}
30 +.nav li:hover {
31 + background-color: #CE5650;
32 +
28 } 33 }
29 .nav li.selected { 34 .nav li.selected {
30 font-weight: bold; 35 font-weight: bold;
31 - background-color: darkgray; 36 + color: white;
37 + background: linear-gradient(#CE5650, #ce3630);
38 + letter-spacing: 0.03em;
32 } 39 }
33 40
34 .nav a { 41 .nav a {
......
1 <div id="available" ng-controller="CordAvailable as ctrl"> 1 <div id="available" ng-controller="CordAvailable as ctrl">
2 - <h2>{{name}}</h2> 2 + <h2>{{available.name}}</h2>
3 - <table> 3 + <p>{{available.desc}}</p>
4 - <tr ng-repeat="func in funcs">
5 - <td class="icon">icon of function</td>
6 - <td>{{func.name}}</td>
7 - <td class="desc">{{func.desc}}</td>
8 - </tr>
9 - </table>
10 <button type="button">Apply</button> 4 <button type="button">Apply</button>
11 </div> 5 </div>
......
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
4 <div class="main-left"> 4 <div class="main-left">
5 <h3>You are subscribed to the</h3> 5 <h3>You are subscribed to the</h3>
6 <h2>{{name}}</h2> 6 <h2>{{name}}</h2>
7 + <p>{{desc}}</p>
7 <table> 8 <table>
8 <tr ng-repeat="func in funcs"> 9 <tr ng-repeat="func in funcs">
9 <td class="icon">icon of function</td> 10 <td class="icon">icon of function</td>
......
...@@ -19,30 +19,12 @@ ...@@ -19,30 +19,12 @@
19 19
20 var $log, $resource; 20 var $log, $resource;
21 21
22 - var before = 'http://localhost:8080/rs/bundle/0', 22 + var url = 'http://localhost:8080/rs/bundle';
23 - after = 'http://localhost:8080/rs/bundle/1';
24 23
25 - var basic = 'Basic Bundle', 24 + var basic = 'basic',
26 - family = 'Family Bundle', 25 + family = 'family',
27 - current, which, 26 + current,
28 - avScope; 27 + avCb;
29 -
30 - function getAvailable(scope) {
31 - var AvailableData, resource;
32 -
33 - AvailableData = $resource(which);
34 - resource = AvailableData.get({},
35 - // success
36 - function () {
37 - scope.name = resource.bundle.name;
38 - scope.funcs = resource.bundle.functions;
39 - },
40 - // error
41 - function () {
42 - $log.error('Problem with resource', resource);
43 - });
44 - $log.debug('Resource received:', resource);
45 - }
46 28
47 angular.module('cordBundle', []) 29 angular.module('cordBundle', [])
48 .controller('CordBundleCtrl', ['$log', '$scope', '$resource', 30 .controller('CordBundleCtrl', ['$log', '$scope', '$resource',
...@@ -52,29 +34,36 @@ ...@@ -52,29 +34,36 @@
52 $log = _$log_; 34 $log = _$log_;
53 $resource = _$resource_; 35 $resource = _$resource_;
54 36
55 - BundleData = $resource(after); 37 + BundleData = $resource(url);
56 resource = BundleData.get({}, 38 resource = BundleData.get({},
57 // success 39 // success
58 function () { 40 function () {
41 + current = resource.bundle.id;
59 $scope.name = resource.bundle.name; 42 $scope.name = resource.bundle.name;
60 - current = $scope.name; 43 + $scope.desc = resource.bundle.desc;
61 $scope.funcs = resource.bundle.functions; 44 $scope.funcs = resource.bundle.functions;
62 - 45 + avCb(resource);
63 - which = (current === basic) ? after : before;
64 - getAvailable(avScope);
65 }, 46 },
66 // error 47 // error
67 function () { 48 function () {
68 $log.error('Problem with resource', resource); 49 $log.error('Problem with resource', resource);
69 }); 50 });
70 - $log.debug('Resource received:', resource);
71 51
72 $log.debug('Cord Bundle Ctrl has been created.'); 52 $log.debug('Cord Bundle Ctrl has been created.');
73 }]) 53 }])
74 54
75 .controller('CordAvailable', ['$scope', 55 .controller('CordAvailable', ['$scope',
76 function ($scope) { 56 function ($scope) {
77 - avScope = $scope; 57 + avCb = function (resource) {
58 + $scope.id = (current === basic) ? family : basic;
59 + $scope.bundles = resource.bundles;
60 +
61 + $scope.bundles.forEach(function (bundle) {
62 + if (bundle.id === $scope.id) {
63 + $scope.available = bundle;
64 + }
65 + });
66 + };
78 67
79 $log.debug('Cord Available Ctrl has been created.'); 68 $log.debug('Cord Available Ctrl has been created.');
80 }]) 69 }])
......
...@@ -30,6 +30,9 @@ p, a, li, th, td { ...@@ -30,6 +30,9 @@ p, a, li, th, td {
30 body { 30 body {
31 background-color: #efefef; 31 background-color: #efefef;
32 } 32 }
33 +th, td {
34 + color: rgba(0, 0, 0, 0.8);
35 +}
33 36
34 div.container { 37 div.container {
35 width: 75%; 38 width: 75%;
......
...@@ -15,9 +15,59 @@ ...@@ -15,9 +15,59 @@
15 */ 15 */
16 16
17 #home table { 17 #home table {
18 - width: 100%; 18 + width: 94%;
19 + table-layout: fixed;
20 + margin-left: 6%;
21 +}
22 +#home table.title {
23 + background: linear-gradient(lightgray, darkgray);
24 + border-top-left-radius: 3px;
25 + border-top-right-radius: 3px;
26 +}
27 +#home table.title th {
28 + text-align: center;
29 +}
30 +
31 +#home table.content {
32 + border-spacing: 0;
33 + border-collapse: collapse;
34 +}
35 +#home table.content th,
36 +#home table.content td {
37 + font-size: 90%;
38 +}
39 +#home table.content th {
40 + background-color: rgba(173, 216, 230, 0.75);
41 +}
42 +
43 +#home table.content tbody tr:nth-of-type(even) {
44 + background-color: rgba(173, 216, 230, 0.25);
45 +}
46 +#home table.content tbody tr:nth-of-type(odd) {
47 + background-color: rgba(173, 216, 230, 0.5);
19 } 48 }
20 49
21 #home td, #home th { 50 #home td, #home th {
22 - text-align: center; 51 + text-align: left;
52 + padding: 2%;
53 +}
54 +
55 +#home h3 {
56 + font-weight: normal;
57 + margin-bottom: 4%;
58 +}
59 +
60 +#home h4 {
61 + color: rgb(107, 107, 107);
62 + font-style: italic;
63 + font-weight: normal;
64 + font-size: 90%;
65 + margin-bottom: 1%;
66 +}
67 +
68 +#home p {
69 + font-size: 70%;
70 + color: rgba(0,0,0, 0.8);
71 + text-indent: 20px;
72 + text-align: justify;
23 } 73 }
......
...@@ -2,9 +2,16 @@ ...@@ -2,9 +2,16 @@
2 <div id="home" class="container"> 2 <div id="home" class="container">
3 <nav></nav> 3 <nav></nav>
4 <div class="main-left"> 4 <div class="main-left">
5 - <h2>Dashboard</h2>
6 <h4>You are subscribed to the</h4> 5 <h4>You are subscribed to the</h4>
7 <h3>{{bundle}}</h3> 6 <h3>{{bundle}}</h3>
7 + <p>
8 + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit
9 + amet ultricies metus. Praesent pretium diam et nibh lacinia
10 + faucibus. Donec commodo efficitur ex quis faucibus.
11 + Pellentesque nec commodo metus. Nulla ultrices odio vitae tellus
12 + tempor, quis fringilla arcu pellentesque. Duis efficitur massa
13 + libero, et molestie diam vulputate nec. Nulla vitae lacinia odio.
14 + </p>
8 </div> 15 </div>
9 16
10 <div class="main-right"> 17 <div class="main-right">
......
...@@ -17,8 +17,7 @@ ...@@ -17,8 +17,7 @@
17 (function () { 17 (function () {
18 'use strict'; 18 'use strict';
19 19
20 - var before = 'http://localhost:8080/rs/dashboard/0', 20 + var url = 'http://localhost:8080/rs/dashboard';
21 - after = 'http://localhost:8080/rs/dashboard/1';
22 21
23 angular.module('cordHome', []) 22 angular.module('cordHome', [])
24 .controller('CordHomeCtrl', ['$log', '$scope', '$resource', 23 .controller('CordHomeCtrl', ['$log', '$scope', '$resource',
...@@ -26,7 +25,7 @@ ...@@ -26,7 +25,7 @@
26 var DashboardData, resource; 25 var DashboardData, resource;
27 $scope.page = 'dashboard'; 26 $scope.page = 'dashboard';
28 27
29 - DashboardData = $resource(before); 28 + DashboardData = $resource(url);
30 resource = DashboardData.get({}, 29 resource = DashboardData.get({},
31 // success 30 // success
32 function () { 31 function () {
......
...@@ -20,6 +20,7 @@ ...@@ -20,6 +20,7 @@
20 var modules = [ 20 var modules = [
21 'ngRoute', 21 'ngRoute',
22 'ngResource', 22 'ngResource',
23 + 'ngAnimate',
23 'cordMast', 24 'cordMast',
24 'cordFoot', 25 'cordFoot',
25 'cordNav' 26 'cordNav'
......