홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
Committed by Gerrit Code Review
75874dae 1 parent bbed4042

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

Change-Id: Ia4ab3783ae3bbdf1a53dbba551c1cb5d49f6e49c
Inline Side-by-side
Showing 8 changed files with 53 additions and 57 deletions
...@@ -15,11 +15,15 @@ ...@@ -15,11 +15,15 @@
15 */ 15 */
16 16
17 div.foot { 17 div.foot {
18 - width: 100%; 18 + width: 960px;
19 height: 20px; 19 height: 20px;
20 background-color: gray; 20 background-color: gray;
21 position: absolute; 21 position: absolute;
22 + left: 0;
23 + right: 0;
22 bottom: 0; 24 bottom: 0;
25 + margin-left: auto;
26 + margin-right: auto;
23 } 27 }
24 28
25 .foot div { 29 .foot div {
......
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
27 '<svg class="embedded-icon" width="' + attrs.size + '" ' + 27 '<svg class="embedded-icon" width="' + attrs.size + '" ' +
28 'height="' + attrs.size + '" viewBox="0 0 50 50">' + 28 'height="' + attrs.size + '" viewBox="0 0 50 50">' +
29 '<g class="icon">' + 29 '<g class="icon">' +
30 - '<rect width="50" height="50"></rect>' + 30 + '<circle cx="25" cy="25" r="25"></circle>' +
31 '<use width="50" height="50" class="glyph ' 31 '<use width="50" height="50" class="glyph '
32 + attrs.id + '" xlink:href="#' + attrs.id + 32 + attrs.id + '" xlink:href="#' + attrs.id +
33 '"></use>' + 33 '"></use>' +
......
...@@ -19,7 +19,6 @@ div.mast { ...@@ -19,7 +19,6 @@ div.mast {
19 height: 50px; 19 height: 50px;
20 background-color: gray; 20 background-color: gray;
21 position: relative; 21 position: relative;
22 - margin-bottom: 2%;
23 } 22 }
24 23
25 .mast div { 24 .mast div {
...@@ -35,3 +34,11 @@ div.mast { ...@@ -35,3 +34,11 @@ div.mast {
35 .mast div.right { 34 .mast div.right {
36 right: 25px; 35 right: 25px;
37 } 36 }
37 +
38 +.mast a {
39 + text-decoration: none;
40 + color: white;
41 +}
42 +.mast a:visited {
43 + color: white;
44 +}
......
...@@ -15,10 +15,19 @@ ...@@ -15,10 +15,19 @@
15 */ 15 */
16 16
17 .nav ul { 17 .nav ul {
18 + display: table;
19 + table-layout: fixed;
18 list-style-type: none; 20 list-style-type: none;
19 width: 100%; 21 width: 100%;
22 + margin-bottom: 2%;
23 + padding: 1% 0;
20 } 24 }
21 25
22 .nav li { 26 .nav li {
23 - display: inline; 27 +
28 +}
29 +
30 +.nav a {
31 + display: table-cell;
32 + text-align: center;
24 } 33 }
......
...@@ -27,14 +27,19 @@ p, a, li, th, td { ...@@ -27,14 +27,19 @@ p, a, li, th, td {
27 font-family: "Lucida Grande", "Droid Sans", Arial, Helvetica, sans-serif; 27 font-family: "Lucida Grande", "Droid Sans", Arial, Helvetica, sans-serif;
28 } 28 }
29 29
30 -#view h2 { 30 +div.container {
31 - text-align: center; 31 + width: 75%;
32 -}
33 -
34 -#view div.container {
35 - width: 960px;
36 margin: 0 auto; 32 margin: 0 auto;
37 } 33 }
34 +div.main-left, div.main-right {
35 + float: left;
36 +}
37 +div.main-left {
38 + width: 38%;
39 +}
40 +div.main-right {
41 + width: 62%;
42 +}
38 43
39 svg#icon-defs { 44 svg#icon-defs {
40 display: none; 45 display: none;
......
...@@ -14,17 +14,10 @@ ...@@ -14,17 +14,10 @@
14 * limitations under the License. 14 * limitations under the License.
15 */ 15 */
16 16
17 -div#db-bundle, div#db-users { 17 +#home table {
18 - float: left; 18 + width: 100%;
19 } 19 }
20 20
21 -svg.embedded-icon g.icon rect { 21 +#home td, #home th {
22 - fill: none; 22 + text-align: center;
23 -}
24 -
25 -svg.embedded-icon g.icon .glyph.checkMark {
26 - fill: #3eff7d;
27 -}
28 -svg.embedded-icon g.icon .glyph.xMark {
29 - fill: #a81c22;
30 } 23 }
......
1 <!-- Home page partial html --> 1 <!-- Home page partial html -->
2 -<div class="container"> 2 +<div id="home" class="container">
3 <nav></nav> 3 <nav></nav>
4 + <div class="main-left">
4 <h2>Dashboard</h2> 5 <h2>Dashboard</h2>
5 - <div id="db-bundle"> 6 + <h4>You are subscribed to the</h4>
6 - <table class="title"> 7 + <h3>{{bundle}}</h3>
7 - <tr>
8 - <th>{{bundle.name}}</th>
9 - </tr>
10 - </table>
11 - <table class="content">
12 - <thead>
13 - <tr>
14 - <th>ID</th>
15 - <th>Name</th>
16 - <th>Active</th>
17 - </tr>
18 - </thead>
19 - <tbody>
20 - <tr ng-repeat="func in bundle.functions">
21 - <td>{{func.id}}</td>
22 - <td>{{func.name}}</td>
23 - <td ng-if="func.active">
24 - <icon size="20" id="checkMark"></icon>
25 - </td>
26 - <td ng-if="!func.active">
27 - <icon size="20" id="xMark"></icon>
28 - </td>
29 - </tr>
30 - </tbody>
31 - </table>
32 </div> 8 </div>
33 9
34 - <div id="db-users"> 10 + <div class="main-right">
35 <table class="title"> 11 <table class="title">
36 <tr> 12 <tr>
37 <th>Users</th> 13 <th>Users</th>
...@@ -40,16 +16,14 @@ ...@@ -40,16 +16,14 @@
40 <table class="content"> 16 <table class="content">
41 <thead> 17 <thead>
42 <tr> 18 <tr>
43 - <th>ID</th>
44 <th>Name</th> 19 <th>Name</th>
45 - <th>Role</th> 20 + <th>MAC Address</th>
46 </tr> 21 </tr>
47 </thead> 22 </thead>
48 <tbody> 23 <tbody>
49 <tr ng-repeat="user in users"> 24 <tr ng-repeat="user in users">
50 - <td>{{user.id}}</td>
51 <td>{{user.name}}</td> 25 <td>{{user.name}}</td>
52 - <td>{{user.role}}</td> 26 + <td>{{user.mac}}</td>
53 </tr> 27 </tr>
54 </tbody> 28 </tbody>
55 </table> 29 </table>
......
1 <!-- Login page partial html --> 1 <!-- Login page partial html -->
2 <div id="login-header"> 2 <div id="login-header">
3 - <h2>Login to Subscriber Portal</h2> 3 + <h2>Subscriber Portal</h2>
4 </div> 4 </div>
5 5
6 -<div id="login-form"> 6 +<div class="container">
7 + <div id="login-image"></div>
8 +
9 + <div id="login-form">
7 <form> 10 <form>
8 <input type="text" placeholder="email"> 11 <input type="text" placeholder="email">
9 <br> 12 <br>
10 <input type="password" placeholder="password"> 13 <input type="password" placeholder="password">
11 <br> 14 <br>
12 - <a href="#/home"><input type="submit" value="Submit"></a> 15 + <a href="#/home"><input type="submit" value="Login"></a>
13 </form> 16 </form>
17 + </div>
14 </div> 18 </div>
...\ No newline at end of file ...\ No newline at end of file
......