UX: use Flexbox for topic list embed

UX: use Flexbox for topic list embed

diff --git a/app/assets/stylesheets/embed.scss b/app/assets/stylesheets/embed.scss
index 61d1cf9..9082249 100644
--- a/app/assets/stylesheets/embed.scss
+++ b/app/assets/stylesheets/embed.scss
@@ -186,7 +186,6 @@ div.lightbox-wrapper {
       border-bottom: 1px solid $primary-low;
       padding: 0.5rem;
       width: 100%;
-      display: inline-block;
 
       a {
         color: $primary;
@@ -197,40 +196,42 @@ div.lightbox-wrapper {
       }
     }
 
-    .topic-title-link {
-      float: left;
-    }
-
-    .topic-featured-image {
-      float: right;
-
-      img {
-        max-width: 200px;
-        max-height: 100px;
+    .topic-details-flex {
+      display: flex;
+
+      .topic-details-column-1 {
+        flex-direction: column;
+        width: 80%;
+
+        .topic-last-posted-at,
+        .topic-author-avatar-timestamp,
+        .topic-stats {
+          padding-top: 5px;
+        }
+
+        .topic-author-avatar-timestamp img {
+          max-height: 20px;
+        }
+
+        .topic-created-at {
+          padding-left: 5px;
+          vertical-align: middle;
+        }
+
+        .topic-last-posted-at,
+        .topic-created-at,
+        .topic-stats {
+          color: $primary-medium;
+        }
       }
-    }
-
-    .topic-last-posted-at,
-    .topic-author-avatar-timestamp,
-    .topic-stats {
-      clear: left;
-      float: left;
-      padding-top: 5px;
-    }
-
-    .topic-author-avatar-timestamp img {
-      max-height: 20px;
-    }
 
-    .topic-created-at {
-      padding-left: 5px;
-      vertical-align: middle;
-    }
+      .topic-details-column-2 {
+        .topic-featured-image img {
+          max-width: 200px;
+          max-height: 100px;
+        }
+      }
 
-    .topic-last-posted-at,
-    .topic-created-at,
-    .topic-stats {
-      color: $primary-medium;
     }
   }
 }
diff --git a/app/views/embed/topics.html.erb b/app/views/embed/topics.html.erb
index d13e98a..1c4f1de 100644
--- a/app/views/embed/topics.html.erb
+++ b/app/views/embed/topics.html.erb
@@ -4,36 +4,44 @@
       <div class='topic-list-item'>
         <%- if @template == "complete" %>
           <div class='main-link'>
-            <div class='topic-title-link'>
-              <a target="_parent" href="<%= t.url %>" class="title raw-link raw-topic-link" data-topic-id="<%= t.id %>"><%= t.title %></a>
-            </div>
-            <%- if t.image_url.present? %>
-              <div class='topic-featured-image'>
-                <img src="<%= t.image_url %>">
-              </div>
-            <%- end %>
-            <%- if t.posts_count > 1 %>
-              <div class="topic-last-posted-at" title="<%= t.last_posted_at.strftime("%B %e, %Y %l:%M%P") %>">
-                <%= "#{I18n.t('embed.last_reply')} #{time_ago_in_words(t.last_posted_at, scope: :'datetime.distance_in_words_verbose')}" %>
-              </div>
-            <%- end %>
-            <div class='topic-author-avatar-timestamp'>
-              <img src="<%= t.user.avatar_template.gsub('{size}', '20') %>">
-              <span class="topic-created-at" title="<%= t.created_at.strftime("%B %e, %Y %l:%M%P") %>">
-                <%= "#{I18n.t('embed.created')} #{time_ago_in_words(t.created_at, scope: :'datetime.distance_in_words_verbose')}" %>
-              </span>
-            </div>
-            <div class='topic-stats'>
-              <%- if t.like_count > 0 %>
-                <div class='topic-like-count'>
-                  <%= I18n.t('embed.likes', count: t.like_count) %>
+            <div class="topic-details-flex">
+              <div class='topic-details-column-1'>
+                <div class='topic-title-link'>
+                  <a target="_parent" href="<%= t.url %>" class="title raw-link raw-topic-link" data-topic-id="<%= t.id %>"><%= t.title %></a>
                 </div>
-              <%- end %>
-              <%- if t.posts_count > 1 %>
-                <div class='topic-post-count'>
-                  <%= I18n.t('embed.replies', count: (t.posts_count - 1)) %>
+
+                <%- if t.posts_count > 1 %>
+                  <div class="topic-last-posted-at" title="<%= t.last_posted_at.strftime("%B %e, %Y %l:%M%P") %>">
+                    <%= "#{I18n.t('embed.last_reply')} #{time_ago_in_words(t.last_posted_at, scope: :'datetime.distance_in_words_verbose')}" %>
+                  </div>
+                <%- end %>
+                <div class='topic-author-avatar-timestamp'>
+                  <img src="<%= t.user.avatar_template.gsub('{size}', '20') %>">
+                  <span class="topic-created-at" title="<%= t.created_at.strftime("%B %e, %Y %l:%M%P") %>">
+                    <%= "#{I18n.t('embed.created')} #{time_ago_in_words(t.created_at, scope: :'datetime.distance_in_words_verbose')}" %>
+                  </span>
                 </div>
-              <%- end %>
+                <div class='topic-stats'>
+                  <%- if t.like_count > 0 %>
+                    <div class='topic-like-count'>
+                      <%= I18n.t('embed.likes', count: t.like_count) %>
+                    </div>
+                  <%- end %>
+                  <%- if t.posts_count > 1 %>
+                    <div class='topic-post-count'>
+                      <%= I18n.t('embed.replies', count: (t.posts_count - 1)) %>
+                    </div>
+                  <%- end %>
+                </div>
+              </div>
+
+              <div class='topic-details-column-2'>
+                <%- if t.image_url.present? %>
+                  <div class='topic-featured-image'>
+                    <img src="<%= t.image_url %>">
+                  </div>
+                <%- end %>
+              </div>
             </div>
           </div>
         <%- else %>

GitHub sha: a5c28f56

@awesomerobot what do you think of the names topic-details-column-1 and topic-details-column-2?

In this new flexbox world how should we be naming such things?

2 Likes

I think instead I might use a general class for both, like .topic-column and then add a secondary descriptive class like .details-column and .featured-image-column.

Also instead of .topic-details-flex probably something like .topic-column-wrapper, because .topic-details-flex stops making sense if I do something like

.topic-details-flex {
  display: grid;
}
3 Likes

Thanks for the tips! Updated in:

1 Like