Convert latest-topic-list to components and remove nested tables

app/assets/javascripts/discourse/components/categories-only.js.es6

@@ -0,0 +1,3 @@
+export default Ember.Component.extend({
+  tagName: ''
+});

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

@@ -1,6 +1,7 @@
 import { showEntrance } from "discourse/components/topic-list-item";
 
 export default Ember.Component.extend({
-  tagName: "tr",
   click: showEntrance,
+  attributeBindings: ['topic.id:data-topic-id'],
+  classNameBindings: [':latest-topic-list-item', 'topic.archived']
 });

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

@@ -0,0 +1,3 @@
+export default Ember.Component.extend({
+  classNames: ['latest-topic-list']
+});

app/assets/javascripts/discourse/templates/components/categories-and-latest-topics.hbs

@@ -1,29 +1,7 @@
-{{categories-only categories=categories}}
+<div class='column categories'>
+  {{categories-only categories=categories}}
+</div>
 
-<table class="topic-list topic-list-latest">
+<div class='column'>
-  <thead>
+  {{latest-topic-list topics=topics}}
-    <tr>
+</div>
-      <th class="latest">{{i18n "filters.latest.title"}}</th>
-    </tr>
-  </thead>
-  <tbody>
-    {{#if topics}}
-      {{#each topics as |t|}}
-        {{latest-topic-list-item topic=t}}
-      {{/each}}
-      <tr class="more-topics">
-        <td>
-          <a href="/latest" class="btn pull-right">{{i18n "more"}}</a>
-        </td>
-      </tr>
-    {{else}}
-      <tr class="no-topics">
-        <td>
-          <h3>{{i18n "topics.none.latest"}}</h3>
-        </td>
-      </tr>
-    {{/if}}
-  </tbody>
-</table>
-
-<div class="clearfix"></div>

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

@@ -1,33 +1,25 @@
-<table>
+<div class='topic-poster'>
-  <tbody>
+  {{#user-link user=topic.lastPoster}}
-    <tr data-topic-id={{topic.id}} class="{{if topic.archived 'archived'}}">
+    {{avatar topic.lastPoster imageSize="large"}}
-      <td class="topic-poster">
-        {{#with topic.lastPoster as |lastPoster|}}
-          {{#user-link user=lastPoster}}
-            {{avatar lastPoster imageSize="large"}}
   {{/user-link}}
-        {{/with}}
+</div>
-      </td>
+<div class='main-link'>
-      <td class="main-link">
+  <div class='top-row'>
-        <tr>
     {{raw "topic-status" topic=topic}}
     {{topic-link topic}}
     {{#if topic.featured_link}}
       {{topic-featured-link topic}}
     {{/if}}
     {{topic-post-badges newPosts=topic.totalUnread unseen=topic.unseen url=topic.lastUnreadUrl}}
-        </tr>
+  </div>
-        <tr>
+  <div class='bottom-row'>
     {{category-link topic.category}}
     {{discourse-tags topic mode="list"}}
-        </tr>
+  </div>
-      </td>
+</div>
-      <td class="topic-stats">
+<div class='topic-stats'>
   {{raw "list/posts-count-column" topic=topic tagName="div"}}
   <div class="topic-last-activity">
     <a href="{{topic.lastPostUrl}}" title="{{topic.bumpedAtTitle}}">{{format-date topic.bumpedAt format="tiny" noTitle="true"}}</a>
   </div>
-      </td>
+</div>
-    </tr>
-  </tbody>
-</table>

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

@@ -0,0 +1,16 @@
+<div class='table-heading'>
+  {{i18n "filters.latest.title"}}
+</div>
+
+{{#if topics}}
+  {{#each topics as |t|}}
+    {{latest-topic-list-item topic=t}}
+  {{/each}}
+  <div class="more-topics">
+    <a href="/latest" class="btn pull-right">{{i18n "more"}}</a>
+  </div>
+{{else}}
+  <div class='no-topics'>
+    <h3>{{i18n "topics.none.latest"}}</h3>
+  </div>
+{{/if}}

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

@@ -19,6 +19,25 @@
 html.anon .topic-list a.title:visited:not(.badge-notification) {color: $primary-medium; }
 .topic-list a.title.visited:not(.badge-notification) {color: $primary-medium; }
 
+.topic-list-main-link {
+  font-size: 1.143em;
+  a.title {
+    padding: 15px 0;
+    word-break: break-word;
+    color: $primary;
+  }
+
+  .anon & {
+    a.title:visited:not(.badge-notification) {
+      color: $primary-medium;
+    }
+  }
+
+  a.title.visited:not(.badge-notification) {
+    color: $primary-medium;
+  }
+}
+
 .topic-list {
   width: 100%;
   border-collapse: collapse;
@@ -81,11 +100,7 @@ html.anon .topic-list a.title:visited:not(.badge-notification) {color: $primary-
   }
 
   .main-link {
-    font-size: 1.143em;
+    @extend .topic-list-main-link;
-    a.title {
-      padding: 15px 0;
-      word-break: break-word;
-    }
   }
 
   .topic-featured-link {
@@ -344,3 +359,14 @@ ol.category-breadcrumb {
 div.education {
   color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
 }
+
+.list-cell {
+  padding: 12px 5px;
+  color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
+}
+
+.table-heading {
+  @extend .list-cell;
+  border-bottom: 2px solid $primary-low;
+}
+

app/assets/stylesheets/desktop.scss

@@ -11,6 +11,7 @@
 @import "desktop/modal";
 @import "desktop/user-card";
 @import "desktop/category-list";
+@import "desktop/latest-topic-list";
 @import "desktop/topic-list";
 @import "desktop/topic-post";
 @import "desktop/topic";

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

@@ -3,8 +3,7 @@
   width: 100%;
 
   td, th {
-    padding: 12px 5px;
+    @extend .list-cell;
-    color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
   }
 
   td {
@@ -116,38 +115,15 @@
 }
 
 .categories-and-latest {
+  display: flex;
+  flex-direction: row;
 
-  .category-list,
+  div.column {
-  .topic-list-latest {
+    flex: 1;
-    width: 48%;
   }
 
-  .category-list {
+  div.column.categories {
-    float: left;
+    margin-right: 2em;
-  }
-
-  .topic-list-latest {
-    float: right;
-    th.latest {
-      line-height: 19px;
-    }
-  }
-
-  .main-link {
-    width: 100%;
-  }
-
-  .new-posts {
-    margin-left: 6px;
-  }
-
-  .topic-stats {
-    text-align: right;
-    color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
-  }
-
-  .topic-last-activity a {
-    color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
   }
 
   .discourse-tag {
@@ -157,25 +133,5 @@
   .topic-featured-link {
     padding-left: 8px;
   }
-
-  .topic-list {
-    .posts {
-      width: 100%;
-      text-align: right;
-      margin-bottom: 10px;
-    }
-
-    .num.posts a {
-      padding: 0;
-    }
-
-    .more-topics,
-    .no-topics {
-      border-bottom: none;
-      td {
-        padding-right: 0;
-        color: $primary;
-      }
-    }
-  }
 }
+

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

@@ -0,0 +1,41 @@
+.latest-topic-list {
+  @extend .topic-list-icons;
+
+  .table-heading {
+    padding: 12px 5px;
+    color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
+  }
+
+  .no-topics, .more-topics {
+    margin-top: 1em;
+  }
+}
+
+.latest-topic-list-item {
+  padding: 1em;
+  border-bottom: 1px solid $primary-low;
+  display: flex;
+
+  align-items: center;
+
+  .topic-poster {
+    width: 60px;
+  }
+  .main-link {
+    @extend .topic-list-main-link;
+    flex: 15;
+
+    .top-row {
+      margin-bottom: 0.1em;
+    }
+  }
+  .topic-stats {
+    flex: 1;
+    text-align: right;
+    color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
+  }
+
+  .topic-last-activity a {
+    color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
+  }
+}

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

@@ -33,12 +33,17 @@
 // Base list
 // --------------------------------------------------
 
-.topic-list {
+.topic-list-icons {
-  margin: 0 0 10px;
   .d-icon-thumb-tack { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); }
   .d-icon-thumb-tack.unpinned { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); }
   a.title {color: $primary;}
   .d-icon-bookmark { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); }
+}
+
+.topic-list {
+  @extend .topic-list-icons;
+
+  margin: 0 0 10px;
   th,
   td {
     padding: 12px 5px;