UI: Updated masthead styles so everything is properly aligned
Change-Id: Iaa594aaafd6edefa796e60d8ef1faaeba48064fa
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 3470f18..24eff91 100644
--- a/web/gui/src/main/webapp/app/fw/mast/mast.css
+++ b/web/gui/src/main/webapp/app/fw/mast/mast.css
@@ -32,15 +32,25 @@
}
#mast .nav-menu-button {
- width: 26px;
- height: 21px;
- margin: 14px 18px 14px 14px;
+ display: inline-block;
+ vertical-align: middle;
+ text-align: center;
+ line-height: 48px;
+ padding: 0 12px;
+ cursor: pointer; cursor: hand;
+ /* Needed to removed 3px space at the bottom of img tags */
+ font-size: 0;
}
-#mast img.logo {
+#mast .nav-menu-button img {
+ width: 25px;
+ vertical-align: middle;
+}
+
+#mast .logo {
height: 47px;
width: 511px;
- margin: 0;
+ vertical-align: bottom;
}
#mast-right {
@@ -49,7 +59,7 @@
position: relative;
top: 0;
padding-right: 15px;
- line-height: 44px;
+ line-height: 48px;
}
/*
@@ -57,10 +67,17 @@
*/
#mast-right div.ctrl-btns {
- position: relative;
float: right;
}
+#mast-right div.icon {
+ box-sizing: border-box;
+ position: relative;
+ height: 48px;
+ width: 48px;
+ padding: 9px;
+}
+
#mast .dropdown-parent {
position: relative;
float: right;
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 592f0c8..dfe4e23 100644
--- a/web/gui/src/main/webapp/app/fw/mast/mast.html
+++ b/web/gui/src/main/webapp/app/fw/mast/mast.html
@@ -1,7 +1,10 @@
<!-- Masthead partial HTML -->
-<img class="nav-menu-button clickable" src="data/img/nav-menu-mojo.png"
- ng-click="mastCtrl.toggleNav()"></div>
+<span class="nav-menu-button clickable" ng-click="mastCtrl.toggleNav()">
+ <img src="data/img/nav-menu-mojo.png"/>
+</span>
+
<img class="logo" src="data/img/masthead-logo-mojo.png">
+
<div id="mast-right">
<nav>
<div class="dropdown-parent">
@@ -11,8 +14,8 @@
</div>
</div>
<div class="ctrl-btns">
- <div class="active clickable"
- icon icon-size="42" icon-id="query"
+ <div class="active clickable icon"
+ icon icon-size="32" icon-id="query"
tooltip tt-msg="helpTip"
ng-click="directTo()"></div>
</div>
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
index 4dd3541..d8cd6d5 100644
--- a/web/gui/src/main/webapp/data/img/nav-menu-mojo.png
+++ b/web/gui/src/main/webapp/data/img/nav-menu-mojo.png
Binary files differ
