홍길동 / 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 @@
*/
div.foot {
width: 960px;
width: 100%;
height: 30px;
background-color: rgb(122, 188, 229);
background-color: white;
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin-left: auto;
margin-right: auto;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
z-index: 100;
box-shadow: 0 10px 5px 10px gray;
}
.foot div {
......@@ -35,7 +34,7 @@ div.foot {
transform: translate(0, -50%);
font-style: italic;
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
color: #3C3C3C;
}
.foot div.left {
......
......@@ -16,9 +16,11 @@
div.mast {
width: 100%;
height: 50px;
background-color: rgb(122, 188, 229);
height: 85px;
background-color: white;
position: relative;
box-shadow: 0 10px 5px -7px gray;
z-index: 100;
}
.mast div {
......@@ -32,15 +34,14 @@ div.mast {
}
.mast div.right {
right: 25px;
right: 7%;
width: 30%;
}
.mast a {
text-decoration: none;
color: white;
}
.mast a,
.mast a:visited {
color: white;
text-decoration: none;
color: #3C3C3C;
}
.mast svg {
......
<!--
~ Copyright 2015 Open Networking Laboratory
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
<!--Mast HTML-->
<div class="mast">
......@@ -23,6 +7,6 @@
</div>
<div class="right">
<nav ng-show="page.curr !== 'login'"></nav>
</div>
</div>
......
......@@ -19,31 +19,27 @@
table-layout: fixed;
list-style-type: none;
width: 100%;
margin-bottom: 2%;
}
.nav li {
background-color: lightgray;
padding: 2.5% 0;
transition: background-color 0.4s;
color: #3C3C3C;
}
.nav li:hover {
background-color: #BD5643;
border-bottom: 2px solid #CE5650;
color: black;
}
.nav li.selected {
font-weight: bold;
color: white;
background: linear-gradient(#A56151, #BD5643);
font-weight: bolder;
color: #3C3C3C;
letter-spacing: 0.03em;
border-bottom: 2px solid #CE5650;
}
.nav a {
.nav a,
.nav a:visited {
display: table-cell;
text-align: center;
text-decoration: none;
color: black;
}
.nav a:visited {
color: black;
}
......
<!--
~ Copyright 2015 Open Networking Laboratory
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
<!--Nav HTML-->
<div class="nav">
<ul>
<a href="#/home">
<li ng-class="{selected: page === 'dashboard'}"
<li ng-class="{selected: page.curr === 'dashboard'}"
ng-click="$route.reload()">Dashboard</li>
</a>
<a href="#/user">
<li ng-class="{selected: page === 'user'}"
ng-click="$route.reload()">Users</li>
</a>
<a href="#/bundle">
<li ng-class="{selected: page === 'bundle'}"
<li ng-class="{selected: page.curr === 'bundle'}"
ng-click="$route.reload()">Bundles</li>
</a>
<a href="#/user">
<li ng-class="{selected: page.curr === 'user'}"
ng-click="$route.reload()">Users</li>
</a>
</ul>
</div>
......
<!-- Bundle page partial html -->
<div id="bundle" class="container">
<nav></nav>
<div class="main-left">
<h4>You are subscribed to the</h4>
<h3>{{name}}</h3>
......@@ -16,6 +15,5 @@
<div class="main-right">
<h2>Available Bundles</h2>
<div bundle-available></div>
<!--Can use ng-repeat on the above div for how many bundles are available-->
</div>
</div>
\ No newline at end of file
......
......@@ -27,7 +27,7 @@
function ($log, $scope, $resource) {
var BundleData, resource,
getData;
$scope.page = 'bundle';
$scope.page.curr = 'bundle';
getData = function (id) {
if (!id) { id = ''; }
......
......@@ -26,11 +26,12 @@ form, select, input, option, label {
h1, h2, h3, h4, h5, h6,
p, a, li, th, td,
select, input, option, label {
font-family: "Lucida Grande", "Droid Sans", Arial, Helvetica, sans-serif;
font-family: sans-serif, "Droid Sans", "Lucida Grande", Arial, Helvetica;
}
body {
background-color: #efefef;
background-color: white;
overflow: hidden;
}
table {
border-spacing: 0;
......@@ -40,10 +41,15 @@ th, td {
color: rgba(0, 0, 0, 0.8);
}
h3 {
font-weight: normal;
margin-bottom: 4%;
font-size: xx-large;
font-weight: lighter;
}
h4 {
font-size: large;
font-weight: lighter;
}
h5 {
color: rgb(107, 107, 107);
font-style: italic;
font-weight: normal;
......@@ -86,7 +92,7 @@ input[type="reset"][disabled]:hover {
}
div.container {
width: 75%;
width: 85%;
margin: 0 auto;
}
div.main-left, div.main-right {
......
......@@ -14,36 +14,73 @@
* limitations under the License.
*/
#home table {
width: 94%;
table-layout: fixed;
margin-left: 6%;
#home div.main-left {
width: 55%;
padding: 0;
}
#home table.title {
background: linear-gradient(lightgray, darkgray);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
#home div.main-right {
padding: 1% 0 0 3%;
width: 42%;
}
#home table.title th {
text-align: center;
#home div.move-down {
margin-top: 19%;
}
#home table.content th,
#home table.content td {
font-size: 90%;
#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 table.content th {
background-color: rgba(173, 216, 230, 0.75);
#home div.main-right div.bundle-title {
padding: 2% 0;
}
#home table.content tbody tr:nth-of-type(even) {
background-color: rgba(173, 216, 230, 0.25);
#home h4 {
padding-bottom: 2%;
}
#home table.content tbody tr:nth-of-type(odd) {
background-color: rgba(173, 216, 230, 0.5);
#home p {
margin-bottom: 3%;
}
#home table {
width: 94%;
table-layout: fixed;
margin-left: 6%;
border-left: 1px solid #CE5650;
}
#home table.users th,
#home table.users td {
font-size: 90%;
}
#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
......
<!-- Home page partial html -->
<div id="home" class="container">
<nav></nav>
<div class="main-left">
<h4>You are subscribed to the</h4>
<img src="/imgs/bin_ball.jpg">
</div>
<div class="main-right">
<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
......@@ -12,27 +19,28 @@
tempor, quis fringilla arcu pellentesque. Duis efficitur massa
libero, et molestie diam vulputate nec. Nulla vitae lacinia odio.
</p>
</div>
<div class="main-right">
<table class="title">
<tr>
<th>Users</th>
</tr>
</table>
<table class="content">
<h4>Users</h4>
<table class="users">
<thead>
<tr>
<th class="user-pic"></th>
<th>Name</th>
<th>MAC Address</th>
<th>Last Login</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users" class="fadein">
<td class="user-pic">
<img ng-src="{{'/imgs/' + user.icon_id + '.png'}}">
</td>
<td>{{user.name}}</td>
<td>{{user.mac}}</td>
<td>Session Activity</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
......
......@@ -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({},
......
......@@ -21,15 +21,15 @@ div#login-wrapper {
#login h2 {
margin: 1%;
color: rgb(115, 115, 115);
font-size: 100%;
font-style: italic;
font-size: xx-large;
font-weight: lighter;
text-align: left;
position: absolute;
top: -140px;
}
div#login-logo {
margin-top: 7%;
margin-top: 13%;
width: 217px;
}
div#login-logo, div#login-form {
......@@ -37,16 +37,26 @@ div#login-logo, div#login-form {
}
#login-logo use.glyph.bird {
fill: #800;
fill: #CE5650;
}
#login-logo circle {
fill: none;
}
#login div.outline {
position: absolute;
border: 1px solid rgba(115, 115, 115, 0.7);
top: -160px;
left: -25px;
width: 300px;
height: 245px;
border-radius: 1px;
}
div#login-form {
margin-left: 2.5%;
position: relative;
width: 240px;
width: 255px;
}
#login-form form {
......@@ -60,20 +70,19 @@ div#login-form {
font-size: 19px;
padding: 0 5px;
margin-bottom: 3.5%;
border-radius: 3px;
border-radius: 1px;
position: absolute;
}
#login-form input[type="text"] {
top: -110px;
top: -90px;
}
#login-form input[type="password"] {
top: -60px;
top: -35px;
}
#login-form input[type="text"],
#login-form input[type="password"] {
box-shadow: none;
border: none;
border: 2px solid rgba(115, 115, 115, 0.7);
transition: border 0.1s;
}
#login-form input[type="text"]:focus,
......@@ -88,15 +97,13 @@ div#login-form {
}
#login-form input[type="button"] {
top: -5px;
width: 240px;
top: 25px;
width: 245px;
height: 30px;
box-shadow: none;
border: none;
outline: none;
cursor: pointer;
letter-spacing: 0.02em;
font-size: 14px;
font-size: 100%;
color: #3C3C3C;
background-color: lightgray;
transition: background-color 0.4s;
}
......
......@@ -6,6 +6,7 @@
</div>
<div id="login-form">
<div class="outline"></div>
<h2>Subscriber Portal</h2>
<form>
<input type="text" placeholder="email">
......
......@@ -18,7 +18,9 @@
'use strict';
angular.module('cordLogin', [])
.controller('CordLoginCtrl', ['$log', function ($log) {
.controller('CordLoginCtrl', ['$log', '$scope',
function ($log, $scope) {
$scope.page.curr = 'login';
$log.debug('Cord Login Ctrl has been created.');
}]);
}());
......
......@@ -112,6 +112,9 @@
width: 30%;
}
#user td.buttons div {
display: inline;
}
#user td.buttons svg {
vertical-align: middle;
}
......
<!-- Users page partial html -->
<div class="container">
<nav></nav>
<div id="user">
<div class="main-left" ng-class="{family: isFamily}">
<table class="user-info">
......@@ -32,8 +31,9 @@
</tr>
<tr>
<td class="buttons">
<icon size="20px" id="checkMark"
ng-show="showCheck"></icon>
<div ng-show="showCheck">
<icon size="20px" id="checkMark"></icon>
</div>
<input type="reset" value="Cancel"
ng-click="cancelChanges(changeLevels)"
ng-disabled="changeLevels.$pristine">
......
......@@ -26,7 +26,7 @@
.controller('CordUserCtrl', ['$log', '$scope', '$resource', '$timeout',
function ($log, $scope, $resource, $timeout) {
var BundleData, bundleResource;
$scope.page = 'user';
$scope.page.curr = 'user';
$scope.isFamily = false;
$scope.newLevels = {};
$scope.showCheck = false;
......
......@@ -76,5 +76,6 @@
$scope.shared = {
url: 'http://' + $location.host() + ':' + $location.port()
};
$scope.page = {};
}]);
}());
......