diff --git a/app/assets/stylesheets/embed.scss b/app/assets/stylesheets/embed.scss index 61d1cf9afd0..9082249b0a3 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-details-flex { + display: flex; - .topic-featured-image { - float: right; + .topic-details-column-1 { + flex-direction: column; + width: 80%; - img { - max-width: 200px; - max-height: 100px; + .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-details-column-2 { + .topic-featured-image img { + max-width: 200px; + max-height: 100px; + } + } - .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; } } } diff --git a/app/views/embed/topics.html.erb b/app/views/embed/topics.html.erb index d13e98a22a0..1c4f1de2d86 100644 --- a/app/views/embed/topics.html.erb +++ b/app/views/embed/topics.html.erb @@ -4,36 +4,44 @@
<%- if @template == "complete" %>