more

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

@@ -36,7 +36,7 @@ export function navigateToTopic(topic, href) {
 }
 
 export default Component.extend({
-  tagName: "tr",
+  tagName: "div",
   classNameBindings: [":topic-list-item", "unboundClassNames", "topic.visited"],
   attributeBindings: ["data-topic-id", "role", "ariaLevel:aria-level"],
   "data-topic-id": alias("topic.id"),

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

@@ -8,7 +8,7 @@ import { schedule } from "@ember/runloop";
 import showModal from "discourse/lib/show-modal";
 
 export default Component.extend(LoadMore, {
-  tagName: "table",
+  tagName: "div",
   classNames: ["topic-list"],
   classNameBindings: ["bulkSelectEnabled:sticky-header"],
   showTopicPostBadges: true,
@@ -194,7 +194,7 @@ export default Component.extend(LoadMore, {
       $("input.bulk-select:checked").click();
     });
 
-    onClick("th.sortable", function (e2) {
+    onClick(".topic-list-data.sortable", function (e2) {
       this.changeSort(e2.data("sort-order"));
       this.rerender();
     });

app/assets/javascripts/discourse/app/raw-views/list/posts-count-column.js

@@ -3,7 +3,7 @@ import I18n from "I18n";
 import discourseComputed from "discourse-common/utils/decorators";
 
 export default EmberObject.extend({
-  tagName: "td",
+  tagName: "div",
 
   @discourseComputed("topic.like_count", "topic.posts_count")
   ratio(likeCount, postCount) {

app/assets/javascripts/discourse/app/templates/components/topic-list.hbs

@@ -1,5 +1,5 @@
 {{#unless skipHeader}}
-  <thead class="topic-list-header">
+  <div class="topic-list-header">
     {{raw "topic-list-header"
       canBulkSelect=canBulkSelect
       toggleInTitle=toggleInTitle
@@ -14,7 +14,7 @@
       bulkSelectEnabled=bulkSelectEnabled
       canDoBulkActions=canDoBulkActions
     }}
-  </thead>
+  </div>
 {{/unless}}
 
 {{plugin-outlet
@@ -29,7 +29,7 @@
   tagName=""
   connectorTagName=""}}
 
-<tbody class="topic-list-body">
+<div class="topic-list-body">
   {{#each filteredTopics as |topic|}}
     {{topic-list-item topic=topic
                       bulkSelectEnabled=bulkSelectEnabled
@@ -45,7 +45,7 @@
                       tagsForUser=tagsForUser}}
     {{raw "list/visited-line" lastVisitedTopic=lastVisitedTopic topic=topic}}
   {{/each}}
-</tbody>
+</div>
 
 {{plugin-outlet
   name="after-topic-list-body"

app/assets/javascripts/discourse/app/templates/list/category-column.hbr

@@ -1 +1 @@
-<td class='category topic-list-data'>{{category-link category}}</td>
+<div class='category topic-list-data'>{{category-link category}}</div>

app/assets/javascripts/discourse/app/templates/list/posters-column.hbr

@@ -1,4 +1,4 @@
-<td class='posters topic-list-data'>
+<div class='posters topic-list-data'>
 {{#each posters as |poster|}}
   {{#if poster.moreCount}}
     <a class="posters-more-count">{{poster.moreCount}}</a>
@@ -6,4 +6,4 @@
     <a href="{{poster.user.path}}" data-user-card="{{poster.user.username}}" class="{{poster.extraClasses}}">{{avatar poster avatarTemplatePath="user.avatar_template" usernamePath="user.username" namePath="user.name" imageSize="small"}}</a>
   {{/if}}
 {{/each}}
-</td>
+</div>

app/assets/javascripts/discourse/app/templates/list/topic-list-item.hbr

@@ -1,11 +1,11 @@
 {{~raw-plugin-outlet name="topic-list-before-columns"}}
 
 {{#if bulkSelectEnabled}}
-  <td class="bulk-select topic-list-data">
+  <div class="bulk-select topic-list-data">
     <label for="bulk-select-{{topic.id}}">
       <input type="checkbox" class="bulk-select" id="bulk-select-{{topic.id}}">
     </label>
-  </td>
+  </div>
 {{/if}}
 
 {{!--
@@ -15,7 +15,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 topic-list-data' colspan="1">
+<div class='main-link clearfix topic-list-data' colspan="1">
   {{~raw-plugin-outlet name="topic-list-before-link"}}
   <span class='link-top-line'>
     {{~raw-plugin-outlet name="topic-list-before-status"}}
@@ -45,7 +45,7 @@
   {{#if expandPinned}}
     {{raw "list/topic-excerpt" topic=topic}}
   {{/if}}
-</td>
+</div>
 
 {{#if showPosters}}
   {{raw "list/posters-column" posters=topic.featuredUsers}}
@@ -54,28 +54,28 @@
 {{raw "list/posts-count-column" topic=topic}}
 
 {{#if showLikes}}
-  <td class="num likes topic-list-data">
+  <div class="num likes topic-list-data">
     {{#if hasLikes}}
       <a href='{{topic.summaryUrl}}'>
         {{number topic.like_count}} {{d-icon "heart"}}
       </a>
     {{/if}}
-  </td>
+  </div>
 {{/if}}
 
 {{#if showOpLikes}}
-  <td class="num likes">
+  <div class="num likes">
     {{#if hasOpLikes}}
       <a href='{{topic.summaryUrl}}'>
         {{number topic.op_like_count}} {{d-icon "heart"}}
       </a>
     {{/if}}
-  </td>
+  </div>
 {{/if}}
 
-<td class="num views {{topic.viewsHeat}} topic-list-data">
+<div class="num views {{topic.viewsHeat}} topic-list-data">
   {{raw-plugin-outlet name="topic-list-before-view-count"}}
   {{number topic.views numberKey="views_long"}}
-</td>
+</div>
 
-{{raw "list/activity-column" topic=topic class="num topic-list-data" tagName="td"}}
+{{raw "list/activity-column" topic=topic class="num topic-list-data" tagName="div"}}

app/assets/javascripts/discourse/app/templates/mobile/list/topic-list-item.hbr

@@ -1,4 +1,4 @@
-<td class="topic-list-data">
+<div class="topic-list-data">
   {{~raw-plugin-outlet name="topic-list-before-columns"}}
   <div class='pull-left'>
     <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPosterUser imageSize="large"}}</a>
@@ -48,4 +48,4 @@
       <div class="clearfix"></div>
     </div>
   </div>
-</td>
+</div>

app/assets/javascripts/discourse/app/templates/topic-list-header-column.hbr

@@ -1,4 +1,4 @@
-<th data-sort-order='{{order}}' class='{{view.className}} topic-list-data' scope="col" {{#if ariaLabel}}aria-label='{{ariaLabel}}'{{/if}} {{#if sortable}}tabindex="0" role="button" aria-pressed='{{view.ariaPressed}}' {{#if view.ariaSort}}aria-sort='{{view.ariaSort}}'{{/if}} {{/if}}>
+<div data-sort-order='{{order}}' class='{{view.className}} topic-list-data' scope="col" {{#if ariaLabel}}aria-label='{{ariaLabel}}'{{/if}} {{#if sortable}}tabindex="0" role="button" aria-pressed='{{view.ariaPressed}}' {{#if view.ariaSort}}aria-sort='{{view.ariaSort}}'{{/if}} {{/if}}>
   {{~#if canBulkSelect}}
     {{~#if showBulkToggle}}
       {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
@@ -17,4 +17,4 @@
   {{~#if view.isSorting}}
     {{d-icon view.sortIcon}}
   {{/if ~}}
-</th>
+</div>

app/assets/javascripts/discourse/app/templates/topic-list-header.hbr

@@ -1,10 +1,10 @@
 {{~raw-plugin-outlet name="topic-list-header-before"~}}
 {{#if bulkSelectEnabled}}
-  <th class="bulk-select topic-list-data">
+  <div class="bulk-select topic-list-data">
     {{#if canBulkSelect}}
       {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
     {{/if}}
-  </th>
+  </div>
 {{/if}}
 {{raw "topic-list-header-column" order='default' name=listTitle bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect canDoBulkActions=canDoBulkActions}}
 {{#if showPosters}}

app/assets/javascripts/discourse/tests/acceptance/user-anonymous-test.js

@@ -21,7 +21,7 @@ acceptance("User Anonymous", function () {
 
     await visit("/u/eviltrout/activity/topics");
     assert.ok(!exists(".user-stream .item"), "has no stream displayed");
-    assert.ok(exists(".topic-list tr"), "it has a topic list");
+    assert.ok(exists(".topic-list .topic-list-item"), "it has a topic list");
 
     await visit("/u/eviltrout/activity/replies");
     assert.ok(exists(".user-main .about"), "it has the about section");

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

@@ -174,11 +174,13 @@
   top: var(--header-offset, 60px);
   background: var(--secondary);
   z-index: 2;
+  .default.topic-list-data {
+    padding: 4px 5px;
+  }
 }
 
 .topic-list {
   width: 100%;
-  border-collapse: collapse;
 
   > .topic-list-body > .topic-list-item {
     &.has-excerpt .star {
@@ -218,16 +220,12 @@
     line-height: $line-height-large;
     text-align: left;
     vertical-align: middle;
+    color: var(--primary-medium);
   }
   .btn-flat .d-icon {
     color: currentColor;
   }
 
-  td {
-    color: var(--primary-medium);
-    font-size: $font-0;
-  }
-
   .main-link {
     @extend .topic-list-main-link;
 
@@ -289,7 +287,6 @@
     .badge-posts {
       font-weight: 700;
       color: inherit;
-      padding: 15px 5px;
     }
   }
 

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

@@ -129,7 +129,8 @@ table {
   border-collapse: collapse;
 }
 
-tbody {
+tbody,
+.topic-list-body {
   border-top: 3px solid var(--primary-low);
 }
 

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

@@ -5,6 +5,30 @@
 // Base list
 // --------------------------------------------------
 
+// Flex Layout
+.topic-list-header,
+.topic-list-item {
+  display: flex;
+  align-items: center;
+}
+
+.topic-list-item {
+  min-height: 70px;
+}
+
+.topic-list-data {
+  &.main-link,
+  &.default {
+    flex-grow: 1;
+  }
+  &.posters {
+    width: 146px;
+  }
+  &.num {
+    min-width: 65px;
+  }
+}
+
 .topic-list-icons {
   .d-icon-thumbtack {
     color: var(--primary-med-or-secondary-med);
@@ -21,18 +45,21 @@
 }
 
 .topic-list {
-  @extend .topic-list-icons;
-
   margin: 0 0 10px;
-  .topic-list-data {
+}
-    padding: 12px 5px;
+
-    &:first-of-type {
+.topic-list-data {
-      padding-left: 10px;
+  padding: 12px 5px;
-    }
+  &:first-of-type {
-    &:last-of-type {
+    padding-left: 10px;
-      padding-right: 10px;
-    }
   }
+  &:last-of-type {
+    padding-right: 10px;
+  }
+}
+
+.topic-list-body {
+  @extend .topic-list-icons;
 
   button.bulk-select {
     padding: 0;
@@ -41,7 +68,6 @@
 
   .topic-list-data.bulk-select {
     padding: 0;
-    width: 30px;
     label {
       margin: 0px;
       padding: 12px 10px 16px 10px;
@@ -67,7 +93,6 @@
   .posters {
     // we know there are up to 5 avatars of fixed size
     // will be overridden by media width queries on narrow displays to 1 avatar's width
-    width: 146px;
     > a {
       float: left;
       margin-right: 4px;
@@ -83,9 +108,6 @@
       }
     }
   }
-  .topic-list-data.posters {
-    height: $td-posters-height;
-  }
   .posters a:first-child .avatar.latest:not(.single) {
     box-shadow: 0 0 3px 1px rgba(var(--tertiary-rgb), 0.35);
     border: 2px solid rgba(var(--tertiary-rgb), 0.5);
@@ -94,16 +116,6 @@
     left: -2px;
   }
 
-  .likes {
-    width: 65px;
-  }
-  .views {
-    width: 65px;
-  }
-  .posts {
-    width: 65px;
-  }
-
   .post-actions {
     clear: both;
     width: auto;
@@ -121,7 +133,6 @@
     }
   }
   .activity {
-    width: 60px;
     &:lang(zh_CN) {
       width: 80px;
     }
@@ -216,14 +227,14 @@ button.dismiss-read {
       font-size: $font-0;
     }
     // suppress views column
-    .views {
+    .topic-list-data.views {
       display: none;
     }
     // reduce width for more title space
-    .posts {
+    .topic-list-data.posts {
       width: 50px;
     }
-    .posters {
+    .topic-list-data.posters {
       width: 30px;
       text-align: center;
     }

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

@@ -114,7 +114,27 @@
 
   .topic-list-data {
     padding: 7px 0;
-    max-width: 300px;
+    display: flex;
+    .right {
+      margin-left: 10px;
+      flex-grow: 1;
+      display: grid;
+      grid-template-columns: 75% 25%;
+      grid-template-rows: 50% 50%;
+      grid-template-areas: "title replies" "data data";
+      .main-link {
+        grid-area: title;
+      }
+      .pull-right {
+        grid-area: replies;
+        .num {
+          justify-content: end;
+        }
+      }
+      .topic-item-stats {
+        grid-area: data;
+      }
+    }
   }
 
   .main-link {
@@ -424,7 +444,7 @@ button.dismiss-read {
 
 // base defines extra padding for easier click/top of title field
 // this is a bit too much for mobile
-td .main-link {
+.topic-list-data .main-link {
   width: 78%;
   display: inline-block;
   a.title {