UX: convert embedded topic list HTML structure from table to div

UX: convert embedded topic list HTML structure from table to div

diff --git a/app/assets/stylesheets/embed.scss b/app/assets/stylesheets/embed.scss
index 6caaa12..de79cd2 100644
--- a/app/assets/stylesheets/embed.scss
+++ b/app/assets/stylesheets/embed.scss
@@ -178,16 +178,22 @@ div.lightbox-wrapper {
 
 .topics-list {
   width: 100%;
+
   .topic-list-item {
-    td {
+    clear: both;
+
+    .main-link {
+      border-bottom: 1px solid #e9e9e9;
       padding: 0.5rem;
-    }
+      width: 100%;
 
-    .main-link a {
-      color: $primary;
-    }
-    .main-link a:visited {
-      color: $primary-medium;
+      a {
+        color: $primary;
+      }
+
+      a:visited {
+        color: $primary-medium;
+      }
     }
   }
 }
diff --git a/app/views/embed/topics.html.erb b/app/views/embed/topics.html.erb
index 6f478ee..629577d 100644
--- a/app/views/embed/topics.html.erb
+++ b/app/views/embed/topics.html.erb
@@ -1,11 +1,11 @@
 <%- if @list && @list.topics.present? %>
-  <table class='topics-list' data-embed-state='loaded' <%- if @embed_id %>data-embed-id="<%= @embed_id %>"<%- end %>>
+  <div class='topics-list' data-embed-state='loaded' <%- if @embed_id %>data-embed-id="<%= @embed_id %>"<%- end %>>
     <%- @list.topics.each do |t| %>
-      <tr class='topic-list-item'>
-        <td class='main-link'>
+      <div class='topic-list-item'>
+        <div class='main-link'>
           <a target="_parent" href="<%= t.url %>" class="title raw-link raw-topic-link" data-topic-id="<%= t.id %>"><%= t.title %></a>
-        </td>
+        </div>
       </div>
     <%- end %>
-  </table>
+  </div>
 <%- end %>

GitHub sha: b63d476e

1 Like