From 9b84e1b1646b9fabd2148239724f231d4823d9b0 Mon Sep 17 00:00:00 2001
From: James Allen <james@sharelatex.com>
Date: Thu, 24 Mar 2016 11:38:56 +0000
Subject: [PATCH] Improve styling of wiki search

---
 services/web/app/views/wiki/page.jade         | 14 ++++-------
 .../web/public/coffee/main/templates.coffee   | 14 ++++++++++-
 services/web/public/stylesheets/app/wiki.less | 24 ++++++++++++++++---
 3 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/services/web/app/views/wiki/page.jade b/services/web/app/views/wiki/page.jade
index 53d4fad401..c7cc876408 100644
--- a/services/web/app/views/wiki/page.jade
+++ b/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}
 							
diff --git a/services/web/public/coffee/main/templates.coffee b/services/web/public/coffee/main/templates.coffee
index b9a1d3bc5d..3d05d4ea0f 100644
--- a/services/web/public/coffee/main/templates.coffee
+++ b/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)->
diff --git a/services/web/public/stylesheets/app/wiki.less b/services/web/public/stylesheets/app/wiki.less
index c8e3a6538c..053d0b0619 100644
--- a/services/web/public/stylesheets/app/wiki.less
+++ b/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);
+		}
 	}
 
 }
\ No newline at end of file