css: replace more css with tailwind-style classes.

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

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 %>

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>

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 %>

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>

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| %>

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 %>

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>

View File

@@ -4,72 +4,88 @@
<div id="a-keyboard-shortcuts">
<h1>Keyboard Shortcuts</h1>
<div class="column-container">
<section class="column column-shrink">
<h2>Global</h2>
<ul>
<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>
<li><kbd class="key">a</kbd>, <kbd class="key">⇦</kbd> Previous page</li>
<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 class="md:flex gap-4 space-y-4 md:space-y-0 fixed-width-container">
<section class="flex-auto">
<div>
<h2>Global</h2>
<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>
<li><kbd class="key">a</kbd>, <kbd class="key"></kbd> Previous page</li>
<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">
<h2>Posts</h2>
<ul>
<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>
<section class="flex-auto space-y-8">
<div>
<h2>Posts</h2>
<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>
<h2>Post</h2>
<ul>
<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>
<li><kbd class="key">shift</kbd>+<kbd class="key">o</kbd> Approve post</li>
<li><kbd class="key">f</kbd> Favorite post</li>
<li><kbd class="key">shift</kbd>+<kbd class="key">f</kbd> Unfavorite post</li>
<li><kbd class="key">g</kbd> Add post to favorite group</li>
<li><kbd class="key">1</kbd>, <kbd class="key">2</kbd>, <kbd class="key">3</kbd>... Add post to favorite group #N</li>
<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>
<h2>Post</h2>
<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>
<li><kbd class="key">shift</kbd>+<kbd class="key">o</kbd> Approve post</li>
<li><kbd class="key">f</kbd> Favorite post</li>
<li><kbd class="key">shift</kbd>+<kbd class="key">f</kbd> Unfavorite post</li>
<li><kbd class="key">g</kbd> Add post to favorite group</li>
<li><kbd class="key">1</kbd>, <kbd class="key">2</kbd>, <kbd class="key">3</kbd>... Add post to favorite group #N</li>
<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">
<h2>Artists</h2>
<ul>
<li><kbd class="key">e</kbd> Edit artist</li>
<li><kbd class="key">shift</kbd>+<kbd class="key">d</kbd> Delete artist</li>
</ul>
<section class="flex-auto space-y-8">
<div>
<h2>Artists</h2>
<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>
<h2>Forum</h2>
<ul>
<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>
<h2>Forum</h2>
<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>
<h2>Pools</h2>
<ul>
<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>
<h2>Pools</h2>
<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>
<h2>Wiki</h2>
<ul>
<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>
<h2>Wiki</h2>
<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>
<h2>Favorite Groups</h2>
<ul>
<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>
<h2>Favorite Groups</h2>
<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>

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>