Make attachments fit into statuses

This commit is contained in:
Sol Fisher Romanoff 2022-10-24 23:01:46 +03:00 committed by Sam Therapy
parent dc634b5201
commit aabe72f41e
Signed by: sam
GPG Key ID: 4D8B07C18F31ACBD
3 changed files with 48 additions and 23 deletions

View File

@ -1,8 +1,10 @@
<%= case @mediaType do %>
<% "audio" -> %>
<audio class="u-audio" src="<%= @url %>" controls="controls"></audio>
<% "video" -> %>
<video class="u-video" src="<%= @url %>" controls="controls"></video>
<% _ -> %>
<img class="u-photo" src="<%= @url %>" alt="<%= @name %>" title="<%= @name %>">
<% end %>
<a class="attachment" href="<%= @url %>">
<%= case @mediaType do %>
<% "audio" -> %>
<audio class="u-audio" src="<%= @url %>" controls="controls"></audio>
<% "video" -> %>
<video class="u-video" src="<%= @url %>" controls="controls"></video>
<% _ -> %>
<img class="u-photo" src="<%= @url %>" alt="<%= @name %>" title="<%= @name %>">
<% end %>
</a>

View File

@ -36,24 +36,20 @@
<span class="status-summary"><%= raw @title %></span>
<details <%= if open_content?() do %>open<% end %>>
<summary>Show content</summary>
<div class="status-body"><%= raw @content %></div>
</details>
<% else %>
<div class="status-body"><%= raw @content %></div>
<% end %>
<div class="status-body">
<%= raw @content %>
<%= if length(@attachment) > 0 do %>
<div class="attachments">
<%= for %{"name" => name, "url" => [url | _]} <- @attachment do %>
<%= if @sensitive do %>
<details class="nsfw">
<summary><%= Gettext.gettext("sensitive media") %></summary>
<div>
<%= render("_attachment.html", %{name: name, url: url["href"],
mediaType: fetch_media_type(url)}) %>
</div>
</details>
<% else %>
<%= render("_attachment.html", %{name: name, url: url["href"],
mediaType: fetch_media_type(url)}) %>
<%= render("_attachment.html", %{name: name, url: url["href"],
mediaType: fetch_media_type(url)}) %>
<% end %>
</div>
<% end %>
</div>
<%= if @title != "" do %>
</details>
<% end %>
</div>
<!-- <div class="emoji-reactions"></div> -->

View File

@ -152,6 +152,7 @@ .left-side {
.right-side {
flex: 1;
min-width: 0;
}
.status-heading {
@ -419,3 +420,29 @@ .load-posts:hover {
background-color: var(--loadPostsSelected);
color: var(--loadPostsSelectedText);
}
.attachments {
margin-top: 0.5em;
flex-direction: row;
display: flex;
flex-wrap: nowrap;
align-content: stretch;
}
.attachment {
border: 1px solid var(--border);
border-radius: 3px;
display: flex;
flex-grow: 1;
justify-content: center;
min-width: 0;
}
.attachment > * {
width: 100%;
object-fit: contain;
}
.attachment:not(:last-child) {
margin-right: 0.5em;
}