Search Table layout

app/coffee/modules/search.coffee

@@ -174,7 +174,7 @@ SearchDirective = ($log, $compile, $templatecache, $routeparams, $location) ->
     linkTable = ($scope, $el, $attrs, $ctrl) ->
         applyAutoTab = true
         activeSectionName = "userstories"
-        tabsDom = $el.find("section.search-filter")
+        tabsDom = $el.find(".search-filter")
         lastSearchResults = null
 
         getActiveSection = (data) ->
@@ -197,7 +197,7 @@ SearchDirective = ($log, $compile, $templatecache, $routeparams, $location) ->
                         maxVal = value.length
                         selectedSection.name = name
                         selectedSection.value = value
-                        break;
+                        break
 
             if maxVal == 0
                 return selectedSection
@@ -206,7 +206,7 @@ SearchDirective = ($log, $compile, $templatecache, $routeparams, $location) ->
 
         renderFilterTabs = (data) ->
             for name, value of data
-                continue if name == "count"
+                tabsDom.find("li.#{name}").show()
                 tabsDom.find("li.#{name} .num").html(value.length)
 
         markSectionTabActive = (section) ->

app/partials/includes/modules/search-filter.jade

@@ -1,30 +1,36 @@
-section.search-filter
+ul.search-filter
-    ul
     li.userstories(data-name="userstories")
-            a.active(href="#")
+        a.active(
+            href="#"
+            title="{{ 'SEARCH.FILTER_USER_STORIES' | translate }}"
+        )
             span.icon.icon-bulk
-                span.num 0
+            span.num
             span.name(translate="SEARCH.FILTER_USER_STORIES")
 
     li.issues(data-name="issues")
-            a(href="#")
+        a(
+            href="#"
+            title="{{ 'SEARCH.FILTER_ISSUES' | translate }}"
+        )
             span.icon.icon-issues
-                span.num 0
+            span.num
             span.name(translate="SEARCH.FILTER_ISSUES")
 
     li.tasks(data-name="tasks")
-            a(href="#")
+        a(
+            href="#"
+            title="{{ 'SEARCH.FILTER_TASKS' | translate }}"
+        )
             span.icon.icon-bulk
-                span.num 0
+            span.num
             span.name(translate="SEARCH.FILTER_TASKS")
 
     li.wikipages(data-name="wikipages")
-            a(href="#")
+        a(
+            href="#"
+            title="{{ 'SEARCH.FILTER_WIKI' | translate }}"
+        )
             span.icon.icon-wiki
-                span.num 0
+            span.num
             span.name(translate="SEARCH.FILTER_WIKI")
-
-        //- li
-        //-     a(href="#")
-        //-         span.icon.icon-edit
-        //-         | 3 Users

app/styles/modules/search/search-filter.scss

@@ -1,26 +1,33 @@
 .search-filter {
-    ul {
+    border-top: 1px solid $whitish;
-        border-bottom: 3px solid $gray-light;
     display: flex;
-        padding-bottom: .5rem;
+    margin-bottom: 0;
-    }
+    z-index: 9;
-    li {
-        margin-right: 1rem;
-    }
     a {
-        @extend %large;
+        background: $white;
-        @extend %title;
+        color: $gray-light;
-        opacity: .2;
+        display: inline-block;
+        margin-right: 1rem;
+        padding: 1rem 1.25rem;
         &:hover {
-            color: $gray;
+            transition: color .3s linear;
-            opacity: 1;
+            .icon {
-            transition: opacity .3s linear;
+                margin-right: .4rem;
+            }
+            .name {
+                padding-left: 5px;
+            }
+        }
+        &.active {
+            border-left: 1px solid $whitish;
+            border-right: 1px solid $whitish;
+            color: $grayer;
+            position: relative;
+            top: 1px;
+            .icon {
+                color: $primary-light;
             }
         }
-    .active {
-        color: $gray;
-        opacity: 1;
-        transition: opacity .3s linear;
     }
     .icon {
         margin-right: .4rem;

app/styles/modules/search/search-result-table.scss

@@ -1,14 +1,11 @@
 .search-result-table {
+    border-top: 1px solid $whitish;
     .row {
-        align-content: center;
         align-items: center;
         display: flex;
         justify-content: space-between;
         padding: .5rem;
-        &:hover {
+
-            background: lighten($primary, 60%);
-            transition: background .2s ease-in;
-        }
         .ref {
             flex-basis: 30px;
             flex-grow: 1;
@@ -83,6 +80,10 @@
     }
 }
 
+.search-result-table-header {
+    @extend %bold;
+}
+
 .empty-search-results {
     margin-top: 4rem;
     text-align: center;