LnF updates to masthead.
Change-Id: I6c31d244eb1bad5c87d89b10a5df750043cf12a0
(cherry picked from commit b43f88c)
diff --git a/web/gui/src/main/webapp/app/fw/mast/mast-theme.css b/web/gui/src/main/webapp/app/fw/mast/mast-theme.css
index 8f94066..8c63778 100644
--- a/web/gui/src/main/webapp/app/fw/mast/mast-theme.css
+++ b/web/gui/src/main/webapp/app/fw/mast/mast-theme.css
@@ -19,77 +19,67 @@
*/
.light #mast {
- background-color: #bbb;
- box-shadow: 0 2px 8px #777;
+ background-color: #231f20;
}
.dark #mast {
- background-color: #444;
- box-shadow: 0 2px 8px #222;
+ /* TODO: dark theme */
+ background-color: #231f20;
}
.light #mast .nav-menu-button:hover {
- background-color: #ddd;
+ background-color: #888;
}
.dark #mast .nav-menu-button:hover {
- background-color: #777;
+ background-color: #888;
}
-#mast img.logo:hover {
- /* need something better */
- /*background-color: #888;*/
-}
-
-.light #mast .title {
- color: #369;
-}
-.dark #mast .title {
- color: #eee;
-}
.light #mast-right a {
- color: #369;
+ color: #009fdb;
}
-
.dark #mast-right a {
- color: #eee;
+ /* TODO: dark theme */
+ color: #009fdb;
}
.light #mast nav {
- color: #369;
+ color: #009fdb;
}
.dark #mast nav {
- color: #eee;
+ /* TODO: dark theme */
+ color: #009fdb;
}
/* Theme styles for drop down menu */
.light #mast .dropdown {
- background-color: #bbb;
- box-shadow: 0 2px 8px #777;
+ background-color: #231f20;
+ border: 1px solid #dddddd;
}
-
.dark #mast .dropdown {
- background-color: #444;
- box-shadow: 0 2px 8px #111;
+ /* TODO: dark theme */
+ background-color: #231f20;
+ border: 1px solid #dddddd;
}
.light #mast .dropdown a {
- color: #369;
- border-bottom: solid #ccc 1px;
+ color: #009fdb;
+ border-bottom: solid #444 1px;
}
-
.dark #mast .dropdown a {
- color: #eee;
- border-bottom: solid #333 1px;
+ /* TODO: dark theme */
+ color: #009fdb;
+ border-bottom: solid #444 1px;
}
.light #mast .dropdown a:hover {
- background-color: #ddd;
+ color: #fff;
}
.dark #mast .dropdown a:hover {
- background-color: #777;
+ /* TODO: dark theme */
+ color: #fff;
}
diff --git a/web/gui/src/main/webapp/app/fw/mast/mast.css b/web/gui/src/main/webapp/app/fw/mast/mast.css
index b2ccb37..57353b0 100644
--- a/web/gui/src/main/webapp/app/fw/mast/mast.css
+++ b/web/gui/src/main/webapp/app/fw/mast/mast.css
@@ -19,9 +19,8 @@
*/
#mast {
- height: 36px;
- padding: 4px;
- vertical-align: baseline;
+ height: 48px;
+ padding: 0;
}
html[data-platform='iPad'] #mast {
@@ -29,31 +28,22 @@
}
#mast .nav-menu-button {
- width: 30px;
- height: 30px;
- margin-left: 8px;
- margin-bottom: 4px;
- cursor: pointer;
+ width: 26px;
+ height: 21px;
+ margin: 14px 18px 14px 14px;
}
#mast img.logo {
- height: 38px;
- padding-left: 8px;
- padding-right: 8px;
+ height: 47px;
+ width: 436px;
+ margin: 0;
}
-#mast .title {
- font-size: 14pt;
- font-style: italic;
- vertical-align: 12px;
-}
-
-
#mast-right {
display: inline-block;
float: right;
position: relative;
- top: -4px;
+ top: 0;
padding-right: 15px;
line-height: 44px;
}
@@ -72,23 +62,23 @@
height: 7px;
width: 9px;
margin-left: 10px;
- background: url('/onos/ui/data/img/dropdown-icon.png') no-repeat;
+ background: url('../../../data/img/dropdown-icon.png') no-repeat;
}
#mast .dropdown {
position: absolute;
- top: 44px;
- right: 0;
+ top: 40px;
+ right: -8px;
display: none;
min-width: 100px;
- border-top: 1px solid #999;
line-height: 16px;
+ font-size: 12pt;
z-index: 1000;
}
#mast .dropdown a {
text-decoration: none;
- font-size: 14px;
+ font-size: 12px;
display: block;
padding: 8px 16px 6px 12px;
}
diff --git a/web/gui/src/main/webapp/app/fw/mast/mast.html b/web/gui/src/main/webapp/app/fw/mast/mast.html
index 4b859d9..a453a50 100644
--- a/web/gui/src/main/webapp/app/fw/mast/mast.html
+++ b/web/gui/src/main/webapp/app/fw/mast/mast.html
@@ -1,8 +1,7 @@
<!-- Masthead partial HTML -->
-<img class="nav-menu-button" src="data/img/nav-menu.png"
+<img class="nav-menu-button clickable" src="data/img/nav-menu-mojo.png"
ng-click="mastCtrl.toggleNav()"></div>
-<img class="logo" src="data/img/onos-logo.png">
-<span class="title">Open Network Operating System</span>
+<img class="logo" src="data/img/masthead-logo-mojo.png">
<div id="mast-right">
<nav>
@@ -10,7 +9,7 @@
<a class="user-menu__name">{{user}} <i class="dropdown-icon"></i></a>
<div class="dropdown">
- <a href="rs/logout">Logout</a>
+ <a href="rs/logout">logout</a>
</div>
</div>
</nav>
diff --git a/web/gui/src/main/webapp/app/fw/mast/mast.js b/web/gui/src/main/webapp/app/fw/mast/mast.js
index ce6ddf2..5dad95f 100644
--- a/web/gui/src/main/webapp/app/fw/mast/mast.js
+++ b/web/gui/src/main/webapp/app/fw/mast/mast.js
@@ -24,7 +24,7 @@
var $log;
// configuration
- var mastHeight = 36,
+ var mastHeight = 48,
padMobile = 16;
var dialogId = 'app-dialog',
diff --git a/web/gui/src/main/webapp/app/onos.css b/web/gui/src/main/webapp/app/onos.css
index 4f4f4b1..6a4c9c7 100644
--- a/web/gui/src/main/webapp/app/onos.css
+++ b/web/gui/src/main/webapp/app/onos.css
@@ -19,7 +19,7 @@
*/
html {
- font-family: sans-serif;
+ font-family: 'Open Sans', sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
height: 100%;
diff --git a/web/gui/src/main/webapp/data/img/masthead-logo-mojo.png b/web/gui/src/main/webapp/data/img/masthead-logo-mojo.png
new file mode 100644
index 0000000..389b873
--- /dev/null
+++ b/web/gui/src/main/webapp/data/img/masthead-logo-mojo.png
Binary files differ
diff --git a/web/gui/src/main/webapp/data/img/nav-menu-mojo.png b/web/gui/src/main/webapp/data/img/nav-menu-mojo.png
new file mode 100644
index 0000000..aa3fd1b
--- /dev/null
+++ b/web/gui/src/main/webapp/data/img/nav-menu-mojo.png
Binary files differ
