Add repeated header

This commit is contained in:
Sol Fisher Romanoff 2022-11-27 18:37:28 +02:00
parent 5c6ef2b54b
commit e4a33f0df4
No known key found for this signature in database
GPG key ID: 9D3F2B64F2341B62
2 changed files with 56 additions and 5 deletions

View file

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

View file

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