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