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

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

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;
}
}
}