[Users] Redesign the profile page (#734)

2024-10-28 14:20:29 -07:00 · 2024-10-28 14:20:29 -07:00 · 3f17beb3b8
commit 3f17beb3b8
parent 6f296e8e01
7 changed files with 224 additions and 129 deletions
--- a/app/javascript/src/styles/specific/users.scss
+++ b/app/javascript/src/styles/specific/users.scss
@ -9,59 +9,51 @@

 div#c-users {
  div#a-show {
-    .profile-container {
-      width: 100%;
-    }
-
-    .bottom-section {
-      display: flex;
+
+    display: flex;
+    flex-flow: column;
+    gap: 1em;
+
+    & > div {
+      max-width: 1600px;
+      box-sizing: border-box;
    }

+    // Top section: stats and whatnot
    .stats-section {
      display: flex;
-    }
+      flex-flow: column;

-    .posts-section {
-      .posts {
-        display: flex;
+      // Mobile
+      @include window-larger-than(800px) {
+        flex-flow: row;
      }
-    }

-    .profile-avatar {
-      margin-right: 2em;
-    }
-
-    .about-section {
-      flex-grow: 2;
-      display: flex;
-      .about-piece {
-        flex-grow: 1;
-        margin: 0 1em;
+      .profile-avatar .post-thumbnail {
+        margin: 0 1em 1em 0;
      }
-      div {
-        flex-basis: 50%;
-      }
-    }

-    .vertical-section {
-      display: flex;
-      flex-direction: column;
-    }
+      .profile-stats {
+        width: 100%;
+        padding: 0 0.5em;
+        box-sizing: border-box; // padding overflows the page otherwise
+        border-radius: $border-radius-full;
+        background: themed("color-section");

-    .profile-stats {
-      width: 100%;
-      border-radius: $border-radius-full;
-      padding-left: 0.5em;
-      background: themed("color-section");
-
-      abbr {
-        cursor: help;
+        abbr {
+          cursor: help;
+        }
      }
    }

    .user-statistics {
      display: grid;
-      grid-template-columns: 1fr 1fr;
+      grid-template-columns: 1fr;
+
+      // Mobile
+      @include window-larger-than(800px) {
+        grid-template-columns: 1fr 1fr;
+      }

      .column {
        display: grid;
@ -75,6 +67,143 @@ div#c-users {
        }
      }
    }
+
+    .staff-notes-section {
+      details { margin-bottom: 0; }
+    }
+
+
+    // Middle section: uploads and favorites
+    .blacklist-ui { padding: 0; }
+
+    .posts-section {
+      display: flex;
+      flex-flow: column;
+      gap: 1em;
+
+      .profile-sample {
+        display: grid;
+        grid-template: "p-header"
+                       "p-links"
+                       "p-posts";
+        gap: 0.5em 0;
+
+        @include window-larger-than(800px) {
+          grid-template: "p-header p-links"
+                         "p-posts p-posts";
+          grid-template-columns: 12em 1fr;
+          gap: 0 0.5em;
+        }
+      }
+
+      .profile-sample-header a, .profile-sample-links a {
+        display: block;
+        box-sizing: border-box;
+        align-content: center;
+        text-align: center;
+
+        height: 100%;
+        padding: 0.5em;
+        border-radius: 6px;
+        background-color: themed("color-section");
+
+        &:hover {
+          background-color: themed("color-section-lighten-5");
+        }
+        &:focus, &:active {
+          outline: 0;
+          color: themed("color-link-active");
+        }
+      }
+
+      .profile-sample-header {
+        grid-area: p-header;
+        display: flex;
+
+        a {
+          font-size: 1.25em;
+          font-weight: bold;
+          width: 100%;
+        }
+
+        @include window-larger-than(800px) {
+          a { border-radius: 6px 6px 0 0; }
+        }
+      }
+
+      .profile-sample-links {
+        grid-area: p-links;
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 0.5rem;
+        text-align: center;
+
+        span {
+          padding: 0.5em;
+          color: themed("color-text-muted");
+        }
+
+        .spacer { display: none; }
+        .profile-comments-link {
+          grid-row: 1 / 3;
+          grid-column: 3;
+        }
+
+        @include window-larger-than(800px) {
+          display: flex;
+          a { height: min-content; }
+          .spacer { display: block; }
+        }
+      }
+
+      .profile-sample-posts {
+        grid-area: p-posts;
+        display: flex;
+        overflow: auto;
+        justify-content: space-between;
+        flex-wrap: wrap;
+
+        gap: 0.5em;
+        padding: 0.5em;
+
+        background: var(--color-section);
+        border-radius: 6px;
+
+        // Desktop
+        @include window-larger-than(800px) {
+          flex-wrap: nowrap;
+          border-top-left-radius: 0;
+        }
+
+        article.post-preview {
+          flex: 0 0 150px;
+          margin: 0;
+          img { max-width: unset !important; }
+        }
+      }
+    }
+
+
+    // Bottom section: about me and commission info
+    .about-section {
+      display: flex;
+      flex-flow: column;
+      gap: 1em;
+
+      // Mobile
+      @include window-larger-than(800px) {
+        flex-flow: row;
+      }
+
+      .profile-about-entry {
+        flex-grow: 1;
+        flex-basis: 50%;
+
+        background-color: themed("color-section");
+        border-radius: 6px;
+        padding: 0.5em;
+      }
+    }
  }

  div#a-edit {
@ -109,38 +238,3 @@ div#c-users {
    }
  }
 }
-
-@media screen and (max-width: 800px) {
-  body.resp {
-    div#c-users {
-      div#a-show {
-        .stats-section {
-          flex-direction: column;
-        }
-        .bottom-section {
-          flex-direction: column;
-        }
-        .vertical-section {
-          flex-direction: row;
-          flex-wrap: wrap;
-        }
-        .posts-section {
-          order: 2;
-          .posts {
-            display: block;
-          }
-        }
-        .user-uploads {
-          order: 1;
-        }
-        .about-section {
-          flex-direction: column;
-        }
-        .about-piece {
-          margin: 0;
-          margin-bottom: $padding-050;
-        }
-      }
-    }
-  }
-}
--- a/app/presenters/user_presenter.rb
+++ b/app/presenters/user_presenter.rb
@ -54,7 +54,7 @@ class UserPresenter
  end

  def uploads
-    Post.tag_match("user:#{user.name}").limit(6)
+    Post.tag_match("user:#{user.name}").limit(8)
  end

  def has_uploads?
@ -62,8 +62,8 @@ class UserPresenter
  end

  def favorites
-    ids = Favorite.where(user_id: user.id).order(created_at: :desc).limit(50).pluck(:post_id)[0..5]
-    Post.where(id: ids)
+    ids = Favorite.where(user_id: user.id).order(created_at: :desc).limit(50).pluck(:post_id)[0..7]
+    Post.where(id: ids).sort_by { |post| ids.index(post.id) }
  end

  def has_favorites?
--- a/app/views/admin/staff_notes/partials/_for_user.html.erb
+++ b/app/views/admin/staff_notes/partials/_for_user.html.erb
@ -1,5 +1,5 @@
 <% if CurrentUser.can_view_staff_notes? %>
-  <div class="styled-dtext">
+  <div class="staff-notes-section styled-dtext">
    <details>
      <summary>Staff Notes (<%= user.staff_notes.count %>)</summary>
      <div>
--- a/app/views/users/_about.html.erb
+++ b/app/views/users/_about.html.erb
@ -1,13 +1,13 @@
 <div class="about-section">
  <% if user.profile_about.present? %>
-    <div class="box-section about-piece" id="about-info">
-      <h3>About:</h3>
+    <div class="profile-about-entry" id="about-info">
+      <h3>About</h3>
      <div class="content dtext-container"><%= format_text(user.profile_about, allow_color: true) %></div>
    </div>
  <% end %>
  <% if user.profile_artinfo.present? %>
-    <div class="box-section about-piece" id="about-artinfo">
-      <h3>Artist Information:</h3>
+    <div class="profile-about-entry" id="about-artinfo">
+      <h3>Artist Information</h3>
      <div class="content dtext-container"><%= format_text(user.profile_artinfo, allow_color: true) %></div>
    </div>
  <% end %>
--- a/app/views/users/_post_summary.html.erb
+++ b/app/views/users/_post_summary.html.erb
@ -1,30 +1,51 @@
-<% if presenter.has_favorites? && !@user.hide_favorites? %>
-  <div class="box user-favorites">
-    <h2>
-      <%= link_to "Favorites", favorites_path(:user_id => user.id) %>
-    </h2>
-    <% if user.enable_privacy_mode? || user.is_blocked? %>
-      <h4>
-        (hidden)
-      </h4>
-    <% end %>
-    <div class="vertical-section">
-      <% presenter.favorites.each do |post| %>
-        <%= PostPresenter.preview(post, :tags => "fav:#{user.name}") %>
-      <% end %>
-    </div>
-  </div>
-<% end %>
+<div class="posts-section">

 <% if presenter.has_uploads? %>
-  <div class="box user-uploads">
-    <h2>
-      <%= link_to "Uploads", posts_path(:tags => "user:#{user.name}") %>
-    </h2>
-    <div class="vertical-section">
+  <div class="profile-sample profile-uploads">
+
+    <div class="profile-sample-header">
+      <%= link_to "Uploads", posts_path(:tags => "user:#{user.name}"), class: "title" %>
+    </div>
+
+    <div class="profile-sample-links">
+      <%= link_to(sanitize("<b>#{user.post_upload_count - user.post_deleted_count}</b> total"), posts_path(tags: "user:#{user.name}")) %>
+      <%= link_to(sanitize("<b>#{user.post_deleted_count}</b> deleted"), deleted_posts_path(user_id: user.id)) %>
+      <%= link_to(sanitize("<b>#{user.own_post_replaced_count}</b> replaced"), post_replacements_path(search: { uploader_id_on_approve: user.id })) %>
+      <%= link_to(sanitize("<b>#{user.post_replacement_rejected_count}</b> rejected"), post_replacements_path(search: { creator_id: user.id, status: "rejected" })) %>
+      <span class="spacer"></span>
+      <%= link_to("Comments", comments_path(group_by: "comment", search: { poster_id: user.id }), class: "profile-comments-link") %>
+    </div>
+
+    <div class="profile-sample-posts">
      <% presenter.uploads.each do |post| %>
        <%= PostPresenter.preview(post, :tags => "user:#{user.name}") %>
      <% end %>
    </div>
+
  </div>
 <% end %>
+
+<% if presenter.has_favorites? && !@user.hide_favorites? %>
+  <div class="profile-sample profile-favorites">
+
+    <div class="profile-sample-header">
+      <%= link_to "Favorites", favorites_path(:user_id => user.id), class: "title" %>
+    </div>
+
+    <div class="profile-sample-links">
+      <%= link_to(sanitize("<b>#{user.favorite_count}</b> total"), favorites_path(:user_id => user.id)) %>
+      <% if user.enable_privacy_mode? || user.is_blocked? %>
+        <span>[hidden]</span>
+      <% end %>
+    </div>
+
+    <div class="profile-sample-posts">
+      <% presenter.favorites.each do |post| %>
+        <%= PostPresenter.preview(post, :tags => "fav:#{user.name}") %>
+      <% end %>
+    </div>
+
+  </div>
+<% end %>
+
+</div>
--- a/app/views/users/_statistics.html.erb
+++ b/app/views/users/_statistics.html.erb
@ -20,9 +20,6 @@
        <span>Posts</span>
        <span>
          <%= presenter.active_upload_count(self) %>
-          <% if CurrentUser.is_moderator? %>
-            [<%= link_to "sample", posts_path(tags: "user:#{user.name} order:random limit:300") %>]
-          <% end %>
          [<%= link_to "pending", posts_path(tags: "user:#{user.name} status:pending") %>]
          (<%= link_to "comments on", comments_path(group_by: :comment, search: {poster_id: user.id}) %>)
          <% if CurrentUser.is_moderator? %>
@ -33,9 +30,6 @@
        <span>Deleted</span>
        <span>
          <%= presenter.deleted_upload_count(self) %>
-          <% if CurrentUser.is_moderator? %>
-            [<%= link_to "sample", posts_path(:tags => "user:#{user.name} order:random limit:300 status:deleted") %>]
-          <% end %>
        </span>

        <span>Replaced</span>
@ -50,9 +44,6 @@
        <span>Favorites</span>
        <span>
          <%= presenter.favorite_count(self) %>
-          <% if CurrentUser.is_moderator? %>
-            [<%= link_to "sample", posts_path(:tags => "fav:#{user.name} order:random limit:300") %>]
-          <% end %>
        </span>

        <span>Forum Posts</span>
@ -124,7 +115,7 @@
          <% end %>
        </span>

-        <span>Wiki Page Changes</span>
+        <span>Wiki Changes</span>
        <span><%= presenter.wiki_page_version_count(self) %></span>

        <span>Note Changes</span>
--- a/app/views/users/show.html.erb
+++ b/app/views/users/show.html.erb
@ -1,21 +1,10 @@
 <div id="c-users">
  <div id="a-show">
-    <div class="profile-container">
-      <%= render "statistics", :presenter => @presenter, :user => @user %>
-      <%= render "admin/staff_notes/partials/for_user", user: @user %>
-
-      <div class="blacklist-section">
-        <%= render "posts/partials/common/inline_blacklist" %>
-      </div>
-      <div class="bottom-section">
-        <div class="posts-section">
-          <div class="posts">
-            <%= render "post_summary", presenter: @presenter, user: @user %>
-          </div>
-        </div>
-        <%= render "about", presenter: @presenter, user: @user %>
-      </div>
-    </div>
+    <%= render "statistics", :presenter => @presenter, :user => @user %>
+    <%= render "admin/staff_notes/partials/for_user", user: @user %>
+    <%= render "posts/partials/common/inline_blacklist" %>
+    <%= render "post_summary", presenter: @presenter, user: @user %>
+    <%= render "about", presenter: @presenter, user: @user %>
  </div>
 </div>