quick search

less/header.less

@@ -252,17 +252,6 @@
 			margin-left: -30px;
 		}
 	}
-	.quick-search-results {
-		max-width: 400px;
-		max-height: 500px;
-		overflow-x: hidden;
-		overflow-y: auto;
-		a {
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden
-		}
-	}
 }
 
 .breadcrumb {

less/search.less

@@ -29,3 +29,29 @@
 	}
 }
 
+.quick-search-results {
+	max-width: 400px;
+	max-height: 500px;
+	overflow-x: hidden;
+	overflow-y: auto;
+	a {
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		overflow: hidden
+	}
+	.quick-search-title {
+		font-weight: 600;
+	}
+	.post-info {
+		font-size: 12px;
+		.fa-stack {
+			font-size: 10px;
+			border-radius: 50%;
+		}
+	}
+
+	.snippet {
+		word-break: break-word;
+		white-space: normal;
+	}
+}

templates/partials/quick-search-results.tpl

@@ -6,15 +6,23 @@
         <!-- ELSE -->
         <span title="{posts.user.username}" class="avatar avatar-sm avatar-rounded" style="background-color: {posts.user.icon:bgColor};">{posts.user.icon:text}</span>
         <!-- ENDIF posts.user.picture -->
-        {posts.topic.title}
-
-    </a>
+        <span class="quick-search-title">{posts.topic.title}</span>
+        <br/>
+        <p class="snippet">
+        {posts.snippet}
+        </p>
+        <small class="post-info pull-right">
+            <span class="fa-stack" style="{function.generateCategoryBackground, posts.category}"><i style="color:{posts.category.color};" class="fa {posts.category.icon} fa-stack-1x"></i></span> {posts.category.name} &bull;
+            <span class="timeago" title="{posts.timestampISO}"></span>
+        </small>
+     </a>
 </li>
+<li role="separator" class="divider"></li>
 <!-- END posts -->
 <!-- IF multiplePages -->
 <li class="text-center">
     <a href="{url}">
-        [[search:see-more-results]]
+        [[search:see-more-results, {matchCount}]]
     </a>
 </li>
 <!-- ENDIF multiplePages -->