artists: make artist pages less shit.

* Group URLs by site.
* List most important URLs first and dead URLs last.
* Add site icons next to URLs.
* Put other names and group name beneath the artist name, instead of beneath the wiki.
This commit is contained in:
evazion
2022-02-08 20:04:51 -06:00
parent 51ba56e8a3
commit 7bbe6e9d22
9 changed files with 106 additions and 73 deletions

View File

@@ -11,8 +11,6 @@ class SourceDataComponent < ApplicationComponent
end
def profile_urls(artist)
artist.urls.active.reject(&:secondary_url?).sort_by do |artist_url|
[artist_url.priority, artist_url.domain, artist_url.url]
end
artist.sorted_urls.select(&:is_active?).reject(&:secondary_url?)
end
end

View File

@@ -1,23 +1,20 @@
@import "./000_vars";
a:link {
a {
color: var(--link-color);
text-decoration: none;
}
a:visited {
color: var(--link-color);
text-decoration: none;
}
a:hover {
color: var(--link-hover-color);
text-decoration: none;
}
a:active {
color: var(--link-color);
text-decoration: none;
}
a.active {

View File

@@ -310,6 +310,11 @@ html {
--related-tags-container-background: var(--grey-0);
--selected-related-tag-background-color: var(--link-color);
--selected-related-tag-color: var(--inverse-text-color);
--inactive-artist-url-color: var(--red-6);
--inactive-artist-url-hover-color: var(--red-5);
--banned-artist-label-color: var(--red-5);
--deleted-artist-label-color: var(--grey-6);
}
/* variables that aren't defined in the dark theme fall back to the :root theme */
@@ -506,4 +511,9 @@ body[data-current-user-theme="dark"] {
--related-tags-container-background: var(--grey-8);
--selected-related-tag-background-color: var(--link-color);
--selected-related-tag-color: var(--inverse-text-color);
--inactive-artist-url-color: var(--red-4);
--inactive-artist-url-hover-color: var(--red-3);
--banned-artist-label-color: var(--red-5);
--deleted-artist-label-color: var(--grey-6);
}

View File

@@ -28,6 +28,12 @@ $spacer: 0.25rem; /* 4px */
.text-xxs { font-size: var(--text-xxs); }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-xxl { font-size: var(--text-xxl); }
.underline { text-decoration-line: underline; }
.decoration-dotted { text-decoration-style: dotted; }
.truncate {
overflow: hidden;
@@ -90,9 +96,13 @@ $spacer: 0.25rem; /* 4px */
.p-1 { padding: 1 * $spacer; }
.p-4 { padding: 4 * $spacer; }
.px-1 { padding-left: 1 * $spacer; padding-right: 1 * $spacer; }
.px-2 { padding-left: 2 * $spacer; padding-right: 2 * $spacer; }
.px-4 { padding-left: 4 * $spacer; padding-right: 4 * $spacer; }
.px-8 { padding-left: 8 * $spacer; padding-right: 8 * $spacer; }
.py-1 { padding-top: 1 * $spacer; padding-bottom: 1 * $spacer; }
.py-2 { padding-top: 2 * $spacer; padding-bottom: 2 * $spacer; }
.py-4 { padding-top: 4 * $spacer; padding-bottom: 4 * $spacer; }
.py-8 { padding-top: 8 * $spacer; padding-bottom: 8 * $spacer; }
@@ -113,6 +123,7 @@ $spacer: 0.25rem; /* 4px */
.h-auto { height: auto; }
.h-1 { height: 1 * $spacer; }
.h-3 { height: 3 * $spacer; }
.h-4 { height: 4 * $spacer; }
.h-8 { height: 8 * $spacer; }
.h-10 { height: 10 * $spacer; }
.h-12 { height: 12 * $spacer; }

View File

@@ -0,0 +1,19 @@
.inactive-artist-url {
&:link, &:visited {
color: var(--inactive-artist-url-color);
}
&:hover {
color: var(--inactive-artist-url-hover-color);
}
}
.banned-artist-label {
background-color: var(--banned-artist-label-color);
color: var(--inverse-text-color);
}
.deleted-artist-label {
background-color: var(--deleted-artist-label-color);
color: var(--inverse-text-color);
}

View File

@@ -34,7 +34,9 @@ class Artist < ApplicationRecord
extend ActiveSupport::Concern
def sorted_urls
urls.sort {|a, b| a.priority <=> b.priority}
urls.sort_by do |url|
[url.is_active? ? 0 : 1, url.priority, url.domain, url.secondary_url? ? 1 : 0, url.url]
end
end
def url_array

View File

@@ -3,21 +3,9 @@
<div id="c-artists">
<div id="a-show">
<h1>Artist: <%= link_to @artist.pretty_name, posts_path(tags: @artist.name), class: tag_class(@artist.tag) %></h1>
<% if @artist.is_banned? && !policy(@artist).can_view_banned? %>
<p>The artist requested removal of this page.</p>
<% else %>
<% if @artist.wiki_page.present? && !@artist.wiki_page.is_deleted? %>
<div class="artist-wiki">
<div class="prose">
<%= format_text(@artist.wiki_page.body, :disable_mentions => true) %>
</div>
<p><%= link_to "View wiki page", @artist.wiki_page %></p>
</div>
<% end %>
<%= yield %>
<% if @artist.tag.present? && @artist.tag.post_count > 0 %>

View File

@@ -1,53 +1,79 @@
<%# artist %>
<ul>
<% if artist.is_banned? || artist.is_deleted? %>
<li>
<strong>Status</strong>
<% if artist.is_banned? %>
Banned
<% end %>
<% if artist.is_deleted? %>
Deleted
<% end %>
</li>
<div class="flex items-center gap-2">
<% if artist.is_banned? %>
<span class="banned-artist-label text-xxs px-2 rounded">BANNED</span>
<% end %>
<% if artist.is_deleted? %>
<span class="deleted-artist-label text-xxs px-2 rounded">DELETED</span>
<% end %>
<%= link_to artist.pretty_name, posts_path(tags: artist.name), class: [tag_class(artist.tag), "heading text-xl"] %>
<span class="text-sm post-count"><%= artist.tag.post_count %></span>
</div>
<% if artist.is_banned? && !policy(artist).can_view_banned? %>
<p>The artist requested removal of this page.</p>
<% else %>
<% if artist.other_names.present? %>
<li>
<strong>Other Names</strong>
<div>
<% artist.other_names.map do |other_name| %>
<%= link_to other_name, artists_path(search: { any_name_matches: other_name }), class: "artist-other-name" %>
<% end %>
</li>
</div>
<% end %>
<% if artist.group_name.present? %>
<li>
<div>
<strong>Group</strong>
<%= link_to artist.group_name, artists_path(search: { group_name: artist.group_name }) %>
</li>
<%= link_to artist.group_name, artists_path(search: { group_name: artist.group_name }), class: "artist-other-name" %>
</div>
<% end %>
<% if artist.members.present? %>
<li>
<div>
<strong>Members</strong>
<% artist.members.each do |member| %>
<%= link_to member.name, artists_path(search: { name: member.name }) %>
<%= link_to member.name, artists_path(search: { name: member.name }), class: "artist-other-name" %>
<% end %>
</li>
</div>
<% end %>
<% if artist.wiki_page.present? && !artist.wiki_page.is_deleted? %>
<div class="artist-wiki prose mt-4">
<%= format_text(artist.wiki_page.body, disable_mentions: true) %>
</div>
<% end %>
<% if artist.urls.present? %>
<li><strong>URLs</strong></li>
<ul class="list-bulleted">
<% artist.urls.each do |url| %>
<li>
<% if url.is_active? %>
<%= link_to h(url.to_s), h(url) %>
<% else %>
<del><%= h(url.url) %></del>
<% end %>
</li>
<% end %>
</ul>
<p>
<h6>URLs</h6>
<ul>
<% artist.sorted_urls.each do |url| %>
<li>
<%= external_link_to url.url, external_site_icon(url.site_name, class: "h-4") %>
<% if url.is_active? %>
<%= external_link_to url.url %>
<% else %>
<%= external_link_to url.url, class: "inactive-artist-url underline decoration-dotted" %>
<% end %>
</li>
<% end %>
</ul>
</p>
<% end %>
</ul>
<p>
<% if artist.wiki_page.present? %>
<%= link_to "Edit wiki", edit_wiki_page_path(artist.wiki_page), id: "view-wiki-link" %> |
<% end %>
<%= link_to "Edit artist", edit_artist_path(artist), id: "view-artist-link" %>
</p>
<%= render "tag_relationships/alias_and_implication_list", tag: artist.tag %>
<% end %>

View File

@@ -157,25 +157,7 @@
<% if @post_set.artist.present? && @post_set.artist.is_banned? && !policy(@post_set.artist).can_view_banned? %>
<p>The artist requested removal of this page.</p>
<% elsif @post_set.artist.present? %>
<% @post_set.artist.tap do |artist| %>
<% unless artist.wiki_page.blank? %>
<div class="prose">
<%= format_text(artist.wiki_page.body) %>
</div>
<% end %>
<div>
<%= render "artists/summary", artist: artist %>
<%= render "tag_relationships/alias_and_implication_list", tag: artist.tag %>
<p class="mt-4">
<% if artist.wiki_page.present? %>
<%= link_to "View wiki", artist.wiki_page, id: "view-wiki-link" %> |
<% end %>
<%= link_to "View artist", artist, id: "view-artist-link" %>
</p>
</div>
<% end %>
<%= render "artists/summary", artist: @post_set.artist %>
<% elsif @post_set.wiki_page.present? %>
<% @post_set.wiki_page.tap do |wiki_page| %>
<div class="prose">