CORD GUI -- Dashboard and login pages have new look. WIP.
Change-Id: Ib38870c8acb5f443d2aedb6580180f5457f944df
diff --git a/apps/demo/cord-gui/src/main/webapp/app/fw/foot/foot.css b/apps/demo/cord-gui/src/main/webapp/app/fw/foot/foot.css
index f6b511d..b8746d6 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/fw/foot/foot.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/fw/foot/foot.css
@@ -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 @@
transform: translate(0, -50%);
font-style: italic;
font-size: 12px;
- color: rgba(255, 255, 255, 0.7);
+ color: #3C3C3C;
}
.foot div.left {
diff --git a/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.css b/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.css
index c1a6ec3..a2c3b00 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.css
@@ -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 @@
}
.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 {
diff --git a/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.html b/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.html
index b89520d..cd73f6c 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.html
@@ -1,19 +1,3 @@
-<!--
- ~ 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>
diff --git a/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.css b/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.css
index 361f0d8..91044d0 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.css
@@ -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;
-}
diff --git a/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.html b/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.html
index 56e62c4..4fdbad1 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.html
@@ -1,32 +1,17 @@
-<!--
- ~ 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>