UX: Moving categories under topic title in topic list, removing category column (#6731)

* Starting to remove category column from topic list

* stacked nav alignment adjustment

* Revert "stacked nav alignment adjustment"

This reverts commit 98800c7058.

* remove comment

* removing function

app/assets/javascripts/discourse/components/topic-list-item.js.es6

@@ -96,13 +96,6 @@ export default Ember.Component.extend(
       return classes.join(" ");
     },
 
-    titleColSpan: function() {
-      return !this.get("hideCategory") &&
-        this.get("topic.isPinnedUncategorized")
-        ? 2
-        : 1;
-    }.property("topic.isPinnedUncategorized"),
-
     hasLikes: function() {
       return this.get("topic.like_count") > 0;
     },

app/assets/javascripts/discourse/templates/list/topic-list-item.raw.hbs

@@ -11,7 +11,7 @@
   This causes the topic-post-badge to be considered the same word as "text"
   at the end of the link, preventing it from line wrapping onto its own line.
 --}}
-<td class='main-link clearfix' colspan="{{titleColSpan}}">
+<td class='main-link clearfix' colspan="1">
   <span class='link-top-line'>
     {{~raw-plugin-outlet name="topic-list-before-status"}}
     {{~raw "topic-status" topic=topic}}
@@ -24,20 +24,20 @@
       {{~raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
     {{~/if}}
   </span>
-
+  <div class="link-bottom-line">
+  {{#unless hideCategory}}
+    {{#unless topic.isPinnedUncategorized}}
+      {{category-link topic.category}}
+    {{/unless}}
+  {{/unless}}
   {{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
   {{#if expandPinned}}
     {{raw "list/topic-excerpt" topic=topic}}
   {{/if}}
   {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
+  </div>
 </td>
 
-{{#unless hideCategory}}
-  {{#unless topic.isPinnedUncategorized}}
-    {{raw "list/category-column" category=topic.category}}
-  {{/unless}}
-{{/unless}}
-
 {{#if showPosters}}
   {{raw "list/posters-column" posters=topic.posters}}
 {{/if}}

app/assets/javascripts/discourse/templates/topic-list-header.raw.hbs

@@ -6,9 +6,6 @@
   </th>
 {{/if}}
 {{raw "topic-list-header-column" order='default' name=listTitle bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect}}
-{{#unless hideCategory}}
-  {{raw "topic-list-header-column" sortable=sortable order='category' name='category_title'}}
-{{/unless}}
 {{#if showPosters}}
   {{raw "topic-list-header-column" order='posters' name='users'}}
 {{/if}}

app/assets/stylesheets/common/base/_topic-list.scss

@@ -131,6 +131,10 @@
     @extend .topic-list-main-link;
   }
 
+  .link-bottom-line {
+    font-size: $font-down-1;
+  }
+
   .topic-featured-link {
     padding-left: 5px;
   }

app/assets/stylesheets/common/base/tagging.scss

@@ -124,10 +124,9 @@ $tag-color: $primary-medium;
 }
 
 .topic-list-item .discourse-tags {
-  display: block;
-  font-size: $font-down-2;
+  display: inline-block;
   font-weight: normal;
-  clear: both;
+  font-size: $font-down-1;
 
   .discourse-tag.box {
     position: relative;

app/assets/stylesheets/desktop/category-list.scss

@@ -129,8 +129,11 @@
     }
   }
 
-  .discourse-tag {
-    font-size: $font-down-2;
+  .discourse-tags {
+    display: inline-block;
+    .discourse-tag {
+      font-size: $font-down-1;
+    }
   }
 
   .topic-featured-link {

app/assets/stylesheets/desktop/topic-list.scss

@@ -281,10 +281,6 @@ button.dismiss-read {
       padding: 10px;
       font-size: $font-0;
     }
-    .category {
-      min-width: 0;
-      padding: 0;
-    }
     // suppress views column
     th.views {
       display: none;

app/assets/stylesheets/desktop/topic-post.scss

@@ -449,10 +449,6 @@ nav.post-controls {
   padding: 20px 0 15px 0;
   table {
     margin-top: 10px;
-  } // this forces category to take less space in suggested topics
-  // as the poster list is not present at all there.
-  th.category {
-    width: 150px;
   }
 }