diff --git a/app/javascript/src/styles/base/040_colors.css b/app/javascript/src/styles/base/040_colors.css index 128496624..9252aee71 100644 --- a/app/javascript/src/styles/base/040_colors.css +++ b/app/javascript/src/styles/base/040_colors.css @@ -61,6 +61,7 @@ --forum-vote-up-color: green; --forum-vote-meh-color: goldenrod; --forum-vote-down-color: red; + --forum-topic-status-new-color: hsla(0, 50%, 55%, 1); --forum-topic-status-pending-color: hsla(210, 25%, 55%, 1); --forum-topic-status-approved-color: hsla(120, 25%, 55%, 1); --forum-topic-status-rejected-color: hsla(0, 25%, 55%, 1); @@ -327,6 +328,7 @@ body[data-current-user-theme="dark"] { --forum-vote-up-color: var(--green-1); --forum-vote-meh-color: var(--yellow-1); --forum-vote-down-color: var(--red-1); + --forum-topic-status-new-color: var(--red-3); --forum-topic-status-pending-color: var(--blue-3); --forum-topic-status-approved-color: var(--green-3); --forum-topic-status-rejected-color: var(--red-3); diff --git a/app/javascript/src/styles/specific/forum.scss b/app/javascript/src/styles/specific/forum.scss index 7aa2fe872..69d1a8cad 100644 --- a/app/javascript/src/styles/specific/forum.scss +++ b/app/javascript/src/styles/specific/forum.scss @@ -40,6 +40,15 @@ div.list-of-forum-posts { } div#c-forum-topics { + td.status-column { + white-space: nowrap; + text-align: right; + } + + td.creator-column, td.updated-by-column { + white-space: nowrap; + } + span.topic-status { margin-right: 0.25em; vertical-align: bottom; @@ -48,7 +57,7 @@ div#c-forum-topics { font-size: 0.7em; text-transform: uppercase; border-radius: 3px; - padding: 3px; + padding: 4px; color: white; } @@ -57,6 +66,10 @@ div#c-forum-topics { font-size: 1em; } + &.new { + background-color: var(--forum-topic-status-new-color); + } + &.pending { background-color: var(--forum-topic-status-pending-color); } @@ -71,15 +84,11 @@ div#c-forum-topics { } #a-index { - tr[data-is-read="false"] .forum-post-link { - font-weight: bold; - } - .updated-at-column { white-space: nowrap; } - .updated-by-column, .updated-at-column { + .creator-column, .updated-by-column, .updated-at-column { @media screen and (max-width: 660px) { display: none; } diff --git a/app/views/forum_topics/_listing.html.erb b/app/views/forum_topics/_listing.html.erb index 089bd52ff..7296d3af5 100644 --- a/app/views/forum_topics/_listing.html.erb +++ b/app/views/forum_topics/_listing.html.erb @@ -1,5 +1,9 @@ <%= table_for forum_topics, width: "100%" do |t| %> <% t.column "Title" do |topic| %> + <% if !topic.is_read? %> + New + <% end %> + <% if topic.is_sticky? %> @@ -24,9 +28,7 @@ <% end %> - <% status = forum_topic_status(topic) %> - <% if status.present? %> - <%= status %> + <% if forum_topic_status(topic).present? %> <%= link_to topic.pretty_title, forum_topic_path(topic), class: "forum-post-link" %> <% else %> <%= link_to topic.title, forum_topic_path(topic), class: "forum-post-link" %> @@ -36,6 +38,10 @@ <%= 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| %> + <% status = forum_topic_status(topic) %> + <%= status %> + <% end %> <% t.column "Creator", width: "8%" do |topic| %> <%= link_to_user topic.creator %> <% end %>