Refactor navigation to use bootstrap navbar and jasny navmenu

src/app/base/templates/base.html

@@ -1,4 +1,100 @@
-<header class="c-header c-header--fixed-top">
-    <nav ui-view="nav"></nav>
+<!--TODO: is it necessary to have nav in separate file?-->
+<!--<header>
+    <div ui-view="nav"></div>
+</header>-->
+<!--Navmenu is used on smaller viewports-->
+<nav class="navmenu navmenu-default navmenu-fixed-left offcanvas c-mobile-nav">
+    <a class="navmenu-brand" ui-sref="home">{{application.name}}</a>
+    <ul class="nav navmenu-nav">
+        <li>
+            <a ui-sref="productBrowse.products({page:'', favorites:'', sortBy:'', categoryid:''})">Product Browse</a>
+        </li>
+        <li>
+            <a ui-sref="categoryBrowse({page:'', sortBy:'', categoryID:''})">Category Browse</a>
+        </li>
+        <li uib-dropdown ng-if="!base.currentUser.Anonymous">
+            <a uib-dropdown-toggle role="button">Account <span class="caret"></a>
+            <ul class="dropdown-menu navmenu-nav" uib-dropdown-menu role="menu">
+                <li>
+                    <a ui-sref="account">My Account</a>
+                </li>
+                <li class="divider"></li>
+                <li ui-sref-active="active">
+                    <a ui-sref="myAddresses">Personal Addresses</a>
+                </li>
+                <li ui-sref-active="active">
+                    <a ui-sref="myPayments">Payment Methods</a>
+                </li>
+                <li ui-sref-active="active">
+                    <a ui-sref="favoriteProducts">Favorite Products</a>
+                </li>
+                <li ng-class="{active: application.$state.includes('orders') || application.$state.includes('orderDetails')}">
+                    <a ui-sref="orders({tab: 'history'})">Orders</a>
+                </li>
+                <li class="divider"></li>
+                <li>
+                    <a ng-click="application.logout()">Log out</a>
+                </li>
+            </ul>
+        </li>
+    </ul>
+</nav>
+<header>
+    <nav class="navbar navbar-default navbar-fixed-top">
+        <div class="container">
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu" data-canvas="body">
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand" ui-sref="home">{{application.name}}</a>
+            </div>
+            <ul class="nav navbar-nav c-desktop-nav">
+                <li>
+                <a ui-sref="productBrowse.products({page:'', favorites:'', sortBy:'', categoryid:''})">Product Browse</a>
+                </li>
+                <li>
+                <a ui-sref="categoryBrowse({page:'', sortBy:'', categoryID:''})">Category Browse</a>
+                </li>
+            </ul>
+            <ordercloud-product-search class="navbar-form navbar-left c-desktop-nav"></ordercloud-product-search>
+            <ul class="nav navbar-nav navbar-right">
+                <li class="c-mobile-nav">
+                    <a href="" ng-click="base.mobileSearch()"><i class="fa fa-search"></i></a>
+                </li>
+                <li>
+                    <a ui-sref="cart"><i class="fa fa-shopping-cart"></i> <span class="sr-only">Shopping Cart</span> <span class="badge" ng-bind="base.currentOrder.LineItemCount"></span></a>
+                </li>
+            </ul>
+            <ul class="nav navbar-nav navbar-right c-desktop-nav" ng-if="!base.currentUser.Anonymous">
+                <li class="c-desktop-nav" uib-dropdown>
+                    <a uib-dropdown-toggle role="button">Account <span class="caret"></span></a>
+                    <ul class="dropdown-menu-right" uib-dropdown-menu>
+                        <li>
+                            <a ui-sref="account">My Account</a>
+                        </li>
+                        <li class="divider"></li>
+                        <li ui-sref-active="active">
+                            <a ui-sref="myAddresses">Personal Addresses</a>
+                        </li>
+                        <li ui-sref-active="active">
+                            <a ui-sref="myPayments">Payment Methods</a>
+                        </li>
+                        <li ui-sref-active="active">
+                            <a ui-sref="favoriteProducts">Favorite Products</a>
+                        </li>
+                        <li ng-class="{active: application.$state.includes('orders') || application.$state.includes('orderDetails')}">
+                            <a ui-sref="orders({tab: 'history'})">Orders</a>
+                        </li>
+                        <li class="divider"></li>
+                        <li>
+                            <a ng-click="application.logout()">Log out</a>
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </div>
+    </nav>
 </header>
 <main ui-view class="container" cg-busy="application.stateLoading('base')"></main>

src/app/base/templates/navigation.html

@@ -1,45 +1,54 @@
-<div class="container">
-  <div class="c-topnav">
-    <div class="c-topnav__group--left">
-      <!--BRAND-->
-      <div class="c-topnav__item c-topnav__brand">
-        <a ui-sref="home">
-          {{application.name}}
-        </a>
-      </div>
-      <!--PRODUCT / CATEGORY BROWSE-->
-      <div class="c-topnav__item c-topnav__browse">
-        <a ui-sref="productBrowse.products({page:'', favorites:'', sortBy:'', categoryid:''})"><i class="fa fa-cubes"></i> <span class="hidden-xs hidden-sm">Product Browse</span></a>
-      </div>
-      <div class="c-topnav__item c-topnav__browse">
-        <a ui-sref="categoryBrowse({page:'', sortBy:'', categoryID:''})"><i class="fa fa-th"></i> <span class="hidden-xs hidden-sm">Category Browse</span></a>
-      </div>
-      <!--MOBILE PRODUCT SEARCH-->
-      <div class="c-topnav__item c-topnav__search hidden-lg hidden-md">
-        <a href="" ng-click="base.mobileSearch()"><i class="fa fa-search"></i></a>
-      </div>
-    </div>
-    <!--DESKTOP PRODUCT SEARCH-->
-    <ordercloud-product-search class="c-topnav__item c-topnav__search hidden-xs hidden-sm"></ordercloud-product-search>
-    <div class="c-topnav__group--right">
-      <!--CART-->
-      <div class="c-topnav__item c-topnav__cart">
-        <a ui-sref="cart"><i class="fa fa-shopping-cart c-topnav__cart-icon"></i> <span class="sr-only">Shopping Cart</span> <span class="badge c-topnav__cart-count" ng-bind="base.currentOrder.LineItemCount"></span></a>
-      </div>
-      <!--ACCOUNT-->
-      <div class="c-topnav__item c-topnav__account" uib-dropdown ng-if="!base.currentUser.Anonymous">
-        <a uib-dropdown-toggle role="button"><i class="fa fa-user"></i> <span class="hidden-xs hidden-sm">Account</span> <span class="caret hidden-xs"></span></a>
-        <ul class="dropdown-menu-right" uib-dropdown-menu>
-          <li><a ui-sref="account">My Account</a></li>
-          <li class="divider"></li>
-          <li ui-sref-active="active"><a ui-sref="myAddresses">Personal Addresses</a></li>
-          <li ui-sref-active="active"><a ui-sref="myPayments">Payment Methods</a></li>
-          <li ui-sref-active="active"><a ui-sref="favoriteProducts">Favorite Products</a></li>
-          <li ng-class="{active: application.$state.includes('orders') || application.$state.includes('orderDetails')}"><a ui-sref="orders({tab: 'history'})">Orders</a></li>
-          <li class="divider"></li>
-          <li><a ng-click="application.logout()">Log out</a></li>
-        </ul>
-      </div>
+<nav class="navbar navbar-default navbar-fixed-top">
+  <div class="container">
+    <div class="navbar-header">
+      <a class="navbar-brand" ui-sref="home">{{application.name}}</a>
+      <!-- Collect the nav links, forms, and other content for toggling -->
     </div>
+    <div>
+      <ul class="nav navbar-nav">
+        <li>
+          <a ui-sref="productBrowse.products({page:'', favorites:'', sortBy:'', categoryid:''})"><i class="fa fa-cubes"></i> <span>Product Browse</span></a>
+        </li>
+        <li>
+          <a ui-sref="categoryBrowse({page:'', sortBy:'', categoryID:''})"><i class="fa fa-th"></i> <span>Category Browse</span></a>
+        </li>
+      </ul>
+      <form class="navbar-form navbar-left">
+        <div class="form-group">
+          <input type="text" class="form-control" placeholder="Search">
+        </div>
+        <button type="submit" class="btn btn-default">Submit</button>
+      </form>
+      <ul class="nav navbar-nav navbar-right">
+        <li uib-dropdown ng-if="!base.currentUser.Anonymous">
+            <a uib-dropdown-toggle role="button"><i class="fa fa-user"></i> <span>Account</span> <span class="caret"></span></a>
+            <ul class="dropdown-menu-right" uib-dropdown-menu>
+              <li>
+                <a ui-sref="account">My Account</a>
+              </li>
+              <li class="divider"></li>
+              <li ui-sref-active="active">
+                <a ui-sref="myAddresses">Personal Addresses</a>
+              </li>
+              <li ui-sref-active="active">
+                <a ui-sref="myPayments">Payment Methods</a>
+              </li>
+              <li ui-sref-active="active">
+                <a ui-sref="favoriteProducts">Favorite Products</a>
+              </li>
+              <li ng-class="{active: application.$state.includes('orders') || application.$state.includes('orderDetails')}">
+                <a ui-sref="orders({tab: 'history'})">Orders</a>
+              </li>
+              <li class="divider"></li>
+              <li>
+                <a ng-click="application.logout()">Log out</a>
+              </li>
+            </ul>
+        </li>
+        <li>
+          <a ui-sref="cart"><i class="fa fa-shopping-cart"></i> <span class="sr-only">Shopping Cart</span> <span class="badge" ng-bind="base.currentOrder.LineItemCount"></span></a>
+        </li>
+      </ul>
+    </div><!-- /.navbar-collapse -->
   </div>
-</div>
+</nav>

src/app/productBrowse/templates/productBrowse.html

@@ -19,7 +19,7 @@
 
         <!--START CATEGORY TREE-->
         <aside class="col-md-3 visible-md visible-lg">
-            <div class="panel panel-default" hl-sticky anchor="top" offset-top="70" stick-limit="true" media-query="min-width: 992px">
+            <div class="panel panel-default">
                 <div class="panel-heading" ng-if="productBrowse.treeConfig.treeData.length">
                     <b class="panel-title">Categories</b>
                 </div>

src/app/productSearch/templates/product-search-match.html

@@ -0,0 +1,3 @@
+<a href tabindex="-1" ng-attr-title="{{match.label}}">
+    <span ng-bind-html="'<b>' + (match.model.Name | uibTypeaheadHighlight:query) + '</b>' + '<br/><small>' + (match.model.ID | uibTypeaheadHighlight:query) + '</small>'"></span>
+</a>

src/app/productSearch/templates/product-search-popup.html

@@ -0,0 +1,5 @@
+<ul class="dropdown-menu" ng-show="isOpen() && !moveInProgress" role="listbox" aria-hidden="{{!isOpen()}}">
+    <li class="uib-typeahead-match" ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index, $event)" role="option" id="{{::match.id}}">
+        <div uib-typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
+    </li>
+</ul>

src/app/productSearch/templates/productSearch.component.html

@@ -1,40 +1,37 @@
 <form name="OrderCloudProductSearch" class="c-productsearch c-typeahead" ng-submit="$ctrl.onHardEnter($ctrl.searchTerm)" pretty-submit>
-
-    <!-- Typeahead Result Template -->
-    <script type="text/ng-template" id="oc-product-search-result.html">
-        <a href tabindex="-1" ng-attr-title="{{match.label}}">
-            <span ng-bind-html="'<b>' + (match.model.Name | uibTypeaheadHighlight:query) + '</b>' + '<br/><small>' + (match.model.ID | uibTypeaheadHighlight:query) + '</small>'"></span>
-        </a>
-    </script>
-
-    <div class="form-group" ng-class="{open:noResults}">
+    <!-- Search Input -->
+    <div class="input-group">
         <input type="search"
-                class="form-control"
-                placeholder="Search Products..."
-                ng-model="$ctrl.searchTerm"
-                uib-typeahead="product as product.Name for product in $ctrl.getSearchResults()"
-                disable-validation-message
-                typeahead-append-to="'.c-typeahead__results'"
-                typeahead-on-select="$ctrl.onSelect($item.ID)"
-                typeahead-focus-first="false"
-                typeahead-wait-ms="300"
-                typeahead-no-results="noResults"
-                typeahead-loading="loading"
-                typeahead-template-url="oc-product-search-result.html"
+            class="form-control"
+            placeholder="Search Products..."
+            ng-model="$ctrl.searchTerm"
+            uib-typeahead="product as product.Name for product in $ctrl.getSearchResults()"
+            disable-validation-message
+            typeahead-on-select="$ctrl.onSelect($item.ID)"
+            typeahead-focus-first="false"
+            typeahead-wait-ms="300"
+            typeahead-no-results="noResults"
+            typeahead-loading="loading"
+            typeahead-append-to="'.c-typeahead__results'"
+            typeahead-popup-template-url="productSearch/templates/product-search-popup.html"
+            typeahead-template-url="productSearch/templates/product-search-match.html"
         />
-        <button class="sr-only" type="submit" value="Search"></button>
-        <div class="c-typeahead__results">
-            <div class="c-typeahead__results--empty" ng-if="$ctrl.searchTerm && noResults">
-                <span>No matches found</span>
-            </div>
-            <div class="c-typeahead__results--loading" ng-if="loading">
-                <div class="indicator-container">
-                    <div class="indicator">
-                        <div class="animation">
-                            <div class="dot"></div>
-                            <div class="dot"></div>
-                            <div class="dot"></div>
-                        </div>
+        <span class="input-group-btn">
+            <button class="btn btn-default" type="submit" value="Search"><i class="fa fa-search"></i></button>
+        </span>
+    </div>
+    <!-- Typeahead Results -->
+    <div class="c-typeahead__results">
+        <div class="c-typeahead__results--empty" ng-if="$ctrl.searchTerm && noResults">
+            <span>No matches found</span>
+        </div>
+        <div class="c-typeahead__results--loading" ng-if="loading">
+            <div class="indicator-container">
+                <div class="indicator">
+                    <div class="animation">
+                        <div class="dot"></div>
+                        <div class="dot"></div>
+                        <div class="dot"></div>
                     </div>
                 </div>
             </div>