Improve styling of wiki search

services/web/app/views/wiki/page.jade

@@ -23,20 +23,16 @@ block content
 											style="cursor: pointer;",
 											ng-show="searchQueryText.length > 0"
 										)
-								.col-md-2
+								.col-md-3.text-right
 									a.btn.btn-primary(ng-click="showMissingTemplateModal()") #{translate("missing_page")}
 
 							.row
 								.col-md-12(ng-cloak)
-									ul.list-unstyled
-										li(ng-repeat='hit in hits')
-											.searchResult.thumbnail
-												.row
-													.col-md-12
-														a(ng-href='{{hit.url}}')
-															span(ng-bind-html='hit.name')
+									a(ng-href='{{hit.url}}',ng-repeat='hit in hits').search-result.card.card-thin
+										span(ng-bind-html='hit.name')
+										div.search-result-content(ng-show="hit.content != ''", ng-bind-html='hit.content')
 
-					.card(ng-non-bindable)
+					.card.row-spaced(ng-non-bindable)
 						.page-header
 							h1 #{title}
 							

services/web/public/coffee/main/templates.coffee

@@ -26,10 +26,22 @@ define [
 		buildHitViewModel = (hit)->
 			page_underscored = hit.pageName.replace(/\s/g,'_')
 			section_underscored = hit.sectionName.replace(/\s/g,'_')
+			content = hit._highlightResult.content.value
+			# Replace many new lines
+			content = content.replace(/\n\n+/g, "\n\n")
+			lines = content.split("\n")
+			# Only show the lines that have a highlighted match
+			matching_lines = []
+			for line in lines
+				if !line.match(/^\[edit\]/)
+					content += line + "\n"
+					if line.match(/<em>/)
+						matching_lines.push line
+			content = matching_lines.join("\n...\n")
 			result =
 				name : hit._highlightResult.pageName.value + " - " + hit._highlightResult.sectionName.value
 				url :"/learn/#{page_underscored}##{section_underscored}"
-			console.log result
+				content: content
 			return result
 
 		updateHits = (hits)->

services/web/public/stylesheets/app/wiki.less

@@ -104,9 +104,27 @@
 
 	/*]]>*/
 
-	.thumbnail {
-		margin-bottom:0px;
-		margin-top:5px;
+	a.search-result {
+		display: block;
+		margin-top: @line-height-computed / 2;
+		.search-result-content {
+			margin-top: @line-height-computed / 4;
+			white-space: pre-wrap;
+			font-size: 0.8em;
+			color: @gray-dark;
+			em {
+				font-weight: bold;
+			}
+		}
+		
+		&:hover {
+			text-decoration: none;
+			.search-result-content {
+				color: @gray-darker;
+				
+			}
+			box-shadow: 0 2px 4px rgba(0,0,0,0.35);
+		}
 	}
 
 }