Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: use Flexbox for topic list embed

This commit is contained in:
Arpit Jalan 2019-09-04 20:21:58 +05:30
parent 930e70aba9
commit a5c28f56d1
2 changed files with 67 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
app/assets/stylesheets/embed.scss
View File

@ -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;
}
}
}

64
app/views/embed/topics.html.erb
View File

@ -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 %>