static-fe overhaul (#236)
[akkoma] / lib / pleroma / web / templates / static_fe / static_fe / profile.html.eex
1 <div class="panel profile">
2 <div class="user-header">
3 <div class="user-banner"></div>
4 <div class="user-info">
5 <div class="container">
6 <a href="<%= (@user.uri || @user.ap_id) %>" rel="author noopener">
7 <div class="avatar">
8 <img
9 class="u-photo" width="48" height="48"
10 src="<%= User.avatar_url(@user) |> MediaProxy.url %>"
11 title="<%= @user.nickname %>" alt="<%= @user.nickname %>"
12 />
13 </div>
14 </a>
15 <div class="user-summary">
16 <div class="top-line">
17 <span class="username">
18 <%= raw Formatter.emojify(@user.name, @user.emoji) %>
19 </span>
20 </div>
21 <div class="bottom-line">
22 <%= link "@#{@user.nickname}", to: (@user.uri || @user.ap_id), class: "account-name" %>
23 <%= if @user.is_admin && @user.show_role do %>
24 <span class="user-role"><%= gettext("Admin") %></span>
25 <% end %>
26 <%= if @user.is_moderator && @user.show_role do %>
27 <span class="user-role"><%= gettext("Moderator") %></span>
28 <% end %>
29 <%= if @user.actor_type == "Service" do %>
30 <span class="user-role"><%= gettext("Bot") %></span>
31 <% end %>
32 <%= if @user.is_locked do %>
33 <img class="fa-icon" src="/static-fe/svg/lock-solid.svg">
34 <% end %>
35 </div>
36 </div>
37 </div>
38 <div class="remote-follow">
39 <form method="POST" action="<%= Helpers.util_path(@conn, :remote_subscribe) %>">
40 <input type="hidden" name="nickname" value="<%= @user.nickname %>">
41 <input type="hidden" name="profile" value="">
42 <button type="submit" class="button-default"><%= Gettext.dpgettext("static_pages", "static fe profile page remote follow button", "Remote follow") %></button>
43 </form>
44 </div>
45 </div>
46 <div class="user-counts">
47 <div class="user-count">
48 <h5><%= gettext("Posts") %></h5>
49 <span><%= @user.note_count %></span>
50 </div>
51 <div class="user-count">
52 <h5><%= gettext("Following") %></h5>
53 <span><%= if @user.hide_follows_count do gettext("Hidden") else @user.following_count end %></span>
54 </div>
55 <div class="user-count">
56 <h5><%= gettext("Followers") %></h5>
57 <span><%= if @user.hide_followers_count do gettext("Hidden") else @user.follower_count end %></span>
58 </div>
59 </div>
60 <span class="user-bio"><%= raw Formatter.emojify(@user.bio, @user.emoji) %></span>
61 </div>
62 <div class="user-profile-fields">
63 <%= for field <- @user.fields do %>
64 <div class="user-profile-field">
65 <dt title="<%= field["name"] %>"><%= raw Formatter.emojify(field["name"], @user.emoji) %></dt>
66 <dd title="<%= field["value"] %>"><%= raw Formatter.emojify(field["value"], @user.emoji) %></dd>
67 </div>
68 <% end %>
69 </div>
70 <div class="tab-switcher">
71 <a href="<%= (@user.uri || @user.ap_id) %>">
72 <button class="button-default tab <%= if @tab == "posts" do %>active<% end %>">
73 <%= gettext("Posts") %>
74 </button>
75 </a>
76 <a href="<%= (@user.uri || @user.ap_id) %>/with_replies">
77 <button class="button-default tab <%= if @tab == "with_replies" do %>active<% end %>">
78 <%= gettext("With Replies") %>
79 </button>
80 </a>
81 <%= unless @user.hide_follows do %>
82 <a href="<%= (@user.uri || @user.ap_id) %>/following">
83 <button class="button-default tab <%= if @tab == "following" do %>active<% end %>">
84 <%= gettext("Following") %>
85 </button>
86 </a>
87 <% end %>
88 <%= unless @user.hide_followers do %>
89 <a href="<%= (@user.uri || @user.ap_id) %>/followers">
90 <button class="button-default tab <%= if @tab == "followers" do %>active<% end %>">
91 <%= gettext("Followers") %>
92 </button>
93 </a>
94 <% end %>
95 <a href="<%= (@user.uri || @user.ap_id) %>/media">
96 <button class="button-default tab <%= if @tab == "media" do %>active<% end %>">
97 <%= gettext("Media") %>
98 </button>
99 </a>
100 </div>
101 <%= if @prev_page_id do %>
102 <%= link gettext("Show newer"), to: "?min_id=" <> @prev_page_id, class: "load-posts" %>
103 <% end %>
104 <div class="activity-stream">
105 <%= if @tab in ["posts", "with_replies", "media"] do %>
106 <%= for activity <- @timeline do %>
107 <%= if(activity.user.id != @user.id) do %>
108 <div class="repeat-header">
109 <div class="left-side">
110 <a href="<%= (@user.uri || @user.ap_id) %>" rel="author noopener">
111 <div class="avatar">
112 <img
113 class="u-photo" width="48" height="48"
114 src="<%= User.avatar_url(@user) |> MediaProxy.url %>"
115 title="<%= @user.nickname %>" alt="<%= @user.nickname %>"
116 />
117 </div>
118 </a>
119 </div>
120 <div class="right-side">
121 <span class="username">
122 <a href="<%= (@user.uri || @user.ap_id) %>" class="account-name">
123 <%= raw Formatter.emojify(@user.name, @user.emoji) %>
124 </a>
125 </span>
126 <img class="fa-icon" src="/static-fe/svg/retweet-solid.svg">
127 <%= gettext("repeated") %>
128 </div>
129 </div>
130 <% end %>
131 <%= render("_notice.html", Map.put(activity, :selected, false)) %>
132 <% end %>
133 <% else %>
134 <%= for user <- @timeline do %>
135 <%= render("_user_card.html", %{user: user}) %>
136 <% end %>
137 <% end %>
138 </div>
139 <%= if @next_page_id do %>
140 <%= link gettext("Show older"), to: "?max_id=" <> @next_page_id, class: "load-posts" %>
141 <% end %>
142 </div>
143
144 <style>
145 :root {
146 --user-banner: url("<%= Pleroma.User.banner_url(@user) %>");
147 }
148 </style>