From 16ddd5a9c9e04258fb9658bd88936ead58004fea Mon Sep 17 00:00:00 2001
From: Sol Fisher Romanoff <sol@solfisher.com>
Date: Sun, 23 Oct 2022 18:41:27 +0300
Subject: [PATCH] Overhaul profile page

todo: posts/with replies/attachments switch
---
 .../web/templates/layout/static_fe.html.eex   |   4 +-
 .../static_fe/static_fe/profile.html.eex      |  83 +++++++---
 priv/static/static-fe/static-fe.css           | 153 +++++++++++++++++-
 3 files changed, 219 insertions(+), 21 deletions(-)

diff --git a/lib/pleroma/web/templates/layout/static_fe.html.eex b/lib/pleroma/web/templates/layout/static_fe.html.eex
index d7f2ae640..0bd2bd59f 100644
--- a/lib/pleroma/web/templates/layout/static_fe.html.eex
+++ b/lib/pleroma/web/templates/layout/static_fe.html.eex
@@ -18,7 +18,9 @@
     </nav>
     <div class="container">
       <div class="underlay"></div>
-      <%= @inner_content %>
+	  <div class="column main">
+        <%= @inner_content %>
+      </div>
       <div class="column sidebar">
         <div class="about panel">
           <div class="panel-heading">
diff --git a/lib/pleroma/web/templates/static_fe/static_fe/profile.html.eex b/lib/pleroma/web/templates/static_fe/static_fe/profile.html.eex
index a14ca305e..f10d819c3 100644
--- a/lib/pleroma/web/templates/static_fe/static_fe/profile.html.eex
+++ b/lib/pleroma/web/templates/static_fe/static_fe/profile.html.eex
@@ -1,22 +1,63 @@
-<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-card">
+    <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" %>
+          </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>Posts</h5>
+        <span><%= @user.note_count %></span>
+      </div>
+      <div class="user-count">
+        <h5>Following</h5>
+        <span><%= if @user.hide_follows_count do "Hidden" else @user.following_count end %></span>
+      </div>
+      <div class="user-count">
+        <h5>Followers</h5>
+        <span><%= if @user.hide_followers_count do "Hidden" else @user.follower_count end %></span>
+      </div>
+    </div>
+    <span class="user-bio"><%= raw @user.bio %></span>
+  </div>
+  <div class="user-profile-fields">
+    <%= for field <- @user.fields do %>
+    <div class="user-profile-field">
+      <dt title="<%= field["name"] %>"><%= field["name"] %></dt>
+      <dd title="<%= field["value"] %>"><%= field["value"] %></dd>
+    </div>
+    <% end %>
+  </div>
   <div class="activity-stream">
     <%= for activity <- @timeline do %>
-      <%= render("_notice.html", Map.put(activity, :selected, false)) %>
+    <%= render("_notice.html", Map.put(activity, :selected, false)) %>
     <% end %>
     <p id="pagination">
       <%= if @prev_page_id do %>
@@ -28,4 +69,10 @@
       <% end %>
     </p>
   </div>
-</main>
+</div>
+
+<style>
+  :root {
+    --user-banner: url("<%= Pleroma.User.banner_url(@user) %>");
+  }
+</style>
diff --git a/priv/static/static-fe/static-fe.css b/priv/static/static-fe/static-fe.css
index 522eb4ab0..ff43f0944 100644
--- a/priv/static/static-fe/static-fe.css
+++ b/priv/static/static-fe/static-fe.css
@@ -1,5 +1,14 @@
 /* pleroma-light and pleroma-dark themes from pleroma-fe */
 :root {
+    --avatarShadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.7);
+
+    --profileBg: rgba(7, 12, 17, 1);
+    --profileTint: rgba(15, 22, 30, 0.5);
+    --btnText: rgba(185, 185, 186, 1);
+    --btn: rgba(21, 30, 43, 1);
+    --btnShadow: 0px 0px 2px 0px rgba(0, 0, 0, 1) , 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
+    --btnHoverShadow: 0px 0px 1px 2px rgba(185, 185, 186, 0.4) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
+    --lightText: rgba(236, 236, 236, 1);
     --panelShadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5) , 0px 4px 6px 3px rgba(0, 0, 0, 0.3);
     --panelHeaderShadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4) , 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset;
     --topBar: rgba(21, 30, 43, 1);
@@ -60,7 +69,7 @@ .inner-nav img {
     padding-right: 5px
 }
 
-.container {
+body > .container {
     display: grid;
     grid-template-columns: minmax(25em, 45em) 25em;
     grid-template-areas: "content sidebar";
@@ -148,7 +157,7 @@ .account-name {
     flex: 1 1 0;
 }
 
-.username {
+.status-container .username {
     white-space: nowrap;
     overflow: hidden;
     max-width: 85%;
@@ -220,3 +229,143 @@ status-body {
     word-break: break-word;
     line-height: 1.4;
 }
+
+.user-info {
+    padding: 0.5em 26px;
+}
+
+.user-info .container {
+    padding: 18px 0 6px 0;
+    display: flex;
+    align-items: flex-start;
+    max-height: 56px;
+}
+
+.user-info a {
+    color: var(--lightText);
+}
+
+.user-info .avatar img {
+    height: 56px;
+    width: 56px;
+}
+
+.avatar img {
+    border-radius: 3px;
+    box-shadow: var(--avatarShadow);
+}
+
+.user-summary {
+    display: block;
+    margin-left: 0.6em;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1 1 0;
+    z-index: 1;
+    line-height: 2em;
+    color: var(--lightText);
+}
+
+.button-default {
+    user-select: none;
+    color: var(--btnText);
+    background-color: var(--btn);
+    border: none;
+    border-radius: 4px;
+    box-shadow: var(--btnShadow);
+    font-size: 1em;
+    min-height: 2em;
+}
+
+.button-default:hover {
+    box-shadow: var(--btnHoverShadow);
+}
+
+.user-bio {
+    text-align: center;
+    display: block;
+    line-height: 1.3;
+    padding: 1em;
+    margin: 0;
+}
+
+.user-banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: linear-gradient(to bottom, var(--profileTint), var(--profileTint)),
+    				  var(--user-banner);
+    background-size: cover;
+    background-color: var(--profileBg);
+    -webkit-mask: linear-gradient(to top, white, transparent) bottom no-repeat,
+    			  linear-gradient(to top, white, white);
+    -webkit-mask-composite: xor;
+    -webkit-mask-size: 100% 60%;
+    z-index: -2;
+}
+
+.user-card {
+    position: relative;
+    z-index: 1;
+}
+
+.user-profile-fields {
+    margin: 0 0.5em;
+}
+
+.user-profile-field {
+    display: flex;
+    margin: 0.25em;
+    border: 1px solid var(--border, #222);
+    border-radius: 3px;
+    line-height: 1.3;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.user-profile-field dt {
+    padding: 0.5em 1.5em;
+    box-sizing: border-box;
+    flex: 0 1 30%;
+    font-weight: 500;
+    color: var(--lightText);
+    border-right: 1px solid var(--border);
+    text-align: right;
+}
+
+.user-profile-field dd {
+    padding: 0.5em 1.5em;
+    box-sizing: border-box;
+    flex: 1 1 30%;
+    margin: 0 0 0 0.25em;
+}
+
+.user-counts {
+    display: flex;
+    line-height: 1em;
+    padding: 0.5em 1.5em 0 1.5em;
+    text-align: center;
+    justify-content: space-between;
+    color: var(--lightText);
+    flex-wrap: wrap;
+}
+
+.user-count {
+    flex: 1 0 auto;
+    padding: 0.5em 0;
+    margin: 0 0.5em;
+}
+
+.user-count h5 {
+    font-size: 1em;
+    font-weight: bolder;
+    margin: 0 0 0.25em;
+}
+
+.profile .status-container {
+    border-bottom: 1px solid var(--border);
+}