홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
60553c84 1 parent 8e36be58

CORD GUI -- Dashboard and login pages have new look. WIP. 

Change-Id: Ib38870c8acb5f443d2aedb6580180f5457f944df
Inline Side-by-side
Showing 28 changed files with 152 additions and 124 deletions
...@@ -15,18 +15,17 @@ ...@@ -15,18 +15,17 @@
15 */ 15 */
16 16
17 div.foot { 17 div.foot {
18 - width: 960px; 18 + width: 100%;
19 height: 30px; 19 height: 30px;
20 - background-color: rgb(122, 188, 229); 20 + background-color: white;
21 position: absolute; 21 position: absolute;
22 left: 0; 22 left: 0;
23 right: 0; 23 right: 0;
24 bottom: 0; 24 bottom: 0;
25 margin-left: auto; 25 margin-left: auto;
26 margin-right: auto; 26 margin-right: auto;
27 - border-top-left-radius: 3px;
28 - border-top-right-radius: 3px;
29 z-index: 100; 27 z-index: 100;
28 + box-shadow: 0 10px 5px 10px gray;
30 } 29 }
31 30
32 .foot div { 31 .foot div {
...@@ -35,7 +34,7 @@ div.foot { ...@@ -35,7 +34,7 @@ div.foot {
35 transform: translate(0, -50%); 34 transform: translate(0, -50%);
36 font-style: italic; 35 font-style: italic;
37 font-size: 12px; 36 font-size: 12px;
38 - color: rgba(255, 255, 255, 0.7); 37 + color: #3C3C3C;
39 } 38 }
40 39
41 .foot div.left { 40 .foot div.left {
......
...@@ -16,9 +16,11 @@ ...@@ -16,9 +16,11 @@
16 16
17 div.mast { 17 div.mast {
18 width: 100%; 18 width: 100%;
19 - height: 50px; 19 + height: 85px;
20 - background-color: rgb(122, 188, 229); 20 + background-color: white;
21 position: relative; 21 position: relative;
22 + box-shadow: 0 10px 5px -7px gray;
23 + z-index: 100;
22 } 24 }
23 25
24 .mast div { 26 .mast div {
...@@ -32,15 +34,14 @@ div.mast { ...@@ -32,15 +34,14 @@ div.mast {
32 } 34 }
33 35
34 .mast div.right { 36 .mast div.right {
35 - right: 25px; 37 + right: 7%;
38 + width: 30%;
36 } 39 }
37 40
38 -.mast a { 41 +.mast a,
39 - text-decoration: none;
40 - color: white;
41 -}
42 .mast a:visited { 42 .mast a:visited {
43 - color: white; 43 + text-decoration: none;
44 + color: #3C3C3C;
44 } 45 }
45 46
46 .mast svg { 47 .mast svg {
......
1 -<!--
2 - ~ Copyright 2015 Open Networking Laboratory
3 - ~
4 - ~ Licensed under the Apache License, Version 2.0 (the "License");
5 - ~ you may not use this file except in compliance with the License.
6 - ~ You may obtain a copy of the License at
7 - ~
8 - ~ http://www.apache.org/licenses/LICENSE-2.0
9 - ~
10 - ~ Unless required by applicable law or agreed to in writing, software
11 - ~ distributed under the License is distributed on an "AS IS" BASIS,
12 - ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 - ~ See the License for the specific language governing permissions and
14 - ~ limitations under the License.
15 - -->
16 -
17 <!--Mast HTML--> 1 <!--Mast HTML-->
18 2
19 <div class="mast"> 3 <div class="mast">
...@@ -23,6 +7,6 @@ ...@@ -23,6 +7,6 @@
23 </div> 7 </div>
24 8
25 <div class="right"> 9 <div class="right">
26 - 10 + <nav ng-show="page.curr !== 'login'"></nav>
27 </div> 11 </div>
28 </div> 12 </div>
......
...@@ -19,31 +19,27 @@ ...@@ -19,31 +19,27 @@
19 table-layout: fixed; 19 table-layout: fixed;
20 list-style-type: none; 20 list-style-type: none;
21 width: 100%; 21 width: 100%;
22 - margin-bottom: 2%;
23 } 22 }
24 23
25 .nav li { 24 .nav li {
26 - background-color: lightgray;
27 padding: 2.5% 0; 25 padding: 2.5% 0;
28 - transition: background-color 0.4s; 26 + color: #3C3C3C;
29 } 27 }
30 .nav li:hover { 28 .nav li:hover {
31 - background-color: #BD5643; 29 + border-bottom: 2px solid #CE5650;
32 - 30 + color: black;
33 } 31 }
34 .nav li.selected { 32 .nav li.selected {
35 - font-weight: bold; 33 + font-weight: bolder;
36 - color: white; 34 + color: #3C3C3C;
37 - background: linear-gradient(#A56151, #BD5643);
38 letter-spacing: 0.03em; 35 letter-spacing: 0.03em;
36 + border-bottom: 2px solid #CE5650;
39 } 37 }
40 38
41 -.nav a { 39 +.nav a,
40 +.nav a:visited {
42 display: table-cell; 41 display: table-cell;
43 text-align: center; 42 text-align: center;
44 text-decoration: none; 43 text-decoration: none;
45 color: black; 44 color: black;
46 } 45 }
47 -.nav a:visited {
48 - color: black;
49 -}
......
1 -<!-- 1 +<!--Nav HTML-->
2 - ~ Copyright 2015 Open Networking Laboratory
3 - ~
4 - ~ Licensed under the Apache License, Version 2.0 (the "License");
5 - ~ you may not use this file except in compliance with the License.
6 - ~ You may obtain a copy of the License at
7 - ~
8 - ~ http://www.apache.org/licenses/LICENSE-2.0
9 - ~
10 - ~ Unless required by applicable law or agreed to in writing, software
11 - ~ distributed under the License is distributed on an "AS IS" BASIS,
12 - ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 - ~ See the License for the specific language governing permissions and
14 - ~ limitations under the License.
15 - -->
16 -
17 <div class="nav"> 2 <div class="nav">
18 <ul> 3 <ul>
19 <a href="#/home"> 4 <a href="#/home">
20 - <li ng-class="{selected: page === 'dashboard'}" 5 + <li ng-class="{selected: page.curr === 'dashboard'}"
21 ng-click="$route.reload()">Dashboard</li> 6 ng-click="$route.reload()">Dashboard</li>
22 </a> 7 </a>
23 - <a href="#/user">
24 - <li ng-class="{selected: page === 'user'}"
25 - ng-click="$route.reload()">Users</li>
26 - </a>
27 <a href="#/bundle"> 8 <a href="#/bundle">
28 - <li ng-class="{selected: page === 'bundle'}" 9 + <li ng-class="{selected: page.curr === 'bundle'}"
29 ng-click="$route.reload()">Bundles</li> 10 ng-click="$route.reload()">Bundles</li>
30 </a> 11 </a>
12 + <a href="#/user">
13 + <li ng-class="{selected: page.curr === 'user'}"
14 + ng-click="$route.reload()">Users</li>
15 + </a>
31 </ul> 16 </ul>
32 </div> 17 </div>
......
1 <!-- Bundle page partial html --> 1 <!-- Bundle page partial html -->
2 <div id="bundle" class="container"> 2 <div id="bundle" class="container">
3 - <nav></nav>
4 <div class="main-left"> 3 <div class="main-left">
5 <h4>You are subscribed to the</h4> 4 <h4>You are subscribed to the</h4>
6 <h3>{{name}}</h3> 5 <h3>{{name}}</h3>
...@@ -16,6 +15,5 @@ ...@@ -16,6 +15,5 @@
16 <div class="main-right"> 15 <div class="main-right">
17 <h2>Available Bundles</h2> 16 <h2>Available Bundles</h2>
18 <div bundle-available></div> 17 <div bundle-available></div>
19 - <!--Can use ng-repeat on the above div for how many bundles are available-->
20 </div> 18 </div>
21 </div> 19 </div>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
27 function ($log, $scope, $resource) { 27 function ($log, $scope, $resource) {
28 var BundleData, resource, 28 var BundleData, resource,
29 getData; 29 getData;
30 - $scope.page = 'bundle'; 30 + $scope.page.curr = 'bundle';
31 31
32 getData = function (id) { 32 getData = function (id) {
33 if (!id) { id = ''; } 33 if (!id) { id = ''; }
......
...@@ -26,11 +26,12 @@ form, select, input, option, label { ...@@ -26,11 +26,12 @@ form, select, input, option, label {
26 h1, h2, h3, h4, h5, h6, 26 h1, h2, h3, h4, h5, h6,
27 p, a, li, th, td, 27 p, a, li, th, td,
28 select, input, option, label { 28 select, input, option, label {
29 - font-family: "Lucida Grande", "Droid Sans", Arial, Helvetica, sans-serif; 29 + font-family: sans-serif, "Droid Sans", "Lucida Grande", Arial, Helvetica;
30 } 30 }
31 31
32 body { 32 body {
33 - background-color: #efefef; 33 + background-color: white;
34 + overflow: hidden;
34 } 35 }
35 table { 36 table {
36 border-spacing: 0; 37 border-spacing: 0;
...@@ -40,10 +41,15 @@ th, td { ...@@ -40,10 +41,15 @@ th, td {
40 color: rgba(0, 0, 0, 0.8); 41 color: rgba(0, 0, 0, 0.8);
41 } 42 }
42 h3 { 43 h3 {
43 - font-weight: normal;
44 margin-bottom: 4%; 44 margin-bottom: 4%;
45 + font-size: xx-large;
46 + font-weight: lighter;
45 } 47 }
46 h4 { 48 h4 {
49 + font-size: large;
50 + font-weight: lighter;
51 +}
52 +h5 {
47 color: rgb(107, 107, 107); 53 color: rgb(107, 107, 107);
48 font-style: italic; 54 font-style: italic;
49 font-weight: normal; 55 font-weight: normal;
...@@ -86,7 +92,7 @@ input[type="reset"][disabled]:hover { ...@@ -86,7 +92,7 @@ input[type="reset"][disabled]:hover {
86 } 92 }
87 93
88 div.container { 94 div.container {
89 - width: 75%; 95 + width: 85%;
90 margin: 0 auto; 96 margin: 0 auto;
91 } 97 }
92 div.main-left, div.main-right { 98 div.main-left, div.main-right {
......
...@@ -14,36 +14,73 @@ ...@@ -14,36 +14,73 @@
14 * limitations under the License. 14 * limitations under the License.
15 */ 15 */
16 16
17 -#home table { 17 +#home div.main-left {
18 - width: 94%; 18 + width: 55%;
19 - table-layout: fixed; 19 + padding: 0;
20 - margin-left: 6%;
21 } 20 }
22 -#home table.title { 21 +#home div.main-right {
23 - background: linear-gradient(lightgray, darkgray); 22 + padding: 1% 0 0 3%;
24 - border-top-left-radius: 3px; 23 + width: 42%;
25 - border-top-right-radius: 3px;
26 } 24 }
27 -#home table.title th { 25 +#home div.move-down {
28 - text-align: center; 26 + margin-top: 19%;
29 } 27 }
30 28
31 -#home table.content th, 29 +#home div.image-holder {
32 -#home table.content td { 30 + width: 100%;
33 - font-size: 90%; 31 + position: relative;
32 +}
33 +
34 +#home div.main-left img {
35 + width: 100%;
36 + opacity: 0.8;
37 + box-shadow: 10px 0 12px 1px rgba(54, 136, 210, 0.25);
34 } 38 }
35 -#home table.content th { 39 +
36 - background-color: rgba(173, 216, 230, 0.75); 40 +#home div.main-right div.bundle-title {
41 + padding: 2% 0;
37 } 42 }
38 43
39 -#home table.content tbody tr:nth-of-type(even) { 44 +#home h4 {
40 - background-color: rgba(173, 216, 230, 0.25); 45 + padding-bottom: 2%;
41 } 46 }
42 -#home table.content tbody tr:nth-of-type(odd) { 47 +
43 - background-color: rgba(173, 216, 230, 0.5); 48 +#home p {
49 + margin-bottom: 3%;
50 +}
51 +
52 +#home table {
53 + width: 94%;
54 + table-layout: fixed;
55 + margin-left: 6%;
56 + border-left: 1px solid #CE5650;
57 +}
58 +
59 +#home table.users th,
60 +#home table.users td {
61 + font-size: 90%;
62 +}
63 +#home table.users th {
64 + background-color: #7AB6EA;
65 + color: white;
66 + letter-spacing: 0.05em;
67 + font-weight: lighter;
44 } 68 }
45 69
46 #home td, #home th { 70 #home td, #home th {
47 text-align: left; 71 text-align: left;
48 padding: 2%; 72 padding: 2%;
49 } 73 }
74 +
75 +#home table.users th.user-pic {
76 + background-color: white;
77 +}
78 +#home table.users th.user-pic,
79 +#home table.users td.user-pic {
80 + width: 30px;
81 + padding-left: 4%;
82 +}
83 +#home table.users td.user-pic img {
84 + width: 25px;
85 + opacity: 0.5;
86 +}
...\ No newline at end of file ...\ No newline at end of file
......
1 <!-- Home page partial html --> 1 <!-- Home page partial html -->
2 <div id="home" class="container"> 2 <div id="home" class="container">
3 - <nav></nav>
4 <div class="main-left"> 3 <div class="main-left">
5 - <h4>You are subscribed to the</h4> 4 + <img src="/imgs/bin_ball.jpg">
5 + </div>
6 +
7 + <div class="main-right">
8 + <div class="move-down">
9 + <div class="bundle-title">
10 + <h5>You are subscribed to the</h5>
6 <h3>{{bundle}}</h3> 11 <h3>{{bundle}}</h3>
12 + </div>
13 +
7 <p> 14 <p>
8 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit 15 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit
9 amet ultricies metus. Praesent pretium diam et nibh lacinia 16 amet ultricies metus. Praesent pretium diam et nibh lacinia
...@@ -12,27 +19,28 @@ ...@@ -12,27 +19,28 @@
12 tempor, quis fringilla arcu pellentesque. Duis efficitur massa 19 tempor, quis fringilla arcu pellentesque. Duis efficitur massa
13 libero, et molestie diam vulputate nec. Nulla vitae lacinia odio. 20 libero, et molestie diam vulputate nec. Nulla vitae lacinia odio.
14 </p> 21 </p>
15 - </div>
16 22
17 - <div class="main-right"> 23 +
18 - <table class="title"> 24 + <h4>Users</h4>
19 - <tr> 25 + <table class="users">
20 - <th>Users</th>
21 - </tr>
22 - </table>
23 - <table class="content">
24 <thead> 26 <thead>
25 <tr> 27 <tr>
28 + <th class="user-pic"></th>
26 <th>Name</th> 29 <th>Name</th>
27 - <th>MAC Address</th> 30 + <th>Last Login</th>
28 </tr> 31 </tr>
29 </thead> 32 </thead>
30 <tbody> 33 <tbody>
34 +
31 <tr ng-repeat="user in users" class="fadein"> 35 <tr ng-repeat="user in users" class="fadein">
36 + <td class="user-pic">
37 + <img ng-src="{{'/imgs/' + user.icon_id + '.png'}}">
38 + </td>
32 <td>{{user.name}}</td> 39 <td>{{user.name}}</td>
33 - <td>{{user.mac}}</td> 40 + <td>Session Activity</td>
34 </tr> 41 </tr>
35 </tbody> 42 </tbody>
36 </table> 43 </table>
37 </div> 44 </div>
45 + </div>
38 </div> 46 </div>
......
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
23 .controller('CordHomeCtrl', ['$log', '$scope', '$resource', 23 .controller('CordHomeCtrl', ['$log', '$scope', '$resource',
24 function ($log, $scope, $resource) { 24 function ($log, $scope, $resource) {
25 var DashboardData, resource; 25 var DashboardData, resource;
26 - $scope.page = 'dashboard'; 26 + $scope.page.curr = 'dashboard';
27 27
28 DashboardData = $resource($scope.shared.url + urlSuffix); 28 DashboardData = $resource($scope.shared.url + urlSuffix);
29 resource = DashboardData.get({}, 29 resource = DashboardData.get({},
......
...@@ -21,15 +21,15 @@ div#login-wrapper { ...@@ -21,15 +21,15 @@ div#login-wrapper {
21 #login h2 { 21 #login h2 {
22 margin: 1%; 22 margin: 1%;
23 color: rgb(115, 115, 115); 23 color: rgb(115, 115, 115);
24 - font-size: 100%; 24 + font-size: xx-large;
25 - font-style: italic; 25 + font-weight: lighter;
26 text-align: left; 26 text-align: left;
27 position: absolute; 27 position: absolute;
28 top: -140px; 28 top: -140px;
29 } 29 }
30 30
31 div#login-logo { 31 div#login-logo {
32 - margin-top: 7%; 32 + margin-top: 13%;
33 width: 217px; 33 width: 217px;
34 } 34 }
35 div#login-logo, div#login-form { 35 div#login-logo, div#login-form {
...@@ -37,16 +37,26 @@ div#login-logo, div#login-form { ...@@ -37,16 +37,26 @@ div#login-logo, div#login-form {
37 } 37 }
38 38
39 #login-logo use.glyph.bird { 39 #login-logo use.glyph.bird {
40 - fill: #800; 40 + fill: #CE5650;
41 } 41 }
42 #login-logo circle { 42 #login-logo circle {
43 fill: none; 43 fill: none;
44 } 44 }
45 45
46 +#login div.outline {
47 + position: absolute;
48 + border: 1px solid rgba(115, 115, 115, 0.7);
49 + top: -160px;
50 + left: -25px;
51 + width: 300px;
52 + height: 245px;
53 + border-radius: 1px;
54 +}
55 +
46 div#login-form { 56 div#login-form {
47 margin-left: 2.5%; 57 margin-left: 2.5%;
48 position: relative; 58 position: relative;
49 - width: 240px; 59 + width: 255px;
50 } 60 }
51 61
52 #login-form form { 62 #login-form form {
...@@ -60,20 +70,19 @@ div#login-form { ...@@ -60,20 +70,19 @@ div#login-form {
60 font-size: 19px; 70 font-size: 19px;
61 padding: 0 5px; 71 padding: 0 5px;
62 margin-bottom: 3.5%; 72 margin-bottom: 3.5%;
63 - border-radius: 3px; 73 + border-radius: 1px;
64 position: absolute; 74 position: absolute;
65 } 75 }
66 #login-form input[type="text"] { 76 #login-form input[type="text"] {
67 - top: -110px; 77 + top: -90px;
68 } 78 }
69 #login-form input[type="password"] { 79 #login-form input[type="password"] {
70 - top: -60px; 80 + top: -35px;
71 } 81 }
72 82
73 #login-form input[type="text"], 83 #login-form input[type="text"],
74 #login-form input[type="password"] { 84 #login-form input[type="password"] {
75 - box-shadow: none; 85 + border: 2px solid rgba(115, 115, 115, 0.7);
76 - border: none;
77 transition: border 0.1s; 86 transition: border 0.1s;
78 } 87 }
79 #login-form input[type="text"]:focus, 88 #login-form input[type="text"]:focus,
...@@ -88,15 +97,13 @@ div#login-form { ...@@ -88,15 +97,13 @@ div#login-form {
88 } 97 }
89 98
90 #login-form input[type="button"] { 99 #login-form input[type="button"] {
91 - top: -5px; 100 + top: 25px;
92 - width: 240px; 101 + width: 245px;
93 height: 30px; 102 height: 30px;
94 - box-shadow: none;
95 - border: none;
96 - outline: none;
97 cursor: pointer; 103 cursor: pointer;
98 letter-spacing: 0.02em; 104 letter-spacing: 0.02em;
99 - font-size: 14px; 105 + font-size: 100%;
106 + color: #3C3C3C;
100 background-color: lightgray; 107 background-color: lightgray;
101 transition: background-color 0.4s; 108 transition: background-color 0.4s;
102 } 109 }
......
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
6 </div> 6 </div>
7 7
8 <div id="login-form"> 8 <div id="login-form">
9 + <div class="outline"></div>
9 <h2>Subscriber Portal</h2> 10 <h2>Subscriber Portal</h2>
10 <form> 11 <form>
11 <input type="text" placeholder="email"> 12 <input type="text" placeholder="email">
......
...@@ -18,7 +18,9 @@ ...@@ -18,7 +18,9 @@
18 'use strict'; 18 'use strict';
19 19
20 angular.module('cordLogin', []) 20 angular.module('cordLogin', [])
21 - .controller('CordLoginCtrl', ['$log', function ($log) { 21 + .controller('CordLoginCtrl', ['$log', '$scope',
22 + function ($log, $scope) {
23 + $scope.page.curr = 'login';
22 $log.debug('Cord Login Ctrl has been created.'); 24 $log.debug('Cord Login Ctrl has been created.');
23 }]); 25 }]);
24 }()); 26 }());
......
...@@ -112,6 +112,9 @@ ...@@ -112,6 +112,9 @@
112 width: 30%; 112 width: 30%;
113 } 113 }
114 114
115 +#user td.buttons div {
116 + display: inline;
117 +}
115 #user td.buttons svg { 118 #user td.buttons svg {
116 vertical-align: middle; 119 vertical-align: middle;
117 } 120 }
......
1 <!-- Users page partial html --> 1 <!-- Users page partial html -->
2 <div class="container"> 2 <div class="container">
3 - <nav></nav>
4 <div id="user"> 3 <div id="user">
5 <div class="main-left" ng-class="{family: isFamily}"> 4 <div class="main-left" ng-class="{family: isFamily}">
6 <table class="user-info"> 5 <table class="user-info">
...@@ -32,8 +31,9 @@ ...@@ -32,8 +31,9 @@
32 </tr> 31 </tr>
33 <tr> 32 <tr>
34 <td class="buttons"> 33 <td class="buttons">
35 - <icon size="20px" id="checkMark" 34 + <div ng-show="showCheck">
36 - ng-show="showCheck"></icon> 35 + <icon size="20px" id="checkMark"></icon>
36 + </div>
37 <input type="reset" value="Cancel" 37 <input type="reset" value="Cancel"
38 ng-click="cancelChanges(changeLevels)" 38 ng-click="cancelChanges(changeLevels)"
39 ng-disabled="changeLevels.$pristine"> 39 ng-disabled="changeLevels.$pristine">
......
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
26 .controller('CordUserCtrl', ['$log', '$scope', '$resource', '$timeout', 26 .controller('CordUserCtrl', ['$log', '$scope', '$resource', '$timeout',
27 function ($log, $scope, $resource, $timeout) { 27 function ($log, $scope, $resource, $timeout) {
28 var BundleData, bundleResource; 28 var BundleData, bundleResource;
29 - $scope.page = 'user'; 29 + $scope.page.curr = 'user';
30 $scope.isFamily = false; 30 $scope.isFamily = false;
31 $scope.newLevels = {}; 31 $scope.newLevels = {};
32 $scope.showCheck = false; 32 $scope.showCheck = false;
......
...@@ -76,5 +76,6 @@ ...@@ -76,5 +76,6 @@
76 $scope.shared = { 76 $scope.shared = {
77 url: 'http://' + $location.host() + ':' + $location.port() 77 url: 'http://' + $location.host() + ':' + $location.port()
78 }; 78 };
79 + $scope.page = {};
79 }]); 80 }]);
80 }()); 81 }());
......