From aabe72f41e75cfbc1ed38bf2a82998ad0953c3a2 Mon Sep 17 00:00:00 2001
From: Sol Fisher Romanoff <sol@solfisher.com>
Date: Mon, 24 Oct 2022 23:01:46 +0300
Subject: [PATCH] Make attachments fit into statuses

---
 .../static_fe/static_fe/_attachment.html.eex  | 18 +++++++------
 .../static_fe/static_fe/_notice.html.eex      | 26 ++++++++----------
 priv/static/static-fe/static-fe.css           | 27 +++++++++++++++++++
 3 files changed, 48 insertions(+), 23 deletions(-)

diff --git a/lib/pleroma/web/templates/static_fe/static_fe/_attachment.html.eex b/lib/pleroma/web/templates/static_fe/static_fe/_attachment.html.eex
index 4853e7f4b..2a3c8c0ca 100644
--- a/lib/pleroma/web/templates/static_fe/static_fe/_attachment.html.eex
+++ b/lib/pleroma/web/templates/static_fe/static_fe/_attachment.html.eex
@@ -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>
diff --git a/lib/pleroma/web/templates/static_fe/static_fe/_notice.html.eex b/lib/pleroma/web/templates/static_fe/static_fe/_notice.html.eex
index 7393b7ee2..572025caa 100644
--- a/lib/pleroma/web/templates/static_fe/static_fe/_notice.html.eex
+++ b/lib/pleroma/web/templates/static_fe/static_fe/_notice.html.eex
@@ -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> -->
diff --git a/priv/static/static-fe/static-fe.css b/priv/static/static-fe/static-fe.css
index 15a90021e..280e603e3 100644
--- a/priv/static/static-fe/static-fe.css
+++ b/priv/static/static-fe/static-fe.css
@@ -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;
+}