Add repeated header
This commit is contained in:
parent
5c6ef2b54b
commit
e4a33f0df4
2 changed files with 56 additions and 5 deletions
|
@ -107,6 +107,33 @@
|
|||
<div class="activity-stream">
|
||||
<%= if @tab in ["posts", "with_replies", "media"] do %>
|
||||
<%= for activity <- @timeline do %>
|
||||
<%= if(activity.user.id != @user.id) do %>
|
||||
<div class="repeat-header">
|
||||
<div class="left-side">
|
||||
<a href="<%= (@user.uri || @user.ap_id) %>" rel="author noopener">
|
||||
<div class="avatar">
|
||||
<img
|
||||
class="u-photo" width="48" height="48"
|
||||
src="<%= User.avatar_url(@user) |> MediaProxy.url %>"
|
||||
title="<%= @user.nickname %>" alt="<%= @user.nickname %>"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="right-side">
|
||||
<span class="username">
|
||||
|
||||
<a href="<%= (@user.uri || @user.ap_id) %>" class="account-name">
|
||||
<%= raw Formatter.emojify(@user.name, @user.emoji) %>
|
||||
</a>
|
||||
</span>
|
||||
<svg class="fa-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
|
||||
<path d="M272 416c17.7 0 32-14.3 32-32s-14.3-32-32-32H160c-17.7 0-32-14.3-32-32V192h32c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-64-64c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8l32 0 0 128c0 53 43 96 96 96H272zM304 96c-17.7 0-32 14.3-32 32s14.3 32 32 32l112 0c17.7 0 32 14.3 32 32l0 128H416c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8l-32 0V192c0-53-43-96-96-96L304 96z"/>
|
||||
</svg>
|
||||
<%= gettext("repeated") %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<%= render("_notice.html", Map.put(activity, :selected, false)) %>
|
||||
<% end %>
|
||||
<% else %>
|
||||
|
|
|
@ -168,6 +168,7 @@ .sidebar {
|
|||
}
|
||||
|
||||
.status-container,
|
||||
.repeat-header,
|
||||
.user-card {
|
||||
display: flex;
|
||||
padding: 0.75em;
|
||||
|
@ -182,6 +183,20 @@ .right-side {
|
|||
min-width: 0;
|
||||
}
|
||||
|
||||
.repeat-header {
|
||||
padding: 0.4em 0.75em;
|
||||
margin-bottom: -0.75em;
|
||||
}
|
||||
|
||||
.repeat-header .right-side {
|
||||
color: var(--faint);
|
||||
}
|
||||
.repeat-header .u-photo {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin-left: 28px;
|
||||
}
|
||||
|
||||
.status-heading {
|
||||
margin-bottom: 0.5em;
|
||||
line-height: 1.3;
|
||||
|
@ -194,6 +209,8 @@ .status-heading a {
|
|||
|
||||
.heading-left {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.heading-right {
|
||||
|
@ -210,7 +227,8 @@ .heading-name-row .account-name {
|
|||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.heading-name-row .username {
|
||||
.heading-name-row .username,
|
||||
.repeat-header .username {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 85%;
|
||||
|
@ -545,6 +563,7 @@ .fa-icon {
|
|||
height: 0.875em;
|
||||
margin: 0 0.3em;
|
||||
fill: var(--icon);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.status-actions .fa-icon {
|
||||
|
@ -575,8 +594,13 @@ @media (max-width: 800px) {
|
|||
}
|
||||
|
||||
img.emoji {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.username img.emoji {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue