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

2017-08-13 12:13:02 -04:00
parent 9e475860e0
commit 8ccde140e5
11 changed files with 146 additions and 124 deletions
@@ -0,0 +1,3 @@
+export default Ember.Component.extend({
+  tagName: ''
+});
@@ -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']
 });
@@ -0,0 +1,3 @@
+export default Ember.Component.extend({
+  classNames: ['latest-topic-list']
+});
@@ -1,29 +1,7 @@
-{{categories-only categories=categories}}
+<div class='column categories'>
+  {{categories-only categories=categories}}
+</div>

-<table class="topic-list topic-list-latest">
-  <thead>
-    <tr>
-      <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>
+<div class='column'>
+  {{latest-topic-list topics=topics}}
+</div>
@@ -1,33 +1,25 @@
-<table>
-  <tbody>
-    <tr data-topic-id={{topic.id}} class="{{if topic.archived 'archived'}}">
-      <td class="topic-poster">
-        {{#with topic.lastPoster as |lastPoster|}}
-          {{#user-link user=lastPoster}}
-            {{avatar lastPoster imageSize="large"}}
-          {{/user-link}}
-        {{/with}}
-      </td>
-      <td class="main-link">
-        <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>
-        <tr>
-          {{category-link topic.category}}
-          {{discourse-tags topic mode="list"}}
-        </tr>
-      </td>
-      <td 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>
-    </tr>
-  </tbody>
-</table>
+<div class='topic-poster'>
+  {{#user-link user=topic.lastPoster}}
+    {{avatar topic.lastPoster imageSize="large"}}
+  {{/user-link}}
+</div>
+<div class='main-link'>
+  <div class='top-row'>
+    {{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}}
+  </div>
+  <div class='bottom-row'>
+    {{category-link topic.category}}
+    {{discourse-tags topic mode="list"}}
+  </div>
+</div>
+<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>
+</div>
@@ -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}}