Make attachments fit into statuses
This commit is contained in:
parent
dc634b5201
commit
aabe72f41e
3 changed files with 48 additions and 23 deletions
|
@ -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>
|
||||
|
|
|
@ -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> -->
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue