From 3d0be0d47ca3de006d9bdfb298c105158b53d157 Mon Sep 17 00:00:00 2001
From: Guo Xiang Tan <tgx_world@hotmail.com>
Date: Mon, 20 Jun 2016 12:03:48 +0800
Subject: [PATCH] UX: Display category and tags on full page search in a
 seperate row.

---
 .../discourse/templates/full-page-search.hbs  | 32 ++++++++++++-------
 .../stylesheets/common/base/search.scss       |  9 ++++--
 app/assets/stylesheets/mobile/search.scss     |  4 +++
 3 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/full-page-search.hbs b/app/assets/javascripts/discourse/templates/full-page-search.hbs
index 7c0248d3ffa..b869f0a7241 100644
--- a/app/assets/javascripts/discourse/templates/full-page-search.hbs
+++ b/app/assets/javascripts/discourse/templates/full-page-search.hbs
@@ -60,16 +60,20 @@
 
   {{#each model.posts as |result|}}
     <div class='fps-result'>
-        <div class='author'>
-            {{avatar result imageSize="large"}}
-        </div>
+      <div class='author'>
+        {{avatar result imageSize="large"}}
+      </div>
+
+      <div class='fps-topic'>
         <div class='topic'>
           {{#if bulkSelectEnabled}}
             {{track-selected selectedList=selected selectedId=result.topic}}
           {{/if}}
+
           <a class='search-link' href='{{unbound result.url}}'>
             {{topic-status topic=result.topic disableActions=true}}<span class='topic-title'>{{#highlight-text highlight=q}}{{{unbound result.topic.fancyTitle}}}{{/highlight-text}}</span>
           </a>
+
           <div class='search-category'>
             {{category-link result.topic.category}}
             {{#each result.topic.tags as |tag|}}
@@ -78,26 +82,30 @@
             {{plugin-outlet "full-page-search-category"}}
           </div>
         </div>
+
         <div class='blurb container'>
           <span class='date'>
-          {{format-age result.created_at}}
-          {{#if result.blurb}}
-          -
-          {{/if}}
+            {{format-age result.created_at}}
+            {{#if result.blurb}}
+            -
+            {{/if}}
           </span>
+
           {{#if result.blurb}}
             {{#highlight-text highlight=q}}
               {{{unbound result.blurb}}}
             {{/highlight-text}}
           {{/if}}
         </div>
+
         {{#if showLikeCount}}
-        {{#if result.like_count}}
-        <span class='like-count'>
-          {{result.like_count}} <i class="icon fa fa-heart"></i>
-        </span>
-        {{/if}}
+          {{#if result.like_count}}
+            <span class='like-count'>
+              {{result.like_count}} <i class="icon fa fa-heart"></i>
+            </span>
+          {{/if}}
         {{/if}}
+      </div>
     </div>
   {{/each}}
 
diff --git a/app/assets/stylesheets/common/base/search.scss b/app/assets/stylesheets/common/base/search.scss
index 3b49da70cc1..3eaee928a45 100644
--- a/app/assets/stylesheets/common/base/search.scss
+++ b/app/assets/stylesheets/common/base/search.scss
@@ -1,7 +1,8 @@
 .fps-result {
 
   .author {
-    float: left;
+    display: inline-block;
+    vertical-align: top;
   }
 
   .like-count {
@@ -14,7 +15,6 @@
   }
 
   .search-category {
-    float:right;
     padding-top:3px;
   }
 
@@ -46,7 +46,6 @@
   .blurb {
     font-size: 1.0em;
     line-height: 20px;
-    margin-left: 60px;
     word-wrap: break-word;
     max-width: 640px;
     color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 60%));
@@ -64,6 +63,10 @@
   }
 }
 
+.fps-topic {
+  display: inline-block;
+}
+
 .fps-select {
   margin-top: -15px;
   margin-bottom: 15px;
diff --git a/app/assets/stylesheets/mobile/search.scss b/app/assets/stylesheets/mobile/search.scss
index 0438c41c059..b55afefc4dc 100644
--- a/app/assets/stylesheets/mobile/search.scss
+++ b/app/assets/stylesheets/mobile/search.scss
@@ -14,3 +14,7 @@
 .fps-search-context {
   margin-bottom: 15px;
 }
+
+.fps-topic {
+  max-width: 75%;
+}