github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-06-24 03:01:33 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: use Flexbox for topic list embed

Browse Source
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
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;
padding: 0.5rem;
width: 100%;
display: inline-block;
a {
color: $primary;
@ -197,24 +196,16 @@ div.lightbox-wrapper {
}
}
.topic-title-link {
float: left;
}
.topic-details-flex {
display: flex;
.topic-featured-image {
float: right;
img {
max-width: 200px;
max-height: 100px;
}
}
.topic-details-column-1 {
flex-direction: column;
width: 80%;
.topic-last-posted-at,
.topic-author-avatar-timestamp,
.topic-stats {
clear: left;
float: left;
padding-top: 5px;
}
@ -233,4 +224,14 @@ div.lightbox-wrapper {
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'>
<%- if @template == "complete" %>
<div class='main-link'>
<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>
<%- 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')}" %>
@ -36,6 +34,16 @@
<%- 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 %>
<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>