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

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 98800c70580eaddef4ed7c417957dea3f146034d.

  • remove comment

  • removing function

From a88f931d6fb7bb3ee0e7fa15795b001d28efb040 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 5 Dec 2018 19:12:26 -0500
Subject: [PATCH] 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 98800c70580eaddef4ed7c417957dea3f146034d.

* remove comment

* removing function

diff --git a/app/assets/javascripts/discourse/components/topic-list-item.js.es6 b/app/assets/javascripts/discourse/components/topic-list-item.js.es6
index c400737..45a27b7 100644
--- a/app/assets/javascripts/discourse/components/topic-list-item.js.es6
+++ b/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;
     },
diff --git a/app/assets/javascripts/discourse/templates/list/topic-list-item.raw.hbs b/app/assets/javascripts/discourse/templates/list/topic-list-item.raw.hbs
index 3461674..d0b1077 100644
--- a/app/assets/javascripts/discourse/templates/list/topic-list-item.raw.hbs
+++ b/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}}
diff --git a/app/assets/javascripts/discourse/templates/topic-list-header.raw.hbs b/app/assets/javascripts/discourse/templates/topic-list-header.raw.hbs
index 361ffb9..5bae677 100644
--- a/app/assets/javascripts/discourse/templates/topic-list-header.raw.hbs
+++ b/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}}
diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index e29caaa..d25c036 100644
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/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;
   }
diff --git a/app/assets/stylesheets/common/base/tagging.scss b/app/assets/stylesheets/common/base/tagging.scss
index 9f78dc5..122f694 100644
--- a/app/assets/stylesheets/common/base/tagging.scss
+++ b/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;
diff --git a/app/assets/stylesheets/desktop/category-list.scss b/app/assets/stylesheets/desktop/category-list.scss
index 4cdf6ea..4993ed8 100644
--- a/app/assets/stylesheets/desktop/category-list.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index 4608244..b6c5fb6 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/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;
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 6ab671d..2556ef6 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/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;
   }
 }

GitHub

1 Like