Finish basic filtering

assets/scripts/app/controllers/dashboard/repositories.coffee

@@ -6,13 +6,11 @@ Controller = Ember.Controller.extend
     filter = @get('filter')
     repos = @get('model')
 
-    if filter
+    if Ember.isBlank(filter)
-      repos.filter (item, index) ->
-
-        item.slug.match(new RegExp(filter))
-
-    else
       repos
+    else
+      repos.filter (item, index) ->
+        item.slug.match(new RegExp(filter))
 
   ).property('filter', 'model')
 

assets/scripts/app/routes/dashboard/repositories.coffee

@@ -3,6 +3,8 @@ require 'routes/route'
 TravisRoute = Travis.Route
 
 Route = TravisRoute.extend
+  queryParams:
+    filter: { replace: true }
   model: ->
     apiEndpoint = @get('config').api_endpoint
     $.ajax(apiEndpoint + '/repos?member=lislis', {

assets/scripts/app/templates/dashboard/repositories.hbs

@@ -1,3 +1,38 @@
+<div id="filters-search">
+  <div class="row">
+    <!--
+    <div class="small-6 medium-3 large-2 columns" id="filters">
+      <ul>
+        <li class="filters-start">
+          <div class="current-org-avatar org-travisci"></div>Travis CI <div class="arrow-down"></div>
+          <ul>
+            <li class="org-all">All organizations</li>
+            <li class="currently-selected"><div class="org-avatar org-travisci">Travis CI</div>Travis CI</li>
+            <li><div class="org-avatar org-saltinejustine">Justine Arreche</div>Justine Arreche</li>
+            <li><div class="org-avatar org-openkarma">Open Karma</div>Open Karma</li>
+            <li><div class="org-avatar org-eurucamp">eurucamp</div>eurucamp</li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+    -->
+    <!-- <div class="small-6 medium-2 large-2 columns no-padding" id="views">
+      <ul>
+        <li class="views-start">
+          View all repos <div class="arrow-down"></div>
+          <ul>
+            <li class="currently-selected">View all repos</li>
+            <li>Queued builds</li>
+            <li>Failed builds</li>
+            <li>Passed builds</li>
+          </ul>
+        </li>
+      </ul>
+    </div> -->
+    {{input placeholder="Search all repositories" class="search-field" value=filter}}
+  </div>
+</div>
+
 <div class="tiles">
   <div class="row">
   {{#each repo in filteredRepositories}}

assets/scripts/app/templates/layouts/dashboard.hbs

@@ -28,47 +28,6 @@
     </div>
   </div>
 
-<div id="filters-search">
-  <div class="row">
-    <div class="small-6 medium-3 large-2 columns" id="filters">
-      <ul>
-        <li class="filters-start">
-          <div class="current-org-avatar org-travisci"></div>Travis CI <div class="arrow-down"></div>
-          <ul>
-            <li class="org-all">All organizations</li>
-            <li class="currently-selected"><div class="org-avatar org-travisci">Travis CI</div>Travis CI</li>
-            <li><div class="org-avatar org-saltinejustine">Justine Arreche</div>Justine Arreche</li>
-            <li><div class="org-avatar org-openkarma">Open Karma</div>Open Karma</li>
-            <li><div class="org-avatar org-eurucamp">eurucamp</div>eurucamp</li>
-          </ul>
-        </li>
-      </ul>
-    </div>
-    <!-- <div class="small-6 medium-2 large-2 columns no-padding" id="views">
-      <ul>
-        <li class="views-start">
-          View all repos <div class="arrow-down"></div>
-          <ul>
-            <li class="currently-selected">View all repos</li>
-            <li>Queued builds</li>
-            <li>Failed builds</li>
-            <li>Passed builds</li>
-          </ul>
-        </li>
-      </ul>
-    </div> -->
-    <div class="small-6 medium-6 large-6 columns">
-      <div id="search">
-        <ul>
-          <li class="search-field">
-            Search all repositories <div class="search-icon">Search</div>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</div>
-
 {{yield}}
 
 </div>

assets/styles/dashboard/dashboard.scss

@@ -362,14 +362,15 @@ a {
   line-height  : 17px;
 }
 
-.search-icon {
+.search-field {
-  background      : url('/images/dashboard/search-icon.svg') no-repeat;
+  background-image   : url('/images/dashboard/search-icon.svg');
-  background-size : contain;
+  background-repeat  : no-repeat;
-  display         : inline-block;
+  background-position: right center;
-  float           : right;
+  display            : inline-block;
-  height          : 16px;
+  float              : right;
-  width           : 16px; 
+  border             : 1px solid #666;
-  text-indent     : -9999px;
+  padding            : 0.5em;
+  width              : 100px;
 }
 
 .tiles {