UX: Improve posts layout for crawler (#7286)

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;
+  }
+}

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") %>

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| %>

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."