WIP – refactored search view

assets/js/src/search.coffee

@@ -1,20 +1,25 @@
 'use strict'
 
-showSearch = ->
-  $(".content-wrapper__inner").hide()
-  $('#search-results').css "margin-top", "3rem"
-  $('#search-results').css "margin-bottom", "9rem"
+$ ->
+  showSearch = ->
+    $(".content").hide()
+    $('#search-results').addClass('active')
 
-hideSearch = ->
-  $(".content-wrapper__inner").show()
-  $('#search-results').css "padding-top", "0"
-  $('#search-results').css "margin-bottom", "0"
+  hideSearch = ->
+    $(".content").show()
+    $('#search-results').removeClass('active')
 
-$ ->
   $("#search-field").ghostHunter
     results           : "#search-results"
     zeroResultsInfo   : false
     onKeyUp           : true
     displaySearchInfo : true
-    onComplete        : (query) ->
+    result_template   :
+      """
+      <a class="result" href='{{link}}'>
+        <h2>{{title}}</h2>
+        <h4>{{pubDate}}</h4>
+      </a>
+      """
+    onComplete : (query) ->
       if query.length > 0 then showSearch() else hideSearch()

assets/scss/components/_search.scss

@@ -1,4 +1,4 @@
-#search {
+#search-form {
   padding: .25rem 0;
 }
 
@@ -9,30 +9,47 @@
   border: 1.5px solid lighten($hover-color, 5%);
   border-radius: 27px;
 }
-.icon-search {
-  position: relative;
-  top: 2px;
-  left: 13rem;
-  color: #bbb;
-}
+
 #search-results {
   text-align: center;
+  &.active {
+    margin-top: 3rem;
+    margin-bottom: 9rem;
+  }
+
   > p {
     margin-bottom: 3rem;
-    font-size: 1.4rem;
-    color: #bbb;
+    font-size: 1.2rem;
+  }
+}
+
+.result {
+  > h2,
+  > h4 {
+    color: $gray-darker;
   }
-  a {
-    display: block;
-    padding: 1em 2.5%;
-    margin-bottom: 1.3rem;
-    text-decoration: none;
-    word-wrap: break-word;
-    background-color: none;
-    border: 1px solid #d9d9d9;
-    &:hover {
-      background-color: #f5f5f5;
-      transition: 0s;
+
+  display: block;
+  padding: 1em 2.5%;
+  margin-bottom: 1.3rem;
+  text-decoration: none;
+  word-wrap: break-word;
+  border: 1px solid $primary-color;
+  border-radius: 5px;
+  &:hover {
+    transition: .5s;
+    > h2,
+    > h4 {
+      color: $hover-color;
+      transition: .5s;
     }
   }
 }
+
+.icon-search {
+  position: relative;
+  top: 2px;
+  left: 13rem;
+  color: $gray;
+  text-shadow: 1px 1px 0 $gray;
+}

gulpfile.coffee

@@ -58,7 +58,7 @@ gulp.task 'css', ->
   gulp.src src.css.vendor
   .pipe changed dist.css
   .pipe addsrc src.sass.main
-  .pipe sass()
+  .pipe sass().on "error", gutil.log
   .pipe concat 'uno.css'
   .pipe prefix()
   .pipe strip

partials/search.hbs

@@ -1,5 +1,5 @@
 <section id="search-container">
-  <form id="search">
+  <form id="search-form">
     <i class="icon icon-search"></i>
     <input type="text", name="search", placeholder="git, css, javascript,..." id="search-field" />
   </form>