static-fe overhaul (#236)
makes static-fe look more like pleroma-fe, with the stylesheets matching pleroma-dark and pleroma-light based on `prefers-color-scheme`. - [x] navbar - [x] about sidebar - [x] background image - [x] statuses - [x] "reply to" or "edited" tags - [x] accounts - [x] show more / show less - [x] posts / with replies / media / followers / following - [x] followers/following would require user card snippets - [x] admin/bot indicators - [x] attachments - [x] nsfw attachments - [x] fontawesome icons - [x] clean up and sort css - [x] add pleroma-light - [x] replace hardcoded strings also i forgot - [x] repeated headers how it looks + sneak peek at statuses: ![](https://akkoma.dev/attachments/c0d3a025-6987-4630-8eb9-5f4db6858359) Co-authored-by: Sol Fisher Romanoff <sol@solfisher.com> Reviewed-on: https://akkoma.dev/AkkomaGang/akkoma/pulls/236 Co-authored-by: sfr <sol@solfisher.com> Co-committed-by: sfr <sol@solfisher.com>translations
parent
09326ffa56
commit
7c4b415929
@ -1,10 +1,11 @@
|
||||
*.ex diff=elixir
|
||||
*.exs diff=elixir
|
||||
|
||||
priv/static/instance/static.css diff=css
|
||||
|
||||
# Most of js/css files included in the repo are minified bundles,
|
||||
# and we don't want to search/diff those as text files.
|
||||
*.js binary
|
||||
*.js.map binary
|
||||
*.css binary
|
||||
|
||||
priv/static/instance/static.css diff=css
|
||||
priv/static/static-fe/static-fe.css diff=css
|
||||
|
@ -1,8 +1,15 @@
|
||||
<%= 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 %>" alt=<%= @name %>" title="<%= @name %>">
|
||||
<%= if @nsfw do %>
|
||||
<div class="nsfw-banner">
|
||||
<div><%= gettext("Hover to show content") %></div>
|
||||
</div>
|
||||
<% end %>
|
||||
<%= 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 %>">
|
||||
<% end %>
|
||||
</a>
|
||||
|
@ -1,41 +1,109 @@
|
||||
<div class="activity h-entry" <%= if @selected do %> id="selected" <% end %>>
|
||||
<p class="pull-right">
|
||||
<a class="activity-link u-url u-uid" href="<%= @link %>">
|
||||
<time class="dt-published" datetime="<%= @published %>">
|
||||
<%= format_date(@published) %>
|
||||
</time>
|
||||
<div class="status-container" <%= if @selected do %> id="selected" <% end %>>
|
||||
<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>
|
||||
</p>
|
||||
<%= render("_user_card.html", %{user: @user}) %>
|
||||
<div class="activity-content">
|
||||
<%= if @title != "" do %>
|
||||
</div>
|
||||
<div class="right-side">
|
||||
<div class="status-heading">
|
||||
<div class="heading-name-row">
|
||||
<div class="heading-left">
|
||||
<h4 class="username">
|
||||
<%= raw Formatter.emojify(@user.name, @user.emoji) %>
|
||||
</h4>
|
||||
<a href="<%= (@user.uri || @user.ap_id) %>" class="account-name">
|
||||
<%= @user.nickname %>
|
||||
</a>
|
||||
</div>
|
||||
<div class="heading-right">
|
||||
<a class="timeago" href="<%= @link %>">
|
||||
<time
|
||||
class="dt-published" datetime="<%= @published %>"
|
||||
title="<%= format_date(@published) %>"
|
||||
>
|
||||
<%= time_ago(@published) %>
|
||||
</time>
|
||||
</a>
|
||||
<%= if @visibility == "public" do %>
|
||||
<img class="fa-icon" src="/static-fe/svg/globe-solid.svg">
|
||||
<% else %>
|
||||
<%= if @visibility == "unlisted" do %>
|
||||
<img class="fa-icon" src="/static-fe/svg/lock-open-solid.svg">
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<%= if @reply_to do %>
|
||||
<div class="heading-reply-row">
|
||||
<a class="reply-to-link" href="<%= @reply_to %>">
|
||||
<img class="fa-icon" src="/static-fe/svg/reply-solid.svg">
|
||||
<%= gettext("Reply to") %>
|
||||
</a>
|
||||
<span class="h-card">
|
||||
<a href="<%= (@reply_to_user.uri || @reply_to_user.ap_id) %>" class="u-url mention">
|
||||
@<%= @reply_to_user.nickname %>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<% end %>
|
||||
<%= if @edited_at do %>
|
||||
<div class="heading-edited-row">
|
||||
<%= gettext("Edited %{timeago}", timeago: time_ago(@edited_at)) %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="status-content">
|
||||
<%= if @title && @title != "" do %>
|
||||
<span class="status-summary"><%= raw @title %></span>
|
||||
<details <%= if open_content?() do %>open<% end %>>
|
||||
<summary class="p-name"><%= raw @title %></summary>
|
||||
<div class="e-content"><%= raw @content %></div>
|
||||
</details>
|
||||
<% else %>
|
||||
<div class="e-content"><%= raw @content %></div>
|
||||
<% end %>
|
||||
<%= 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)}) %>
|
||||
<summary><%= gettext("Show content") %></summary>
|
||||
<% end %>
|
||||
<div class="status-body">
|
||||
<%= raw @content %>
|
||||
<%= if @poll && length(@poll) > 0 do %>
|
||||
<div class="poll">
|
||||
<%= for %{"name" => option, "replies" => %{"totalItems" => count}} <- @poll do %>
|
||||
<div class="poll-option" title="<%= count %>/<%= @total_votes %>">
|
||||
<span class="percentage"><%= poll_percentage(count, @total_votes) %></span>
|
||||
<span><%= raw option %></span>
|
||||
<div class="fill" style="width: <%= poll_percentage(count, @total_votes) %>"></div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
<%= if length(@attachment) > 0 do %>
|
||||
<div class="attachments">
|
||||
<%= for attachment = %{"url" => [url | _]} <- @attachment do %>
|
||||
<%= render("_attachment.html", %{name: get_attachment_name(attachment),
|
||||
url: url["href"], mediaType: fetch_media_type(url), nsfw: @sensitive}) %>
|
||||
<% end %>
|
||||
</div>
|
||||
</details>
|
||||
<% else %>
|
||||
<%= render("_attachment.html", %{name: name, url: url["href"],
|
||||
mediaType: fetch_media_type(url)}) %>
|
||||
<% end %>
|
||||
</div>
|
||||
<%= if @title && @title != "" do %>
|
||||
</details>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
<!-- <div class="emoji-reactions"></div> -->
|
||||
<div class="status-actions">
|
||||
<div>
|
||||
<img class="fa-icon" src="/static-fe/svg/reply-solid.svg">
|
||||
<span class="action-count"><%= @counts.replies %></span>
|
||||
</div>
|
||||
<div>
|
||||
<img class="fa-icon" src="/static-fe/svg/retweet-solid.svg">
|
||||
<span class="action-count"><%= @counts.announces %></span>
|
||||
</div>
|
||||
<div>
|
||||
<img class="fa-icon" src="/static-fe/svg/star-regular.svg">
|
||||
<span class="action-count"><%= @counts.likes %></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%= if @selected do %>
|
||||
<dl class="counts">
|
||||
<dt><%= Gettext.gettext("replies") %></dt><dd><%= @counts.replies %></dd>
|
||||
<dt><%= Gettext.gettext("announces") %></dt><dd><%= @counts.announces %></dd>
|
||||
<dt><%= Gettext.gettext("likes") %></dt><dd><%= @counts.likes %></dd>
|
||||
</dl>
|
||||
<% end %>
|
||||
</div>
|
||||
|
@ -1,11 +1,21 @@
|
||||
<div class="p-author h-card">
|
||||
<a class="u-url" rel="author noopener" href="<%= (@user.uri || @user.ap_id) %>">
|
||||
<div class="avatar">
|
||||
<img class="u-photo" src="<%= User.avatar_url(@user) |> MediaProxy.url %>" width="48" height="48" alt="">
|
||||
<div class="user-card">
|
||||
<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">
|
||||
<div class="username">
|
||||
<%= raw Formatter.emojify(@user.name, @user.emoji) %>
|
||||
</div>
|
||||
<span class="display-name">
|
||||
<bdi class="p-name"><%= raw Formatter.emojify(@user.name, @user.emoji) %></bdi>
|
||||
<span class="nickname"><%= @user.nickname %></span>
|
||||
</span>
|
||||
</a>
|
||||
<a href="<%= (@user.uri || @user.ap_id) %>" class="account-name">
|
||||
@<%= @user.nickname %>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,11 +1,8 @@
|
||||
<header>
|
||||
<h1><%= link instance_name(), to: "/" %></h1>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="conversation">
|
||||
<%= for activity <- @activities do %>
|
||||
<%= render("_notice.html", activity) %>
|
||||
<% end %>
|
||||
<div class="panel conversation">
|
||||
<div class="panel-heading">
|
||||
<%= gettext("Conversation") %>
|
||||
</div>
|
||||
</main>
|
||||
<%= for activity <- @activities do %>
|
||||
<%= render("_notice.html", activity) %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
@ -1,7 +1,8 @@
|
||||
<header>
|
||||
<h1><%= gettext("Oops") %></h1>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<p><%= @message %></p>
|
||||
</main>
|
||||
<div class="panel">
|
||||
<div class="panel-heading">
|
||||
<%= gettext("Error") %>
|
||||
</div>
|
||||
<div class="status-container">
|
||||
<%= @message %>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,31 +1,148 @@
|
||||
<header>
|
||||
<h1><%= link instance_name(), to: "/" %></h1>
|
||||
|
||||
<h3>
|
||||
<form class="pull-right collapse" method="POST" action="<%= Helpers.util_path(@conn, :remote_subscribe) %>">
|
||||
<input type="hidden" name="nickname" value="<%= @user.nickname %>">
|
||||
<input type="hidden" name="profile" value="">
|
||||
<button type="submit" class="collapse"><%= Gettext.dpgettext("static_pages", "static fe profile page remote follow button", "Remote follow") %></button>
|
||||
</form>
|
||||
<%= raw Formatter.emojify(@user.name, @user.emoji) %> |
|
||||
<%= link "@#{@user.nickname}@#{Endpoint.host()}", to: (@user.uri || @user.ap_id) %>
|
||||
</h3>
|
||||
<p><%= raw @user.bio %></p>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="panel profile">
|
||||
<div class="user-header">
|
||||
<div class="user-banner"></div>
|
||||
<div class="user-info">
|
||||
<div class="container">
|
||||
<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 class="user-summary">
|
||||
<div class="top-line">
|
||||
<span class="username">
|
||||
<%= raw Formatter.emojify(@user.name, @user.emoji) %>
|
||||
</span>
|
||||
</div>
|
||||
<div class="bottom-line">
|
||||
<%= link "@#{@user.nickname}", to: (@user.uri || @user.ap_id), class: "account-name" %>
|
||||
<%= if @user.is_admin && @user.show_role do %>
|
||||
<span class="user-role"><%= gettext("Admin") %></span>
|
||||
<% end %>
|
||||
<%= if @user.is_moderator && @user.show_role do %>
|
||||
<span class="user-role"><%= gettext("Moderator") %></span>
|
||||
<% end %>
|
||||
<%= if @user.actor_type == "Service" do %>
|
||||
<span class="user-role"><%= gettext("Bot") %></span>
|
||||
<% end %>
|
||||
<%= if @user.is_locked do %>
|
||||
<img class="fa-icon" src="/static-fe/svg/lock-solid.svg">
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="remote-follow">
|
||||
<form method="POST" action="<%= Helpers.util_path(@conn, :remote_subscribe) %>">
|
||||
<input type="hidden" name="nickname" value="<%= @user.nickname %>">
|
||||
<input type="hidden" name="profile" value="">
|
||||
<button type="submit" class="button-default"><%= Gettext.dpgettext("static_pages", "static fe profile page remote follow button", "Remote follow") %></button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-counts">
|
||||
<div class="user-count">
|
||||
<h5><%= gettext("Posts") %></h5>
|
||||
<span><%= @user.note_count %></span>
|
||||
</div>
|
||||
<div class="user-count">
|
||||
<h5><%= gettext("Following") %></h5>
|
||||
<span><%= if @user.hide_follows_count do gettext("Hidden") else @user.following_count end %></span>
|
||||
</div>
|
||||
<div class="user-count">
|
||||
<h5><%= gettext("Followers") %></h5>
|
||||
<span><%= if @user.hide_followers_count do gettext("Hidden") else @user.follower_count end %></span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="user-bio"><%= raw Formatter.emojify(@user.bio, @user.emoji) %></span>
|
||||
</div>
|
||||
<div class="user-profile-fields">
|
||||
<%= for field <- @user.fields do %>
|
||||
<div class="user-profile-field">
|
||||
<dt title="<%= field["name"] %>"><%= raw Formatter.emojify(field["name"], @user.emoji) %></dt>
|
||||
<dd title="<%= field["value"] %>"><%= raw Formatter.emojify(field["value"], @user.emoji) %></dd>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="tab-switcher">
|
||||
<a href="<%= (@user.uri || @user.ap_id) %>">
|
||||
<button class="button-default tab <%= if @tab == "posts" do %>active<% end %>">
|
||||
<%= gettext("Posts") %>
|
||||
</button>
|
||||
</a>
|
||||
<a href="<%= (@user.uri || @user.ap_id) %>/with_replies">
|
||||
<button class="button-default tab <%= if @tab == "with_replies" do %>active<% end %>">
|
||||
<%= gettext("With Replies") %>
|
||||
</button>
|
||||
</a>
|
||||
<%= unless @user.hide_follows do %>
|
||||
<a href="<%= (@user.uri || @user.ap_id) %>/following">
|
||||
<button class="button-default tab <%= if @tab == "following" do %>active<% end %>">
|
||||
<%= gettext("Following") %>
|
||||
</button>
|
||||
</a>
|
||||
<% end %>
|
||||
<%= unless @user.hide_followers do %>
|
||||
<a href="<%= (@user.uri || @user.ap_id) %>/followers">
|
||||
<button class="button-default tab <%= if @tab == "followers" do %>active<% end %>">
|
||||
<%= gettext("Followers") %>
|
||||
</button>
|
||||
</a>
|
||||
<% end %>
|
||||
<a href="<%= (@user.uri || @user.ap_id) %>/media">
|
||||
<button class="button-default tab <%= if @tab == "media" do %>active<% end %>">
|
||||
<%= gettext("Media") %>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
<%= if @prev_page_id do %>
|
||||
<%= link gettext("Show newer"), to: "?min_id=" <> @prev_page_id, class: "load-posts" %>
|
||||
<% end %>
|
||||
<div class="activity-stream">
|
||||
<%= if @tab in ["posts", "with_replies", "media"] do %>
|
||||
<%= for activity <- @timeline do %>
|
||||
<%= render("_notice.html", Map.put(activity, :selected, false)) %>
|
||||
<%= 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>
|
||||
<img class="fa-icon" src="/static-fe/svg/retweet-solid.svg">
|
||||
<%= gettext("repeated") %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<%= render("_notice.html", Map.put(activity, :selected, false)) %>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<%= for user <- @timeline do %>
|
||||
<%= render("_user_card.html", %{user: user}) %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<p id="pagination">
|
||||
<%= if @prev_page_id do %>
|
||||
<%= link "«", to: "?min_id=" <> @prev_page_id %>
|
||||
<% end %>
|
||||
<%= if @prev_page_id && @next_page_id, do: " | " %>
|
||||
<%= if @next_page_id do %>
|
||||
<%= link "»", to: "?max_id=" <> @next_page_id %>
|
||||
<% end %>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<%= if @next_page_id do %>
|
||||
<%= link gettext("Show older"), to: "?max_id=" <> @next_page_id, class: "load-posts" %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--user-banner: url("<%= Pleroma.User.banner_url(@user) %>");
|
||||
}
|
||||
</style>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 485 B |
After Width: | Height: | Size: 460 B |
After Width: | Height: | Size: 599 B |
After Width: | Height: | Size: 740 B |
After Width: | Height: | Size: 1.0 KiB |
Loading…
Reference in new issue