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

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

@ -186,7 +186,6 @@ div.lightbox-wrapper {
border-bottom: 1px solid $primary-low; border-bottom: 1px solid $primary-low;
padding: 0.5rem; padding: 0.5rem;
width: 100%; width: 100%;
display: inline-block;
a { a {
color: $primary; color: $primary;
@ -197,24 +196,16 @@ div.lightbox-wrapper {
} }
} }
.topic-title-link { .topic-details-flex {
float: left; display: flex;
}
.topic-featured-image { .topic-details-column-1 {
float: right; flex-direction: column;
width: 80%;
img {
max-width: 200px;
max-height: 100px;
}
}
.topic-last-posted-at, .topic-last-posted-at,
.topic-author-avatar-timestamp, .topic-author-avatar-timestamp,
.topic-stats { .topic-stats {
clear: left;
float: left;
padding-top: 5px; padding-top: 5px;
} }
@ -233,4 +224,14 @@ div.lightbox-wrapper {
color: $primary-medium; color: $primary-medium;
} }
} }
.topic-details-column-2 {
.topic-featured-image img {
max-width: 200px;
max-height: 100px;
}
}
}
}
} }

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

@ -4,14 +4,12 @@
<div class='topic-list-item'> <div class='topic-list-item'>
<%- if @template == "complete" %> <%- if @template == "complete" %>
<div class='main-link'> <div class='main-link'>
<div class="topic-details-flex">
<div class='topic-details-column-1'>
<div class='topic-title-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> <a target="_parent" href="<%= t.url %>" class="title raw-link raw-topic-link" data-topic-id="<%= t.id %>"><%= t.title %></a>
</div> </div>
<%- if t.image_url.present? %>
<div class='topic-featured-image'>
<img src="<%= t.image_url %>">
</div>
<%- end %>
<%- if 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") %>"> <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')}" %> <%= "#{I18n.t('embed.last_reply')} #{time_ago_in_words(t.last_posted_at, scope: :'datetime.distance_in_words_verbose')}" %>
@ -36,6 +34,16 @@
<%- end %> <%- end %>
</div> </div>
</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 %> <%- else %>
<div class='main-link'> <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> <a target="_parent" href="<%= t.url %>" class="title raw-link raw-topic-link" data-topic-id="<%= t.id %>"><%= t.title %></a>