jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

css: replace more css with tailwind-style classes.

Browse Source
This commit is contained in:
evazion
2022-12-11 17:29:53 -06:00
parent fc7bc64d4c
commit 1c2042285f
20 changed files with 120 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/components/comment_component.rb
View File

@@ -1,12 +1,13 @@
# frozen_string_literal: true
class CommentComponent < ApplicationComponent
attr_reader :comment, :context, :dtext_data, :current_user
attr_reader :comment, :context, :classes, :dtext_data, :current_user
def initialize(comment:, current_user:, context: nil, dtext_data: nil)
def initialize(comment:, current_user:, context: nil, classes: nil, dtext_data: nil)
super
@comment = comment
@context = context
@classes = classes
@dtext_data = dtext_data
@current_user = current_user
end

8
app/components/comment_component/comment_component.html.erb
View File

@@ -1,4 +1,4 @@
<article id="comment_<%= comment.id %>" class="comment message"
<article id="comment_<%= comment.id %>" class="comment message <%= classes %>"
x-data="{ showThresholded: false }"
x-bind:data-show-thresholded="String(showThresholded)"
data-id="<%= comment.id %>"
@@ -31,7 +31,7 @@
</div>
<div class="content">
<%= link_to "[hidden]", "javascript:void(0)", class: "unhide-comment-link", "x-on:click": "showThresholded = true" %>
<%= link_to "[hidden]", "javascript:void(0)", class: "unhide-comment-link block mb-3", "x-on:click": "showThresholded = true" %>
<%= tag.div class: "body prose" do %>
<% if redact_deleted? %>
@@ -54,7 +54,7 @@
<%= link_to upvote_icon, comment_comment_votes_path(comment_id: comment.id, score: "1"), class: "comment-upvote-link inactive-link", method: :post, remote: true %>
<% end %>
<span class="comment-score">
<span class="comment-score inline-block text-center whitespace-nowrap align-middle min-w-4">
<% if policy(CommentVote).can_see_votes? %>
<%= link_to comment.score, comment_votes_path(search: { comment_id: comment.id }, variant: "compact"), class: "inactive-link" %>
<% else %>
@@ -85,7 +85,7 @@
<% end %>
<% if reported? %>
<li class="moderation-report-notice">
<li class="moderation-report-notice font-bold">
Reported (<%= link_to pluralize(comment.pending_moderation_reports.length, "report"), moderation_reports_path(search: { model_type: "Comment", model_id: comment.id, status: "pending" }) %>)
</li>
<% end %>

25
app/components/comment_component/comment_component.scss
View File

@@ -1,6 +1,4 @@
article.comment {
flex: 1;
&[data-is-sticky="true"] {
background: var(--comment-sticky-background-color);
}
@@ -25,30 +23,7 @@ article.comment {
.unhide-comment-link { display: none; }
}
.unhide-comment-link {
margin-bottom: 0.75rem;
display: block;
}
.moderation-report-notice {
font-weight: bold;
color: var(--moderation-report-text-color);
}
.comment-votes {
color: var(--muted-text-color);
// Fix it so that the vote buttons don't move when the score changes width.
.comment-score {
display: inline-block;
text-align: center;
min-width: 1.25em;
white-space: nowrap;
vertical-align: middle;
}
.icon {
width: 1.25em;
}
}
}

8
app/components/post_preview_component.rb
View File

@@ -9,7 +9,7 @@ class PostPreviewComponent < ApplicationComponent
with_collection_parameter :post
attr_reader :post, :tags, :size, :show_deleted, :link_target, :pool, :similarity, :recommended, :show_votes, :fit, :show_size, :save_data, :current_user, :options
attr_reader :post, :tags, :size, :classes, :show_deleted, :link_target, :pool, :similarity, :recommended, :show_votes, :fit, :show_size, :save_data, :current_user, :options
delegate :external_link_to, :time_ago_in_words_tagged, :duration_to_hhmmss, :render_post_votes, :empty_heart_icon, :sound_icon, to: :helpers
delegate :image_width, :image_height, :file_ext, :file_size, :duration, :is_animated?, to: :media_asset
@@ -19,6 +19,7 @@ class PostPreviewComponent < ApplicationComponent
# @param tags [String] The current tag search, if any.
# @param size [String] The size of the thumbnail. One of "150", "180", "225",
# "225w", "270", "270w", or "360".
# param classes [String] A list of CSS classes to apply to the container.
# @param show_deleted [Boolean] If true, show thumbnails for deleted posts.
# If false, hide thumbnails of deleted posts.
# @param show_votes [Boolean] If true, show scores and vote buttons beneath the thumbnail.
@@ -30,11 +31,12 @@ class PostPreviewComponent < ApplicationComponent
# @param fit [Symbol] If `:fixed`, make the thumbnail container a fixed size
# (e.g. 180x180), even if the thumbnail image is smaller than that. If `:compact`,
# make the thumbnail container shrink to the same size as the thumbnail image.
def initialize(post:, tags: "", size: DEFAULT_SIZE, show_deleted: false, show_votes: false, link_target: post, pool: nil, similarity: nil, recommended: nil, show_size: nil, save_data: CurrentUser.save_data, fit: :compact, current_user: CurrentUser.user, **options)
def initialize(post:, tags: "", size: DEFAULT_SIZE, classes: nil, show_deleted: false, show_votes: false, link_target: post, pool: nil, similarity: nil, recommended: nil, show_size: nil, save_data: CurrentUser.save_data, fit: :compact, current_user: CurrentUser.user, **options)
super
@post = post
@tags = tags.presence
@size = size.presence || DEFAULT_SIZE
@classes = classes
@show_deleted = show_deleted
@show_votes = show_votes
@link_target = link_target
@@ -52,7 +54,7 @@ class PostPreviewComponent < ApplicationComponent
post.present? && post.visible?(current_user) && (!post.is_deleted? || show_deleted)
end
def article_attrs(classes = nil)
def article_attrs
{ class: [classes, *preview_class].compact.join(" "), **data_attributes }
end

2
app/components/post_votes_component/post_votes_component.html.erb
View File

@@ -7,7 +7,7 @@
<%= link_to upvote_icon, post_post_votes_path(post_id: post.id, score: 1), class: "post-upvote-link inactive-link", method: :post, remote: true %>
<% end %>
<span class="post-score">
<span class="post-score inline-block text-center whitespace-nowrap align-middle min-w-4">
<%= link_to post.score, post_votes_path(search: { post_id: post.id }, variant: :compact), rel: "nofollow" %>
</span>

12
app/components/post_votes_component/post_votes_component.scss
View File

@@ -1,17 +1,5 @@
@import "../../javascript/src/styles/base/000_vars";
.post-votes {
// Fix it so that the vote buttons don't move when the score changes width.
// XXX duplicated from app/components/comment_component/comment_component.scss
.post-score {
display: inline-block;
text-align: center;
min-width: 1.25em;
white-space: nowrap;
vertical-align: middle;
}
}
article.post-preview {
.post-score a {
@include inactive-link;

6
app/javascript/src/styles/common/utilities.scss
View File

@@ -119,6 +119,7 @@ $spacer: 0.25rem; /* 4px */
.mt-8 { margin-top: 8 * $spacer; }
.mb-2 { margin-bottom: 2 * $spacer; }
.mb-3 { margin-bottom: 3 * $spacer; }
.mb-4 { margin-bottom: 4 * $spacer; }
.mb-8 { margin-bottom: 8 * $spacer; }
@@ -171,6 +172,7 @@ $spacer: 0.25rem; /* 4px */
.w-600px { width: 600px; }
.min-w-0 { min-width: 0; }
.min-w-4 { min-width: 4 * $spacer; }
.max-w-full { max-width: 100%; }
.max-h-full { max-height: 100%; }
@@ -205,7 +207,11 @@ $spacer: 0.25rem; /* 4px */
.space-x-1 > * + * { margin-left: 1 * $spacer; }
.space-x-2 > * + * { margin-left: 2 * $spacer; }
.space-x-4 > * + * { margin-left: 4 * $spacer; }
.space-y-2 > * + * { margin-top: 2 * $spacer; }
.space-y-4 > * + * { margin-top: 4 * $spacer; }
.space-y-8 > * + * { margin-top: 8 * $spacer; }
.space-y-12 > * + * { margin-top: 12 * $spacer; }
.gap-1 { gap: 1 * $spacer; }
.gap-2 { gap: 2 * $spacer; }

49
app/javascript/src/styles/specific/comments.scss
View File

@@ -1,50 +1,5 @@
@import "../base/000_vars";
div#c-comments {
div#a-index {
div.header {
margin-bottom: 1em;
span.info {
margin-right: 1.5em;
}
strong, time {
margin-right: 0.3em;
}
}
div.post {
display: flex;
margin-bottom: 4em;
}
}
}
form.edit_comment div.input.boolean {
display: inline-block;
label {
font-weight: normal;
vertical-align: initial;
}
}
@media screen and (max-width: 660px) {
div#c-comments div#a-index, div#c-comments div#a-show {
div.post {
display: block;
margin: 2em 0;
&:first-of-type {
margin: 1em 0;
}
div.preview {
margin: 1em auto;
width: auto;
height: auto;
}
}
.post .post-preview {
display: flex;
}
}

29
app/javascript/src/styles/specific/forum.scss
View File

@@ -1,13 +1,4 @@
div#c-forum-topics {
td.status-column {
white-space: nowrap;
text-align: right;
}
td.creator-column, td.updated-by-column {
white-space: nowrap;
}
a.topic-status {
margin-right: 0.25em;
@@ -53,24 +44,4 @@ div#c-forum-topics {
&:hover { background-color: var(--forum-topic-status-rejected-color); }
}
}
#a-index {
.updated-at-column {
white-space: nowrap;
}
.creator-column, .updated-by-column, .updated-at-column {
@media screen and (max-width: 660px) {
display: none;
}
}
}
}
#c-forum-posts #a-index {
tr[data-topic-is-deleted="true"] .forum-post-topic-title::after,
tr[data-is-deleted="true"] .forum-post-excerpt::after {
content: " (deleted)";
color: var(--muted-text-color);
}
}

15
app/javascript/src/styles/specific/keyboard_shortcuts.scss
View File

@@ -1,15 +0,0 @@
div#c-static {
div#a-keyboard-shortcuts {
section.column {
min-width: 25em;
ul {
margin-bottom: 2em;
}
li {
margin-bottom: 0.5em;
}
}
}
}

18
app/javascript/src/styles/specific/uploads.scss
View File

@@ -1,21 +1,9 @@
div#c-uploads {
div#a-show {
.artist-commentary {
margin-top: 1em;
}
.commentary-translation {
margin-top: 1em;
}
div#upload-guide-notice {
margin-bottom: 2em;
}
ul#links {
margin-bottom: 1em;
}
div#related-posts-by-source, div#iqdb-similar {
display: inline-block;
}
@@ -38,10 +26,4 @@ div#c-uploads {
margin-top: 1em;
}
}
div#a-index {
.info {
margin-right: 1.5em;
}
}
}

2
app/views/comments/_form.html.erb
View File

@@ -6,6 +6,6 @@
<%= f.button :submit, "Submit" %>
<%= dtext_preview_button "comment_body" %>
<% if comment.new_record? %>
<%= f.input :do_not_bump_post, label: "No bump" %>
<%= f.input :do_not_bump_post, label: "No bump", wrapper_html: { class: "inline-block" } %>
<% end %>
<% end %>

6
app/views/comments/_index_by_comment.html.erb
View File

@@ -19,12 +19,12 @@
<% dtext_data = DText.preprocess(@comments.map(&:body)) %>
<% @comments.each do |comment| %>
<%= tag.div id: "post_#{comment.post.id}", **PostPreviewComponent.new(post: comment.post).article_attrs("post space-x-4") do %>
<%= tag.div id: "post_#{comment.post.id}", **PostPreviewComponent.new(post: comment.post, classes: "post md:flex gap-4").article_attrs do %>
<% if policy(comment.post).visible? %>
<%= post_preview(comment.post, show_deleted: true) %>
<%= post_preview(comment.post, show_deleted: true, classes: "mx-auto") %>
<% end %>
<%= render_comment(comment, dtext_data: dtext_data, context: :index_by_comment, current_user: CurrentUser.user) %>
<%= render_comment(comment, dtext_data: dtext_data, classes: "flex-1", context: :index_by_comment, current_user: CurrentUser.user) %>
<% end %>
<% end %>
</div>

6
app/views/comments/_index_by_post.html.erb
View File

@@ -1,13 +1,13 @@
<%= render "posts/partials/common/inline_blacklist" %>
<div id="p-index-by-post">
<div id="p-index-by-post" class="space-y-12">
<% if @posts.blank? %>
<%= render "post_sets/blank" %>
<% end %>
<% @posts.includes(:media_asset, :uploader, :vote_by_current_user, comments: [:creator, :votes]).select(&:visible?).each do |post| %>
<%= tag.div id: "post_#{post.id}", **PostPreviewComponent.new(post: post).article_attrs("post space-x-4") do %>
<%= post_preview(post, show_deleted: true, show_votes: true) %>
<%= tag.div id: "post_#{post.id}", **PostPreviewComponent.new(post: post, classes: "post md:flex gap-4").article_attrs do %>
<%= post_preview(post, show_deleted: true, show_votes: true, classes: "flex mx-auto") %>
<div class="flex-1">
<%= render "comments/partials/index/header", post: post %>

14
app/views/comments/partials/index/_header.html.erb
View File

@@ -1,19 +1,19 @@
<div class="header">
<div class="row">
<span class="info">
<div class="mb-4">
<div class="space-x-4">
<span class="info space-x-1">
<strong>Date</strong>
<%= compact_time(post.created_at) %>
</span>
<span class="info">
<span class="info space-x-1">
<strong>Uploader</strong>
<%= link_to_user(post.uploader) %>
</span>
<span class="info">
<span class="info space-x-1">
<strong>Rating</strong>
<%= post.pretty_rating %>
<span><%= post.pretty_rating %></span>
</span>
</div>
<div class="row list-of-tags">
<div class="space-x-1">
<strong>Tags</strong>
<%= render_inline_tag_list(post) %>
</div>

2
app/views/forum_posts/index.html.erb
View File

@@ -3,9 +3,11 @@
<%= table_for @forum_posts, width: "100%" do |t| %>
<% t.column "Topic", td: {class: "forum-post-topic-title"} do |forum_post| %>
<%= delete_icon(class: "text-muted") if forum_post.topic.is_deleted? %>
<%= link_to forum_post.topic.title, forum_topic_path(forum_post.topic) %>
<% end %>
<% t.column "Excerpt", td: {class: "forum-post-excerpt"} do |forum_post| %>
<%= delete_icon(class: "text-muted") if forum_post.is_deleted? %>
<%= link_to truncate(forum_post.body, :length => 50), forum_post_path(forum_post) %>
<% end %>
<% t.column "Creator" do |forum_post| %>

12
app/views/forum_topics/_listing.html.erb
View File

@@ -21,28 +21,28 @@
<% end %>
<% if forum_topic_status(topic).present? %>
<%= link_to topic.pretty_title, forum_topic_path(topic), class: "forum-post-link" %>
<%= link_to topic.pretty_title, forum_topic_path(topic), class: "forum-post-link break-words" %>
<% else %>
<%= link_to topic.title, forum_topic_path(topic), class: "forum-post-link" %>
<%= link_to topic.title, forum_topic_path(topic), class: "forum-post-link break-words" %>
<% end %>
<% if topic.response_count > Danbooru.config.posts_per_page %>
<%= link_to "page #{topic.last_page}", forum_topic_path(topic, :page => topic.last_page), :class => "last-page" %>
<% end %>
<% end %>
<% t.column "Status", width: "1%" do |topic| %>
<% t.column "Status", width: "1%", td: { class: "whitespace-nowrap text-right" } do |topic| %>
<% status = forum_topic_status(topic) %>
<% if status.present? %>
<%= link_to status, forum_topics_path(search: { status: status }), class: "topic-status label #{status}" %>
<% end %>
<% end %>
<% t.column "Creator", width: "8%" do |topic| %>
<% t.column "Creator", width: "8%", th: { class: "desktop-only"}, td: { class: "whitespace-nowrap desktop-only" } do |topic| %>
<%= link_to_user topic.creator %>
<% end %>
<% t.column "Updated by", width: "8%" do |topic| %>
<% t.column "Updated by", width: "8%", th: { class: "desktop-only"}, td: { class: "whitespace-nowrap desktop-only" } do |topic| %>
<%= link_to_user topic.updater %>
<% end %>
<% t.column "Updated at", width: "8%" do |topic| %>
<% t.column "Updated at", width: "8%", th: { class: "desktop-only"}, td: { class: "whitespace-nowrap desktop-only" } do |topic| %>
<%= compact_time topic.updated_at %>
<% end %>
<% end %>

2
app/views/modqueue/_post.html.erb
View File

@@ -1,4 +1,4 @@
<%= tag.div id: "post-#{post.id}", **PostPreviewComponent.new(post: post).article_attrs("post mod-queue-preview column-container") do %>
<%= tag.div id: "post-#{post.id}", **PostPreviewComponent.new(post: post, classes: "post mod-queue-preview column-container").article_attrs do %>
<aside class="column column-shrink">
<%= post_preview(post, size: @preview_size, show_size: true, show_deleted: true) %>
</aside>

40
app/views/static/keyboard_shortcuts.html.erb
View File

@@ -4,10 +4,11 @@
<div id="a-keyboard-shortcuts">
<h1>Keyboard Shortcuts</h1>
<div class="column-container">
<section class="column column-shrink">
<div class="md:flex gap-4 space-y-4 md:space-y-0 fixed-width-container">
<section class="flex-auto">
<div>
<h2>Global</h2>
<ul>
<ul class="space-y-2">
<li><kbd class="key">q</kbd> Focus search box</li>
<li><kbd class="key">w</kbd> Scroll up</li>
<li><kbd class="key">s</kbd> Scroll down</li>
@@ -15,17 +16,21 @@
<li><kbd class="key">d</kbd>, <kbd class="key">⇨</kbd> Next page</li>
<li><kbd class="key">ctrl</kbd> + <kbd class="key">enter</kbd> Submit form</li>
</ul>
</div>
</section>
<section class="column column-shrink">
<section class="flex-auto space-y-8">
<div>
<h2>Posts</h2>
<ul>
<ul class="space-y-2">
<li><kbd class="key">r</kbd> Go to random post</li>
<li><kbd class="key">1</kbd>, <kbd class="key">2</kbd>, <kbd class="key">3</kbd>... Switch tag script</li>
</ul>
</div>
<div>
<h2>Post</h2>
<ul>
<ul class="space-y-2">
<li><kbd class="key">n</kbd> New note</li>
<li><kbd class="key">e</kbd> Edit tags</li>
<li><kbd class="key">shift</kbd>+<kbd class="key">e</kbd> Edit tags in dialog window</li>
@@ -37,39 +42,50 @@
<li><kbd class="key">v</kbd> Toggle between sample and original image</li>
<li><kbd class="key">z</kbd> Toggle between fit-to-window and full size</li>
</ul>
</div>
</section>
<section class="column column-shrink">
<section class="flex-auto space-y-8">
<div>
<h2>Artists</h2>
<ul>
<ul class="space-y-2">
<li><kbd class="key">e</kbd> Edit artist</li>
<li><kbd class="key">shift</kbd>+<kbd class="key">d</kbd> Delete artist</li>
</ul>
</div>
<div>
<h2>Forum</h2>
<ul>
<ul class="space-y-2">
<li><kbd class="key">e</kbd> Edit topic</li>
<li><kbd class="key">shift</kbd>+<kbd class="key">d</kbd> Delete topic</li>
<li><kbd class="key">shift</kbd>+<kbd class="key">r</kbd> Mark all as read</li>
</ul>
</div>
<div>
<h2>Pools</h2>
<ul>
<ul class="space-y-2">
<li><kbd class="key">e</kbd> Edit pool</li>
<li><kbd class="key">shift</kbd>+<kbd class="key">d</kbd> Delete pool</li>
</ul>
</div>
<div>
<h2>Wiki</h2>
<ul>
<ul class="space-y-2">
<li><kbd class="key">e</kbd> Edit wiki page</li>
<li><kbd class="key">shift</kbd>+<kbd class="key">d</kbd> Delete wiki page</li>
</ul>
</div>
<div>
<h2>Favorite Groups</h2>
<ul>
<ul class="space-y-2">
<li><kbd class="key">e</kbd> Edit favorite group</li>
<li><kbd class="key">shift</kbd>+<kbd class="key">d</kbd> Delete favorite group</li>
</ul>
</div>
</section>
</div>
</div>

4
app/views/uploads/_single_asset_upload.html.erb
View File

@@ -116,7 +116,7 @@
<strong>Commentary</strong>
<a href="#" id="toggle-artist-commentary">show »</a>
<div class="artist-commentary" style="display: none;">
<div class="artist-commentary mt-4" style="display: none;">
<%= f.input :artist_commentary_title, as: :string, label: "Original Title", input_html: { value: post&.artist_commentary&.original_title } %>
<%= f.input :artist_commentary_desc, as: :text, label: "Original Description", input_html: { value: post&.artist_commentary&.original_description } %>
</div>
@@ -126,7 +126,7 @@
<strong>Translation</strong>
<a href="#" id="toggle-commentary-translation">show »</a>
<div class="commentary-translation" style="display: none;">
<div class="commentary-translation mt-4" style="display: none;">
<%= f.input :translated_commentary_title, as: :string, label: "Translated Title", input_html: { value: post&.artist_commentary&.translated_title } %>
<%= f.input :translated_commentary_desc, as: :text, label: "Translated Description", input_html: { value: post&.artist_commentary&.translated_description } %>
</div>