Major navigation refinement

KiiCorp · Nov 13, 2017 · 43bf4b1 · 43bf4b1
1 parent 9420d26
commit 43bf4b1
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 19 deletions.
diff --git a/client/app/assets/css/redash-newstyle.less b/client/app/assets/css/redash-newstyle.less
@@ -153,4 +153,41 @@ page-header, .dashboard__header {
 
 .navbar .collapse.in {
   background: #fff;
+  position: relative;
+  z-index: 999;
+  padding: 0 10px 0 10px;
+}
+
+@media (max-width: 767px) {
+  .navbar-brand {
+    left: 2%;
+  }
+
+  //Fix navbar collapse
+  .navbar .collapse.in {
+    border: none;
+
+    .nav__main li a {
+      padding: 10px 15px;
+      display: block;
+      text-align: left;
+      float: none !important; // oops
+    }
+
+    .navbar-form {
+      margin-bottom: 0;
+      margin-top: 0;
+    }
+
+    .navbar-right {
+      margin-bottom: 0;
+    }
+  }
+}
+
+@media (max-width: 767px) {
+  .navbar-form {
+    .navbar__search__input {
+    }
+  }
 }
diff --git a/client/app/components/app-header/app-header.html b/client/app/components/app-header/app-header.html
@@ -13,26 +13,11 @@
     <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">
+      <ul class="nav navbar-nav nav__main">
         <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>
+          <a type="button" class="btn hidden-xs" 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>
@@ -51,7 +36,7 @@
       </ul>
 
       <!-- Add New Button -->
-      <div class="btn-group navbar-btn navbar-left btn__new" uib-dropdown is-open="status.isopen">
+      <div class="btn-group navbar-btn navbar-left btn__new hidden-xs" uib-dropdown is-open="status.isopen">
         <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
           <i class="zmdi zmdi-plus"></i> Create <span class="caret"></span>
         </button>
@@ -95,7 +80,7 @@
       <!-- Search -->
       <form class="navbar-form navbar-right" role="search" ng-submit="$ctrl.searchQueries()">
         <div class="input-group menu-search">
-          <input type="text" ng-model="$ctrl.term" class="form-control" placeholder="Search queries...">
+          <input type="text" ng-model="$ctrl.term" class="form-control navbar__search__input" placeholder="Search queries...">
           <span class="input-group-btn">
             <button type="submit" class="btn btn-default"><span class="zmdi zmdi-search"></span></button>
           </span>