css: factor out shared forum post / comment css.
This commit is contained in:
53
app/javascript/src/styles/common/messages.scss
Normal file
53
app/javascript/src/styles/common/messages.scss
Normal file
@@ -0,0 +1,53 @@
|
||||
div.list-of-messages {
|
||||
margin: 1em 0;
|
||||
|
||||
article.message {
|
||||
display: flex;
|
||||
margin-top: 2em;
|
||||
word-wrap: break-word;
|
||||
padding: 5px;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
div.author {
|
||||
flex-basis: 12em;
|
||||
margin-right: 1em;
|
||||
|
||||
time {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
div.content {
|
||||
flex: 1;
|
||||
|
||||
menu {
|
||||
li {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 660px) {
|
||||
display: block;
|
||||
margin-top: 3em;
|
||||
|
||||
div.author {
|
||||
margin: 0 0 1em;
|
||||
|
||||
h4 {
|
||||
display: inline;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
time {
|
||||
display: inline;
|
||||
color: var(--muted-text-color);
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -7,16 +7,8 @@ div.comments-for-post {
|
||||
|
||||
div.list-of-comments {
|
||||
article.comment {
|
||||
display: flex;
|
||||
margin-top: 2em;
|
||||
word-wrap: break-word;
|
||||
padding: 5px;
|
||||
flex: 1;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
&[data-is-sticky="true"] {
|
||||
background: var(--comment-sticky-background-color);
|
||||
}
|
||||
@@ -40,25 +32,6 @@ div.comments-for-post {
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
|
||||
div.author {
|
||||
flex-basis: 12em;
|
||||
margin-right: 1em;
|
||||
|
||||
time {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
div.content {
|
||||
flex: 1;
|
||||
|
||||
menu {
|
||||
li {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -126,27 +99,6 @@ form.edit_comment div.input.boolean {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 660px) {
|
||||
div.comments-for-post div.list-of-comments article.comment {
|
||||
display: block;
|
||||
margin-top: 3em;
|
||||
padding: 5px;
|
||||
|
||||
div.author {
|
||||
margin: 0 0 1em;
|
||||
|
||||
h4 {
|
||||
display: inline;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
time {
|
||||
display: inline;
|
||||
color: var(--muted-text-color);
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div#c-comments div#a-index, div#c-comments div#a-show {
|
||||
margin: 0 0.5em;
|
||||
|
||||
@@ -171,8 +123,4 @@ form.edit_comment div.input.boolean {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.new-comment {
|
||||
margin: 1em 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,13 +1,5 @@
|
||||
div.list-of-forum-posts {
|
||||
article.forum-post {
|
||||
display: flex;
|
||||
margin-top: 2em;
|
||||
word-wrap: break-word;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
a.voted {
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -24,18 +16,7 @@ div.list-of-forum-posts {
|
||||
color: var(--forum-vote-down-color);
|
||||
}
|
||||
|
||||
div.author {
|
||||
flex-basis: 12em;
|
||||
margin-right: 1em;
|
||||
|
||||
time {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
div.content {
|
||||
flex: 1;
|
||||
|
||||
.edit_forum_post, .edit_forum_topic {
|
||||
display: none;
|
||||
}
|
||||
@@ -44,10 +25,6 @@ div.list-of-forum-posts {
|
||||
ul.votes {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -86,24 +63,4 @@ div#c-forum-topics {
|
||||
#c-forum-topics #a-show {
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
div.list-of-forum-posts article.forum-post {
|
||||
display: block;
|
||||
margin-top: 3em;
|
||||
|
||||
div.author {
|
||||
margin: 0 0 1em;
|
||||
|
||||
h4 {
|
||||
display: inline;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
time {
|
||||
display: inline;
|
||||
color: var(--muted-text-color);
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<div id="p-index-by-comment" class="comments-for-post">
|
||||
<div class="list-of-comments">
|
||||
<div class="list-of-comments list-of-messages">
|
||||
<% @comments.each do |comment| %>
|
||||
<% if CurrentUser.is_moderator? || (params[:search] && params[:search][:is_deleted] =~ /t/) || !comment.is_deleted? %>
|
||||
<%= content_tag(:div, { id: "post_#{comment.post.id}", class: ["post", *PostPresenter.preview_class(comment.post)].join(" ") }.merge(PostPresenter.data_attributes(comment.post))) do %>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="list-of-comments">
|
||||
<div class="list-of-comments list-of-messages">
|
||||
<% if comments.present? %>
|
||||
<%= render partial: "comments/partials/show/comment", collection: comments %>
|
||||
<% elsif post.last_commented_at.present? %>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<% if CurrentUser.is_moderator? || (params[:search] && params[:search][:is_deleted] =~ /t/) || !comment.is_deleted? %>
|
||||
<a name="comment-<%= comment.id %>"></a>
|
||||
<article class="comment"
|
||||
<article class="comment message"
|
||||
data-id="<%= comment.id %>"
|
||||
data-post-id="<%= comment.post_id %>"
|
||||
data-creator-id="<%= comment.creator_id %>"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<div id="c-comments">
|
||||
<div id="a-show">
|
||||
<div class="comments-for-post">
|
||||
<div class="list-of-comments">
|
||||
<div class="list-of-comments list-of-messages">
|
||||
<%= content_tag(:div, { id: "post_#{@comment.post_id}", class: ["post", *PostPresenter.preview_class(@comment.post)].join(" ") }.merge(PostPresenter.data_attributes(@comment.post))) do %>
|
||||
<div class="preview">
|
||||
<% if @comment.post.visible? %>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<% if forum_post.visible?(CurrentUser.user, ActiveModel::Type::Boolean.new.cast(params.dig(:search, :is_deleted))) %>
|
||||
<article class="forum-post" id="forum_post_<%= forum_post.id %>" data-forum-post-id="<%= forum_post.id %>" data-creator="<%= forum_post.creator.name %>">
|
||||
<article class="forum-post message" id="forum_post_<%= forum_post.id %>" data-forum-post-id="<%= forum_post.id %>" data-creator="<%= forum_post.creator.name %>">
|
||||
<div class="author">
|
||||
<h4>
|
||||
<%= link_to_user forum_post.creator %>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<%- # forum_post %>
|
||||
<%- # original_forum_post_id %>
|
||||
|
||||
<div class="list-of-forum-posts">
|
||||
<div class="list-of-forum-posts list-of-messages">
|
||||
<% forum_posts.each do |forum_post| %>
|
||||
<%= render "forum_posts/forum_post", :forum_post => forum_post, :original_forum_post_id => original_forum_post_id %>
|
||||
<% end %>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<div id="c-forum-posts">
|
||||
<div id="a-show" class="single-forum-post list-of-forum-posts">
|
||||
<div id="a-show" class="single-forum-post list-of-forum-posts list-of-messages">
|
||||
<h1>Topic: <%= @forum_post.topic.title %></h1>
|
||||
<%= render "forum_post", :forum_post => @forum_post, :original_forum_post_id => @forum_post.topic.original_post.id %>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user