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:
@@ -11,8 +11,6 @@ class SourceDataComponent < ApplicationComponent
|
|||||||
end
|
end
|
||||||
|
|
||||||
def profile_urls(artist)
|
def profile_urls(artist)
|
||||||
artist.urls.active.reject(&:secondary_url?).sort_by do |artist_url|
|
artist.sorted_urls.select(&:is_active?).reject(&:secondary_url?)
|
||||||
[artist_url.priority, artist_url.domain, artist_url.url]
|
|
||||||
end
|
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|||||||
@@ -1,23 +1,20 @@
|
|||||||
@import "./000_vars";
|
@import "./000_vars";
|
||||||
|
|
||||||
a:link {
|
a {
|
||||||
color: var(--link-color);
|
color: var(--link-color);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:visited {
|
a:visited {
|
||||||
color: var(--link-color);
|
color: var(--link-color);
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
color: var(--link-hover-color);
|
color: var(--link-hover-color);
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a:active {
|
a:active {
|
||||||
color: var(--link-color);
|
color: var(--link-color);
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a.active {
|
a.active {
|
||||||
|
|||||||
@@ -310,6 +310,11 @@ html {
|
|||||||
--related-tags-container-background: var(--grey-0);
|
--related-tags-container-background: var(--grey-0);
|
||||||
--selected-related-tag-background-color: var(--link-color);
|
--selected-related-tag-background-color: var(--link-color);
|
||||||
--selected-related-tag-color: var(--inverse-text-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 */
|
/* 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);
|
--related-tags-container-background: var(--grey-8);
|
||||||
--selected-related-tag-background-color: var(--link-color);
|
--selected-related-tag-background-color: var(--link-color);
|
||||||
--selected-related-tag-color: var(--inverse-text-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);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -28,6 +28,12 @@ $spacer: 0.25rem; /* 4px */
|
|||||||
.text-xxs { font-size: var(--text-xxs); }
|
.text-xxs { font-size: var(--text-xxs); }
|
||||||
.text-xs { font-size: var(--text-xs); }
|
.text-xs { font-size: var(--text-xs); }
|
||||||
.text-sm { font-size: var(--text-sm); }
|
.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 {
|
.truncate {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -90,9 +96,13 @@ $spacer: 0.25rem; /* 4px */
|
|||||||
.p-1 { padding: 1 * $spacer; }
|
.p-1 { padding: 1 * $spacer; }
|
||||||
.p-4 { padding: 4 * $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-4 { padding-left: 4 * $spacer; padding-right: 4 * $spacer; }
|
||||||
.px-8 { padding-left: 8 * $spacer; padding-right: 8 * $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-4 { padding-top: 4 * $spacer; padding-bottom: 4 * $spacer; }
|
||||||
.py-8 { padding-top: 8 * $spacer; padding-bottom: 8 * $spacer; }
|
.py-8 { padding-top: 8 * $spacer; padding-bottom: 8 * $spacer; }
|
||||||
|
|
||||||
@@ -113,6 +123,7 @@ $spacer: 0.25rem; /* 4px */
|
|||||||
.h-auto { height: auto; }
|
.h-auto { height: auto; }
|
||||||
.h-1 { height: 1 * $spacer; }
|
.h-1 { height: 1 * $spacer; }
|
||||||
.h-3 { height: 3 * $spacer; }
|
.h-3 { height: 3 * $spacer; }
|
||||||
|
.h-4 { height: 4 * $spacer; }
|
||||||
.h-8 { height: 8 * $spacer; }
|
.h-8 { height: 8 * $spacer; }
|
||||||
.h-10 { height: 10 * $spacer; }
|
.h-10 { height: 10 * $spacer; }
|
||||||
.h-12 { height: 12 * $spacer; }
|
.h-12 { height: 12 * $spacer; }
|
||||||
|
|||||||
19
app/javascript/src/styles/specific/artists.scss
Normal file
19
app/javascript/src/styles/specific/artists.scss
Normal 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);
|
||||||
|
}
|
||||||
@@ -34,7 +34,9 @@ class Artist < ApplicationRecord
|
|||||||
extend ActiveSupport::Concern
|
extend ActiveSupport::Concern
|
||||||
|
|
||||||
def sorted_urls
|
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
|
end
|
||||||
|
|
||||||
def url_array
|
def url_array
|
||||||
|
|||||||
@@ -3,21 +3,9 @@
|
|||||||
|
|
||||||
<div id="c-artists">
|
<div id="c-artists">
|
||||||
<div id="a-show">
|
<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? %>
|
<% if @artist.is_banned? && !policy(@artist).can_view_banned? %>
|
||||||
<p>The artist requested removal of this page.</p>
|
<p>The artist requested removal of this page.</p>
|
||||||
<% else %>
|
<% 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 %>
|
<%= yield %>
|
||||||
|
|
||||||
<% if @artist.tag.present? && @artist.tag.post_count > 0 %>
|
<% if @artist.tag.present? && @artist.tag.post_count > 0 %>
|
||||||
|
|||||||
@@ -1,53 +1,79 @@
|
|||||||
<%# artist %>
|
<%# artist %>
|
||||||
<ul>
|
|
||||||
<% if artist.is_banned? || artist.is_deleted? %>
|
|
||||||
<li>
|
|
||||||
<strong>Status</strong>
|
|
||||||
|
|
||||||
<% if artist.is_banned? %>
|
<div class="flex items-center gap-2">
|
||||||
Banned
|
<% if artist.is_banned? %>
|
||||||
<% end %>
|
<span class="banned-artist-label text-xxs px-2 rounded">BANNED</span>
|
||||||
|
|
||||||
<% if artist.is_deleted? %>
|
|
||||||
Deleted
|
|
||||||
<% end %>
|
|
||||||
</li>
|
|
||||||
<% end %>
|
<% 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? %>
|
<% if artist.other_names.present? %>
|
||||||
<li>
|
<div>
|
||||||
<strong>Other Names</strong>
|
|
||||||
<% artist.other_names.map do |other_name| %>
|
<% artist.other_names.map do |other_name| %>
|
||||||
<%= link_to other_name, artists_path(search: { any_name_matches: other_name }), class: "artist-other-name" %>
|
<%= link_to other_name, artists_path(search: { any_name_matches: other_name }), class: "artist-other-name" %>
|
||||||
<% end %>
|
<% end %>
|
||||||
</li>
|
</div>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
<% if artist.group_name.present? %>
|
<% if artist.group_name.present? %>
|
||||||
<li>
|
<div>
|
||||||
<strong>Group</strong>
|
<strong>Group</strong>
|
||||||
<%= link_to artist.group_name, artists_path(search: { group_name: artist.group_name }) %>
|
<%= link_to artist.group_name, artists_path(search: { group_name: artist.group_name }), class: "artist-other-name" %>
|
||||||
</li>
|
</div>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
<% if artist.members.present? %>
|
<% if artist.members.present? %>
|
||||||
<li>
|
<div>
|
||||||
<strong>Members</strong>
|
<strong>Members</strong>
|
||||||
<% artist.members.each do |member| %>
|
<% 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 %>
|
<% end %>
|
||||||
</li>
|
</div>
|
||||||
<% end %>
|
<% 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? %>
|
<% if artist.urls.present? %>
|
||||||
<li><strong>URLs</strong></li>
|
<p>
|
||||||
<ul class="list-bulleted">
|
<h6>URLs</h6>
|
||||||
<% artist.urls.each do |url| %>
|
|
||||||
<li>
|
<ul>
|
||||||
<% if url.is_active? %>
|
<% artist.sorted_urls.each do |url| %>
|
||||||
<%= link_to h(url.to_s), h(url) %>
|
<li>
|
||||||
<% else %>
|
<%= external_link_to url.url, external_site_icon(url.site_name, class: "h-4") %>
|
||||||
<del><%= h(url.url) %></del>
|
<% if url.is_active? %>
|
||||||
<% end %>
|
<%= external_link_to url.url %>
|
||||||
</li>
|
<% else %>
|
||||||
<% end %>
|
<%= external_link_to url.url, class: "inactive-artist-url underline decoration-dotted" %>
|
||||||
</ul>
|
<% end %>
|
||||||
|
</li>
|
||||||
|
<% end %>
|
||||||
|
</ul>
|
||||||
|
</p>
|
||||||
<% end %>
|
<% 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 %>
|
||||||
|
|||||||
@@ -157,25 +157,7 @@
|
|||||||
<% if @post_set.artist.present? && @post_set.artist.is_banned? && !policy(@post_set.artist).can_view_banned? %>
|
<% 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>
|
<p>The artist requested removal of this page.</p>
|
||||||
<% elsif @post_set.artist.present? %>
|
<% elsif @post_set.artist.present? %>
|
||||||
<% @post_set.artist.tap do |artist| %>
|
<%= render "artists/summary", artist: @post_set.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 %>
|
|
||||||
<% elsif @post_set.wiki_page.present? %>
|
<% elsif @post_set.wiki_page.present? %>
|
||||||
<% @post_set.wiki_page.tap do |wiki_page| %>
|
<% @post_set.wiki_page.tap do |wiki_page| %>
|
||||||
<div class="prose">
|
<div class="prose">
|
||||||
|
|||||||
Reference in New Issue
Block a user