Further simplify navigation

client/app/assets/css/redash-newstyle.less

@@ -6,6 +6,7 @@
 
 body {
   //padding-bottom: 0px;
+  padding-top: 0;
 }
 
 #footer {
@@ -30,12 +31,47 @@ page-header, .dashboard__header {
 }
 
 .navbar {
-  max-height: 50px;
+  //max-height: 50px;
+  min-height: initial;
+  height: 49px;
+  border: 1px solid #fff;
+  border-top: none;
+  border-radius: 0;
+  background: #fff;
+  margin-bottom: 10px;
 
   a.navbar-brand {
     padding: 4px 0px 0px 0px;
     margin-left: -3px !important;
   }
+
+  .btn-group.open .dropdown-toggle {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+
+  .btn-group .btn:active {
+    box-shadow: none;
+  }
+}
+
+.navbar-default .navbar-nav > li > a {
+  color: #000;
+  font-weight: 500;
+
+  &:active, &:hover, &:focus {
+    color: #000;
+  }
+}
+
+.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
+  background-color: fade(@redash-gray, 10%);
+  color: #111;
+}
+
+.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
+  background-color: fade(@redash-gray, 10%);
+  color: #111;
 }
 
 .tab-nav {
@@ -49,15 +85,21 @@ page-header, .dashboard__header {
 }
 
 .btn__new {
-  margin-top: 10px;
   margin-left: 15px;
 }
 
+.navbar-btn {
+  margin-top: 10px;
+  margin-bottom: 9px;
+}
+
 .navbar-brand {
   position: absolute;
   left: 49%;
   margin-left: -50px !important;  /* 50% of your logo width */
   display: block;
+  zoom: 0.9;
+  margin-top: 3px;
 }
 
 .tile {
@@ -90,6 +132,10 @@ page-header, .dashboard__header {
   //box-shadow: fade(@redash-gray, 20%) 0px 5px 10px -5px;
   //border-bottom: 1px solid fade(@redash-gray, 10%);
 
+  .navbar-collapse {
+    padding-left: 0;
+  }
+
   a.dropdown--profile {
     padding-top: 10px;
     padding-bottom: 10px;
@@ -102,3 +148,9 @@ page-header, .dashboard__header {
     border: none;
   }
 }
+
+// Mobile fixes
+
+.navbar .collapse.in {
+  background: #fff;
+}

client/app/components/app-header/app-header.html

@@ -1,5 +1,5 @@
-<nav class="navbar navbar-default navbar-fixed-top app-header" role="navigation">
-  <div class="container">
+<nav class="navbar navbar-default app-header" role="navigation">
+  <div class="container"">
     <div class="navbar-header">
       <button type="button" class="navbar-toggle" ng-click="isNavOpen = !isNavOpen">
         <span class="sr-only">Toggle navigation</span>
@@ -12,11 +12,27 @@
     </div>
     <div class="collapse navbar-collapse" uib-collapse="!isNavOpen">
       <!-- Main Left Nav-->
+
+      <!--
+      <div class="btn-group pull-left" uib-dropdown>
+        <a id="split-button" class="btn btn-default" href="dashboards">Dashboards</a>
+        <a type="button" class="btn btn-default" uib-dropdown-toggle>
+          <span class="caret"></span>
+          <span class="sr-only">Split button!</span>
+        </a>
+        <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="split-button">
+          <li role="menuitem" ng-repeat="dashboard in $ctrl.dashboards">
+            <a href="dashboard/{{dashboard.slug}}" ng-bind="dashboard.name"></a>
+          </li>
+        </ul>
+      </div> -->
+
       <ul class="nav navbar-nav">
-        <li class="dropdown" ng-show="$ctrl.showDashboardsMenu" uib-dropdown>
-          <a href="#" class="dropdown-toggle" uib-dropdown-toggle title="Dashboards">
-            <span class="visible-xs visible-md visible-lg">Dashboards <b class="caret"></b></span>
-            <span class="visible-sm"><i class="zmdi zmdi-view-dashboard"></i> <b class="caret"></b></span>
+        <li class="dropdown btn-group" ng-show="$ctrl.showDashboardsMenu" uib-dropdown>
+          <a id="split-button" class="btn" href="dashboards">Dashboards</a>
+          <a type="button" class="btn" uib-dropdown-toggle>
+            <span class="caret"></span>
+            <span class="sr-only">Dashboards</span>
           </a>
           <ul class="dropdown-menu" uib-dropdown-menu>
             <li><a href="dashboards">All Dashboards</a></li>
@@ -37,12 +53,12 @@
       <!-- Add New Button -->
       <div class="btn-group navbar-btn navbar-left btn__new" uib-dropdown is-open="status.isopen">
         <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
-          + New <span class="caret"></span>
+          <i class="zmdi zmdi-plus"></i> Create <span class="caret"></span>
         </button>
         <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
-          <li role="menuitem"><a ng-show="$ctrl.currentUser.hasPermission('create_dashboard')" ng-click="$ctrl.newDashboard()">New Dashboard</a></li>
-          <li role="menuitem" ng-show="$ctrl.showNewQueryMenu"><a href="queries/new">New Query</a></li>
-          <li role="menuitem"><a href="alerts/new">New Alert</a></li>
+          <li role="menuitem"><a ng-show="$ctrl.currentUser.hasPermission('create_dashboard')" ng-click="$ctrl.newDashboard()">Dashboard</a></li>
+          <li role="menuitem" ng-show="$ctrl.showNewQueryMenu"><a href="queries/new">Query</a></li>
+          <li role="menuitem"><a href="alerts/new">Alert</a></li>
         </ul>
       </div>