CORD GUI -- Dashboard and login pages have new look. WIP.
Change-Id: Ib38870c8acb5f443d2aedb6580180f5457f944df
Showing
28 changed files
with
179 additions
and
151 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); | ||
38 | +} | ||
39 | + | ||
40 | +#home div.main-right div.bundle-title { | ||
41 | + padding: 2% 0; | ||
42 | +} | ||
43 | + | ||
44 | +#home h4 { | ||
45 | + padding-bottom: 2%; | ||
34 | } | 46 | } |
35 | -#home table.content th { | 47 | + |
36 | - background-color: rgba(173, 216, 230, 0.75); | 48 | +#home p { |
49 | + margin-bottom: 3%; | ||
37 | } | 50 | } |
38 | 51 | ||
39 | -#home table.content tbody tr:nth-of-type(even) { | 52 | +#home table { |
40 | - background-color: rgba(173, 216, 230, 0.25); | 53 | + width: 94%; |
54 | + table-layout: fixed; | ||
55 | + margin-left: 6%; | ||
56 | + border-left: 1px solid #CE5650; | ||
41 | } | 57 | } |
42 | -#home table.content tbody tr:nth-of-type(odd) { | 58 | + |
43 | - background-color: rgba(173, 216, 230, 0.5); | 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"> |
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> | ||
15 | </div> | 5 | </div> |
16 | 6 | ||
17 | <div class="main-right"> | 7 | <div class="main-right"> |
18 | - <table class="title"> | 8 | + <div class="move-down"> |
19 | - <tr> | 9 | + <div class="bundle-title"> |
20 | - <th>Users</th> | 10 | + <h5>You are subscribed to the</h5> |
21 | - </tr> | 11 | + <h3>{{bundle}}</h3> |
22 | - </table> | 12 | + </div> |
23 | - <table class="content"> | 13 | + |
24 | - <thead> | 14 | + <p> |
25 | - <tr> | 15 | + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit |
26 | - <th>Name</th> | 16 | + amet ultricies metus. Praesent pretium diam et nibh lacinia |
27 | - <th>MAC Address</th> | 17 | + faucibus. Donec commodo efficitur ex quis faucibus. |
28 | - </tr> | 18 | + Pellentesque nec commodo metus. Nulla ultrices odio vitae tellus |
29 | - </thead> | 19 | + tempor, quis fringilla arcu pellentesque. Duis efficitur massa |
30 | - <tbody> | 20 | + libero, et molestie diam vulputate nec. Nulla vitae lacinia odio. |
21 | + </p> | ||
22 | + | ||
23 | + | ||
24 | + <h4>Users</h4> | ||
25 | + <table class="users"> | ||
26 | + <thead> | ||
27 | + <tr> | ||
28 | + <th class="user-pic"></th> | ||
29 | + <th>Name</th> | ||
30 | + <th>Last Login</th> | ||
31 | + </tr> | ||
32 | + </thead> | ||
33 | + <tbody> | ||
34 | + | ||
31 | <tr ng-repeat="user in users" class="fadein"> | 35 | <tr ng-repeat="user in users" class="fadein"> |
32 | - <td>{{user.name}}</td> | 36 | + <td class="user-pic"> |
33 | - <td>{{user.mac}}</td> | 37 | + <img ng-src="{{'/imgs/' + user.icon_id + '.png'}}"> |
34 | - </tr> | 38 | + </td> |
35 | - </tbody> | 39 | + <td>{{user.name}}</td> |
36 | - </table> | 40 | + <td>Session Activity</td> |
41 | + </tr> | ||
42 | + </tbody> | ||
43 | + </table> | ||
44 | + </div> | ||
37 | </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,12 +6,13 @@ | ... | @@ -6,12 +6,13 @@ |
6 | </div> | 6 | </div> |
7 | 7 | ||
8 | <div id="login-form"> | 8 | <div id="login-form"> |
9 | - <h2>Subscriber Portal</h2> | 9 | + <div class="outline"></div> |
10 | - <form> | 10 | + <h2>Subscriber Portal</h2> |
11 | - <input type="text" placeholder="email"> | 11 | + <form> |
12 | - <input type="password" placeholder="password"> | 12 | + <input type="text" placeholder="email"> |
13 | - <a href="#/home"><input type="button" value="Log In"></a> | 13 | + <input type="password" placeholder="password"> |
14 | - </form> | 14 | + <a href="#/home"><input type="button" value="Log In"></a> |
15 | + </form> | ||
15 | </div> | 16 | </div> |
16 | </div> | 17 | </div> |
17 | </div> | 18 | </div> |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -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 | }()); | ... | ... |
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; | ... | ... |
... | @@ -73,8 +73,9 @@ | ... | @@ -73,8 +73,9 @@ |
73 | }]) | 73 | }]) |
74 | .controller('CordCtrl', ['$scope', '$location', | 74 | .controller('CordCtrl', ['$scope', '$location', |
75 | function ($scope, $location) { | 75 | function ($scope, $location) { |
76 | - $scope.shared = { | 76 | + $scope.shared = { |
77 | - url: 'http://' + $location.host() + ':' + $location.port() | 77 | + url: 'http://' + $location.host() + ':' + $location.port() |
78 | - }; | 78 | + }; |
79 | - }]); | 79 | + $scope.page = {}; |
80 | + }]); | ||
80 | }()); | 81 | }()); | ... | ... |
132 KB
332 KB
10 KB
9.28 KB
8.68 KB
12.3 KB
13.5 KB
11.1 KB
11.2 KB
11.8 KB
-
Please register or login to post a comment