8ef05ec69b
Fix it so that upvoting or downvoting a revealed thresholded comment doesn't hide it again. The fix is to explicitly store a `data-show-thresholded` flag on the comment, instead of manually hiding elements with jQuery, and to morph the comment HTML instead of replacing it so that the state isn't lost after voting. Alpine.js is used for this, which isn't strictly necessary, but is useful to test the library before adopting it on a wider scale. https://alpinejs.dev/start-here
55 lines
1.1 KiB
SCSS
55 lines
1.1 KiB
SCSS
article.comment {
|
|
flex: 1;
|
|
|
|
&[data-is-sticky="true"] {
|
|
background: var(--comment-sticky-background-color);
|
|
}
|
|
|
|
&[data-is-reported="true"] {
|
|
background-color: var(--moderation-report-background-color);
|
|
}
|
|
|
|
&[data-is-dimmed="true"] {
|
|
opacity: 0.3;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&[data-is-thresholded="true"][data-show-thresholded="false"] {
|
|
.body { display: none; }
|
|
}
|
|
|
|
&[data-is-thresholded="false"], &[data-is-thresholded="true"][data-show-thresholded="true"] {
|
|
.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;
|
|
}
|
|
}
|
|
}
|