CSS & Font fixes

client/app/app.less

@@ -74,3 +74,13 @@
 .sidebar-content {
     width: 100% !important;
 }
+
+.search-result-image{
+    width: 32px;
+    height: 32px;
+}
+
+ul.dropdown-menu{
+    left: -112px!important;
+    width: 480px!important;
+}

client/app/components/navbar/navbar.html

@@ -51,8 +51,29 @@
             </ul>
         </div>
     </div>
-    <ul class="main-nav pull-right" ng-if="!$root.currentUser">
-        <li class="ms-hover">
+    <ul class="main-nav pull-right">
+        <li>
+            <form action="" class="search-form">
+                <div class="form-group has-feedback">
+                    <label for="search" class="sr-only">Search</label>
+                    <input type="text" class="form-control" name="search" id="search" placeholder="search">
+                    <span class="glyphicon glyphicon-search form-control-feedback"></span>
+                </div>
+            </form>
+            <!--
+            <form class="search-form">
+                <div class="search-pane">
+                    <input type="text" ng-model="selected" placeholder="Search..."
+                           typeahead="result for results in getSearchResults($viewValue)"
+                           typeahead-template-url="app/views/templates/searchResult.html"
+                           typeahead-loading="loadingSearchResults"
+                           class="form-control"/>
+                    <i ng-show="loadingSearchResults" class="glyphicon glyphicon-refresh"></i>
+                </div>
+            </form>
+            -->
+        </li>
+        <li class="ms-hover" ng-if="!$root.currentUser">
             <a href="#" data-toggle="dropdown" class="dropdown-toggle">
                 Login/Signup
                 <i class="fa fa-angle-down"></i>

client/app/components/navbar/navbar.less

@@ -35,4 +35,56 @@ div.social-buttons a {
 .btn-google:hover {
   color: #fff !important;
   background-color: #e42f10 !important;
+}
+
+
+.search-form .form-group {
+  float: right !important;
+  transition: all 0.35s, border-radius 0s;
+  width: 32px;
+  height: 32px;
+  background-color: #fff;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
+  border-radius: 25px;
+  border: 1px solid #ccc;
+}
+.search-form .form-group input.form-control {
+  padding-right: 20px;
+  border: 0 none;
+  background: transparent;
+  box-shadow: none;
+  display:block;
+}
+.search-form .form-group input.form-control::-webkit-input-placeholder {
+  display: none;
+}
+.search-form .form-group input.form-control:-moz-placeholder {
+  /* Firefox 18- */
+  display: none;
+}
+.search-form .form-group input.form-control::-moz-placeholder {
+  /* Firefox 19+ */
+  display: none;
+}
+.search-form .form-group input.form-control:-ms-input-placeholder {
+  display: none;
+}
+.search-form .form-group:hover,
+.search-form .form-group.hover {
+  width: 100%;
+  border-radius: 4px 25px 25px 4px;
+}
+.search-form .form-group span.form-control-feedback {
+  position: absolute;
+  top: -1px;
+  right: -2px;
+  z-index: 2;
+  display: block;
+  width: 34px;
+  height: 34px;
+  line-height: 34px;
+  text-align: center;
+  color: #3596e0;
+  left: initial;
+  font-size: 14px;
 }

client/app/views/templates/searchResult.html

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