Finished

client/app/app.less

@@ -11,6 +11,7 @@
 @import 'directives/notifications/notifications.less';
 @import 'directives/playlist/playlist.less';
 @import 'directives/scheduler/scheduler.less';
+@import 'directives/search/mix/searchMix.less';
 @import 'directives/waveform/waveform.less';
 @import 'views/home/home.less';
 @import 'views/mixes/item/mix.less';

client/app/components/navbar/navbar.html

@@ -24,7 +24,7 @@
 <div class="top-nav ">
     <ul class="nav pull-right top-menu">
         <li>
-            <input type="text" class="form-control search" placeholder="Search">
+            <dss-search-mix mix="mix"></dss-search-mix>
         </li>
         <li class="dropdown" ng-if="$root.currentUser">
             <a data-toggle="dropdown" class="dropdown-toggle" href="#">

client/app/directives/search/mix/searchMix.html

@@ -1,7 +1,8 @@
 <input type="text"
-       class="form-control"
+       id="search-input"
+       class="form-control navbar-search-input __search"
        ng-model="mix.display_name"
-       placeholder="Type to search"
-       typeahead="result as result.name for results in getMixSearchResults($viewValue)"
+       placeholder="Search"
+       uib-typeahead="result as result.name for results in getMixSearchResults($viewValue)"
        typeahead-on-select="chooseValue($item)"
-       typeahead-template-url="app/directives/search/mix/searchResult.html">
+       typeahead-template-url="app/directives/search/mix/searchResult.html">

client/app/directives/search/mix/searchMix.less

@@ -0,0 +1,27 @@
+.twitter-typeahead, .tt-hint, .tt-input, .tt-menu {
+  width: 418px;
+}
+
+.navbar-search-input {
+  width: 418px !important;
+  margin-top: 6px;
+  -webkit-transition: all .3s ease;
+  -moz-transition: all .3s ease;
+  -ms-transition: all .3s ease;
+  -o-transition: all .3s ease;
+  transition: all .3s ease;
+  border: 1px solid #fff;
+  box-shadow: none;
+  background-repeat: no-repeat;
+  background-position: 10px 8px;
+  background-image: url("http://ext-test.deepsouthsounds.com:9000/assets/images/search-icon.png")!important;
+  padding: 0 5px 0 35px!important;
+  color: #000!important;
+}
+
+.navbar-search-input:focus {
+  border: 1px solid #eaeaea;
+  box-shadow: none;
+  color: #c8c8c8;
+  font-weight: 300;
+}

client/app/directives/search/mix/searchMixDirective.js

@@ -9,8 +9,13 @@ angular.module('dssWebApp')
             },
             link: function (scope, element, attrs) {
                 scope.chooseValue = function (viewValue) {
-                    console.log(viewValue);
-                    scope.mix = viewValue;
+                    //console.log(viewValue);
+                    //scope.mix = viewValue;
+                    document.activeElement.blur();
+                    $('#search-input').blur();
+                };
+                scope.dismiss = function () {
+                    alert('Hello');
                 };
                 scope.getMixSearchResults = function (val) {
                     console.log("Getting results");
@@ -24,7 +29,9 @@ angular.module('dssWebApp')
                         return response.data.map(function (item) {
                             return {
                                 'id': item.id,
+                                'user': item.user,
                                 'slug': item.slug,
+                                'url': item.url,
                                 'display_name': item.title,
                                 'image': item.image
                             };

client/app/directives/search/mix/searchResult.html

@@ -1,4 +1,6 @@
-<a>
-    <img ng-src="{{match.model.image}}" width="16">
-    <span bind-html-unsafe="match.model.display_name | typeaheadHighlight:query"></span>
+<a ui-sref="root.user.mix({user: match.model.user, mix: match.model.slug})" ng-click="dismiss()">
+    <div class="user-head" style="width:420px; left: -60px;">
+        <img ng-src="{{match.model.image}}" alt="">
+        <span ng-bind-html="match.model.display_name | typeaheadHighlight:query"> </span>
+    </div>
 </a>

client/app/views/radio/radio.html

@@ -19,7 +19,8 @@
                         </span>
                     </div>
                 </div>
-            </div>            <div class="form-group">
+            </div>
+            <div class="form-group">
                 <div class="col-md-12">
                     <div class="input-group">
                         <button class="btn btn-primary" ng-click="shuffleTrack()">

client/app/views/templates/searchResult.html

@@ -1,12 +1,12 @@
 <a ui-sref="root.user.mix({user: match.model.user, mix: match.model.slug})" class="navbar-search main-search-result">
-    <div class="widget">
-        <div class="widget-simple">
-            <div href="javascript:void(0)" class="widget-icon pull-left animation-fadeIn themed-background">
+    <div class="panel">
+        <div class="panel-body">
+            <div class="bio-chart">
                 <img ng-src="{{match.model.image}}" class="search-result-image widget-icon sidebar-user-avatar pull-right"/>
             </div>
-            <h4 class="widget-content text-right animation-hatch">
+            <div class="bio-desk">
                 <small>{{match.model.title}}</small>
-            </h4>
+            </div>
         </div>
     </div>
 </a>