* FEATURE: change layout of escaped_fragment_ topic page to table one like live discourse (#7250)

  • FEATURE: change layout of escaped_fragment_ topic page to table one like live discourse (#7250)
diff --git a/app/views/list/list.erb b/app/views/list/list.erb
index 3ae00bd..7e7088b 100644
--- a/app/views/list/list.erb
+++ b/app/views/list/list.erb
@@ -38,28 +38,52 @@
   <% end %>
 <% end %>
 
-<div class='topic-list' itemscope itemtype='http://schema.org/ItemList'>
-  <meta itemprop='itemListOrder' content='http://schema.org/ItemListOrderDescending'>
-  <% @list.topics.each_with_index do |t,i| %>
-    <div itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'>
-      <meta itemprop='position' content='<%= i %>'>
-      <meta itemprop='url' content='<%= t.url %>'>
-      <a href='<%= t.url %>'>
-        <span itemprop='name'><%= t.title %></span>
-      </a>
-      <span class="page-links"><%= page_links(t) %></span>
-      <% if (!@category || @category.has_children?) && t.category %>
-        <span class='category'>[<a href='<%= t.category.url %>'><%= t.category.name %></a>]</span>
-      <% end %>
-      <span class='posts' title='<%= t 'posts' %>'>(<%= t.posts_count %>)</span>
+<div itemscope itemtype='http://schema.org/ItemList'>
+  <table class='topic-list'>
+
+    <thead>
+      <tr>
+        <th><%= t 'js.topic.title' %></th>
+        <th><%= t 'js.replies' %></th>
+        <th><%= t 'js.created' %></th>
+      </tr>
+    </thead>
 
-      <% if t.pinned_until && (t.pinned_until > Time.zone.now) && (t.pinned_globally || @list.category) && t.excerpt %>
-        <p class='excerpt'>
-          <%= t.excerpt.html_safe %>
-        </p>
+    <tbody>
+      <meta itemprop='itemListOrder' content='http://schema.org/ItemListOrderDescending'>
+      <% @list.topics.each_with_index do |t,i| %>
+        <tr>
+          <span itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'>
+            <meta itemprop='position' content='<%= i %>'>
+            <meta itemprop='url' content='<%= t.url %>'>
+            <meta itemprop='name' content='<%= t.title %>'>
+            <td>
+              <a href='<%= t.url %>' class='title raw-link raw-topic-link'>
+                <span><%= t.title %></span>
+              </a>
+              <% if (!@category || @category.has_children?) && t.category %>
+                <div>
+                  <a href='<%= t.category.url %>'><span class='category-name'><%= t.category.name %></span></a>
+                </div>
+              <% end %>
+              <% if t.pinned_until && (t.pinned_until > Time.zone.now) && (t.pinned_globally || @list.category) && t.excerpt %>
+                <p class='excerpt'>
+                  <%= t.excerpt.html_safe %>
+                </p>
+              <% end %>
+            </td>
+            <td>
+              <span class='posts' title='<%= t 'posts' %>'><%= t.posts_count %></span>
+            </td>
+            <td>
+              <%= I18n.l(t.created_at, format: :date_only) %>
+            </td>
+          </span>
+        </tr>
       <% end %>
-    </div>
-  <% end %>
+    </tbody>
+
+  </table>
 </div>
 
 <% if @list.topics.length > 0 && @list.more_topics_url %>

GitHub sha: 4a47ec79

The HTML here is bad - a <tr> isn’t allowed to contain a <span>. Chrome pulls these (the span and meta elements) up outside the table into direct children of the ItemList.

1 Like

Good catch! Moving the attributes from <span> to <tr> and removing the <span> would work, right? cc @mrfinch

1 Like

I have made the changes here: DEV: remove span from inside <tr> and move meta info to a td by mrfinch · Pull Request #7324 · discourse/discourse · GitHub

Thanks for catching the error riking1 I hadn’t noticed since parsing used to work fine even when elements were moved out of table :sweat_smile:

1 Like