edshot99/eBooru
1
0
Fork 0
forked from e621ng/e621ng
Code Issues 11 Releases 1 Activity

[Users] Redesign the profile page (#734)

Browse Source
This commit is contained in:
Cinder 2024-10-28 14:20:29 -07:00 committed by GitHub
parent 6f296e8e01
commit 3f17beb3b8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 224 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

240
app/javascript/src/styles/specific/users.scss
View File

@ -9,59 +9,51 @@
div#c-users { div#c-users {
div#a-show { div#a-show {
.profile-container {
width: 100%; display: flex;
} flex-flow: column;
gap: 1em;
.bottom-section {
display: flex; & > div {
max-width: 1600px;
box-sizing: border-box;
} }
// Top section: stats and whatnot
.stats-section { .stats-section {
display: flex; display: flex;
} flex-flow: column;
.posts-section { // Mobile
.posts { @include window-larger-than(800px) {
display: flex; flex-flow: row;
} }
}
.profile-avatar { .profile-avatar .post-thumbnail {
margin-right: 2em; margin: 0 1em 1em 0;
}
.about-section {
flex-grow: 2;
display: flex;
.about-piece {
flex-grow: 1;
margin: 0 1em;
} }
div {
flex-basis: 50%;
}
}
.vertical-section { .profile-stats {
display: flex; width: 100%;
flex-direction: column; padding: 0 0.5em;
} box-sizing: border-box; // padding overflows the page otherwise
border-radius: $border-radius-full;
background: themed("color-section");
.profile-stats { abbr {
width: 100%; cursor: help;
border-radius: $border-radius-full; }
padding-left: 0.5em;
background: themed("color-section");
abbr {
cursor: help;
} }
} }
.user-statistics { .user-statistics {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr;
// Mobile
@include window-larger-than(800px) {
grid-template-columns: 1fr 1fr;
}
.column { .column {
display: grid; 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 { 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;
}
}
}
}
}

6
app/presenters/user_presenter.rb
View File

@ -54,7 +54,7 @@ class UserPresenter
end end
def uploads def uploads
Post.tag_match("user:#{user.name}").limit(6) Post.tag_match("user:#{user.name}").limit(8)
end end
def has_uploads? def has_uploads?
@ -62,8 +62,8 @@ class UserPresenter
end end
def favorites def favorites
ids = Favorite.where(user_id: user.id).order(created_at: :desc).limit(50).pluck(:post_id)[0..5] ids = Favorite.where(user_id: user.id).order(created_at: :desc).limit(50).pluck(:post_id)[0..7]
Post.where(id: ids) Post.where(id: ids).sort_by { |post| ids.index(post.id) }
end end
def has_favorites? def has_favorites?

2
app/views/admin/staff_notes/partials/_for_user.html.erb
View File

@ -1,5 +1,5 @@
<% if CurrentUser.can_view_staff_notes? %> <% if CurrentUser.can_view_staff_notes? %>
<div class="styled-dtext"> <div class="staff-notes-section styled-dtext">
<details> <details>
<summary>Staff Notes (<%= user.staff_notes.count %>)</summary> <summary>Staff Notes (<%= user.staff_notes.count %>)</summary>
<div> <div>

8
app/views/users/_about.html.erb
View File

@ -1,13 +1,13 @@
<div class="about-section"> <div class="about-section">
<% if user.profile_about.present? %> <% if user.profile_about.present? %>
<div class="box-section about-piece" id="about-info"> <div class="profile-about-entry" id="about-info">
<h3>About:</h3> <h3>About</h3>
<div class="content dtext-container"><%= format_text(user.profile_about, allow_color: true) %></div> <div class="content dtext-container"><%= format_text(user.profile_about, allow_color: true) %></div>
</div> </div>
<% end %> <% end %>
<% if user.profile_artinfo.present? %> <% if user.profile_artinfo.present? %>
<div class="box-section about-piece" id="about-artinfo"> <div class="profile-about-entry" id="about-artinfo">
<h3>Artist Information:</h3> <h3>Artist Information</h3>
<div class="content dtext-container"><%= format_text(user.profile_artinfo, allow_color: true) %></div> <div class="content dtext-container"><%= format_text(user.profile_artinfo, allow_color: true) %></div>
</div> </div>
<% end %> <% end %>

65
app/views/users/_post_summary.html.erb
View File

@ -1,30 +1,51 @@
<% if presenter.has_favorites? && !@user.hide_favorites? %> <div class="posts-section">
<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 %>
<% if presenter.has_uploads? %> <% if presenter.has_uploads? %>
<div class="box user-uploads"> <div class="profile-sample profile-uploads">
<h2>
<%= link_to "Uploads", posts_path(:tags => "user:#{user.name}") %> <div class="profile-sample-header">
</h2> <%= link_to "Uploads", posts_path(:tags => "user:#{user.name}"), class: "title" %>
<div class="vertical-section"> </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| %> <% presenter.uploads.each do |post| %>
<%= PostPresenter.preview(post, :tags => "user:#{user.name}") %> <%= PostPresenter.preview(post, :tags => "user:#{user.name}") %>
<% end %> <% end %>
</div> </div>
</div> </div>
<% end %> <% 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>

11
app/views/users/_statistics.html.erb
View File

@ -20,9 +20,6 @@
<span>Posts</span> <span>Posts</span>
<span> <span>
<%= presenter.active_upload_count(self) %> <%= 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 "pending", posts_path(tags: "user:#{user.name} status:pending") %>]
(<%= link_to "comments on", comments_path(group_by: :comment, search: {poster_id: user.id}) %>) (<%= link_to "comments on", comments_path(group_by: :comment, search: {poster_id: user.id}) %>)
<% if CurrentUser.is_moderator? %> <% if CurrentUser.is_moderator? %>
@ -33,9 +30,6 @@
<span>Deleted</span> <span>Deleted</span>
<span> <span>
<%= presenter.deleted_upload_count(self) %> <%= 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>
<span>Replaced</span> <span>Replaced</span>
@ -50,9 +44,6 @@
<span>Favorites</span> <span>Favorites</span>
<span> <span>
<%= presenter.favorite_count(self) %> <%= presenter.favorite_count(self) %>
<% if CurrentUser.is_moderator? %>
[<%= link_to "sample", posts_path(:tags => "fav:#{user.name} order:random limit:300") %>]
<% end %>
</span> </span>
<span>Forum Posts</span> <span>Forum Posts</span>
@ -124,7 +115,7 @@
<% end %> <% end %>
</span> </span>
<span>Wiki Page Changes</span> <span>Wiki Changes</span>
<span><%= presenter.wiki_page_version_count(self) %></span> <span><%= presenter.wiki_page_version_count(self) %></span>
<span>Note Changes</span> <span>Note Changes</span>

21
app/views/users/show.html.erb
View File

@ -1,21 +1,10 @@
<div id="c-users"> <div id="c-users">
<div id="a-show"> <div id="a-show">
<div class="profile-container"> <%= render "statistics", :presenter => @presenter, :user => @user %>
<%= render "statistics", :presenter => @presenter, :user => @user %> <%= render "admin/staff_notes/partials/for_user", user: @user %>
<%= render "admin/staff_notes/partials/for_user", user: @user %> <%= render "posts/partials/common/inline_blacklist" %>
<%= render "post_summary", presenter: @presenter, user: @user %>
<div class="blacklist-section"> <%= render "about", presenter: @presenter, user: @user %>
<%= 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>
</div> </div>
</div> </div>