From da2f659635fbc176cc5245d8d5be00f0c66ac154 Mon Sep 17 00:00:00 2001
From: Saurabh Patel <saurabh.finch@gmail.com>
Date: Wed, 3 Apr 2019 15:28:00 +0530
Subject: [PATCH] UX: Improve posts layout for crawler (#7286)

---
 .../stylesheets/desktop/topic-post.scss       | 19 ++++++++++++++++++
 app/views/layouts/crawler.html.erb            |  2 +-
 app/views/topics/show.html.erb                | 20 ++++++++++---------
 config/locales/server.en.yml                  |  3 +++
 4 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 1dd559a8de..196d51e9e9 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -888,3 +888,22 @@ span.highlighted {
     }
   }
 }
+
+.crawler-post {
+  .post-time {
+    float: right;
+  }
+  .post-likes {
+    float: right;
+  }
+  margin-top: 5px;
+}
+
+#breadcrumbs {
+  .badge-category-bg {
+    background-color: $secondary-high;
+  }
+  .category-title {
+    color: $primary;
+  }
+}
diff --git a/app/views/layouts/crawler.html.erb b/app/views/layouts/crawler.html.erb
index f8c4aae8e2..f773b39586 100644
--- a/app/views/layouts/crawler.html.erb
+++ b/app/views/layouts/crawler.html.erb
@@ -33,7 +33,7 @@
     <div id="main-outlet" class="wrap">
       <%= yield %>
     </div>
-    <footer class="container">
+    <footer class="container wrap">
       <nav class='crawler-nav' itemscope itemtype='http://schema.org/SiteNavigationElement'>
         <a href='<%= path "/" %>'><%= t 'home_title' %></a>
         <%= link_to t('js.filters.categories.title'), path("/categories") %>
diff --git a/app/views/topics/show.html.erb b/app/views/topics/show.html.erb
index b4302369e2..78bb29dc31 100644
--- a/app/views/topics/show.html.erb
+++ b/app/views/topics/show.html.erb
@@ -10,8 +10,9 @@
       <%-if (i+1) < @breadcrumbs.length%>
         itemref="breadcrumb-<%=(i+1)%>"
       <%-end%>>
-      <a href="<%=c[:url]%>" itemprop="url">
-        <span itemprop="title"><%=c[:name]%></span>
+      <a href="<%=c[:url]%>" itemprop="url" class='badge-wrapper bullet'>
+        <span class="badge-category-bg"></span>
+        <span itemprop="title" class='category-title'><%=c[:name]%></span>
       </a>
     </div>
   <% end %>
@@ -37,12 +38,10 @@
 
 <%= server_plugin_outlet "topic_header" %>
 
-<hr>
-
 <%- if include_crawler_content? %>
 
 <% @topic_view.posts.each do |post| %>
-  <div itemscope itemtype='http://schema.org/DiscussionForumPosting'>
+  <div itemscope itemtype='http://schema.org/DiscussionForumPosting' class='topic-body crawler-post'>
     <% if (u = post.user) %>
       <div class='creator'>
         <span>
@@ -56,12 +55,12 @@
           <% end %>
           <% if post.updated_at > post.created_at %>
             <meta itemprop='datePublished' content='<%= post.created_at.to_formatted_s(:iso8601) %>'>
-            <time itemprop='dateModified' datetime='<%= post.updated_at.to_formatted_s(:iso8601) %>'>
-              <%= post.updated_at %>
+            <time itemprop='dateModified' datetime='<%= post.updated_at.to_formatted_s(:iso8601) %>' class='post-time'>
+              <%= l post.updated_at, format: :long %>
             </time>
           <% else %>
-            <time itemprop='datePublished' datetime='<%= post.created_at.to_formatted_s(:iso8601) %>'>
-              <%= post.created_at %>
+            <time itemprop='datePublished' datetime='<%= post.created_at.to_formatted_s(:iso8601) %>' class='post-time'>
+              <%= l post.created_at, format: :long %>
             </time>
           <% end %>
         </span>
@@ -73,6 +72,9 @@
       <meta itemprop='interactionCount' content='UserLikes:<%= post.like_count %>'>
       <meta itemprop='interactionCount' content='UserComments:<%= post.reply_count %>'>
       <meta itemprop='headline' content='<%= @topic_view.title %>'>
+      <div class='clearfix'>
+        <span class='post-likes'><%= t('post.has_likes', count: post.like_count) %></span>
+      </div>
       <hr>
       <% if @topic_view.link_counts[post.id] && @topic_view.link_counts[post.id].length > 0 %>
         <% @topic_view.link_counts[post.id].each do |link| %>
diff --git a/config/locales/server.en.yml b/config/locales/server.en.yml
index a0dd059f51..03c62f725e 100644
--- a/config/locales/server.en.yml
+++ b/config/locales/server.en.yml
@@ -617,6 +617,9 @@ en:
   post:
     image_placeholder:
       broken: "This image is broken"
+    has_likes:
+      one: "%{count} Like"
+      other: "%{count} Likes"
 
   rate_limiter:
     slow_down: "You’ve performed this action too many times, please try again later."