홍길동 / 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 179 additions and 151 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 div.main-right div.bundle-title {
padding: 2% 0;
}
#home h4 {
padding-bottom: 2%;
}
#home table.content th {
background-color: rgba(173, 216, 230, 0.75);
#home p {
margin-bottom: 3%;
}
#home table.content tbody tr:nth-of-type(even) {
background-color: rgba(173, 216, 230, 0.25);
#home table {
width: 94%;
table-layout: fixed;
margin-left: 6%;
border-left: 1px solid #CE5650;
}
#home table.content tbody tr:nth-of-type(odd) {
background-color: rgba(173, 216, 230, 0.5);
#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>
<h3>{{bundle}}</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit
amet ultricies metus. Praesent pretium diam et nibh lacinia
faucibus. Donec commodo efficitur ex quis faucibus.
Pellentesque nec commodo metus. Nulla ultrices odio vitae tellus
tempor, quis fringilla arcu pellentesque. Duis efficitur massa
libero, et molestie diam vulputate nec. Nulla vitae lacinia odio.
</p>
<img src="/imgs/bin_ball.jpg">
</div>
<div class="main-right">
<table class="title">
<tr>
<th>Users</th>
</tr>
</table>
<table class="content">
<thead>
<tr>
<th>Name</th>
<th>MAC Address</th>
</tr>
</thead>
<tbody>
<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
faucibus. Donec commodo efficitur ex quis faucibus.
Pellentesque nec commodo metus. Nulla ultrices odio vitae tellus
tempor, quis fringilla arcu pellentesque. Duis efficitur massa
libero, et molestie diam vulputate nec. Nulla vitae lacinia odio.
</p>
<h4>Users</h4>
<table class="users">
<thead>
<tr>
<th class="user-pic"></th>
<th>Name</th>
<th>Last Login</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users" class="fadein">
<td>{{user.name}}</td>
<td>{{user.mac}}</td>
</tr>
</tbody>
</table>
<td class="user-pic">
<img ng-src="{{'/imgs/' + user.icon_id + '.png'}}">
</td>
<td>{{user.name}}</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,12 +6,13 @@
</div>
<div id="login-form">
<h2>Subscriber Portal</h2>
<form>
<input type="text" placeholder="email">
<input type="password" placeholder="password">
<a href="#/home"><input type="button" value="Log In"></a>
</form>
<div class="outline"></div>
<h2>Subscriber Portal</h2>
<form>
<input type="text" placeholder="email">
<input type="password" placeholder="password">
<a href="#/home"><input type="button" value="Log In"></a>
</form>
</div>
</div>
</div>
\ No newline at end of file
......
......@@ -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;
......
......@@ -73,8 +73,9 @@
}])
.controller('CordCtrl', ['$scope', '$location',
function ($scope, $location) {
$scope.shared = {
url: 'http://' + $location.host() + ':' + $location.port()
};
}]);
$scope.shared = {
url: 'http://' + $location.host() + ':' + $location.port()
};
$scope.page = {};
}]);
}());
......