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 2a3c8c0ca..85b5eed03 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,4 +1,9 @@ + <%= if @nsfw do %> +
+
Hover to show content
+
+ <% end %> <%= case @mediaType do %> <% "audio" -> %> 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 baa4ca0fb..70780b9ff 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 @@ -54,7 +54,7 @@
<%= for %{"name" => name, "url" => [url | _]} <- @attachment do %> <%= render("_attachment.html", %{name: name, url: url["href"], - mediaType: fetch_media_type(url)}) %> + mediaType: fetch_media_type(url), nsfw: @sensitive}) %> <% end %>
<% end %> diff --git a/priv/static/static-fe/static-fe.css b/priv/static/static-fe/static-fe.css index f1b02c8c2..785dad3bb 100644 --- a/priv/static/static-fe/static-fe.css +++ b/priv/static/static-fe/static-fe.css @@ -442,6 +442,7 @@ .attachment { display: flex; flex-grow: 1; justify-content: center; + position: relative; min-width: 0; } @@ -464,3 +465,21 @@ .fa-icon { .status-actions .fa-icon { height: 1.1em; } + +.nsfw-banner { + position: absolute; + height: 100%; + display: flex; + align-items: center; +} +.nsfw-banner div { + width: 100%; + text-align: center; +} + +.nsfw-banner:not(:hover) { + background-color: var(--background); +} +.nsfw-banner:hover div { + display: none; +}