Highlight special topic tags (nsfw, spoiler)

tildes/scss/_themes.scss

@@ -3,14 +3,22 @@
 // Note that all rules inside the mixin will be included in the compiled CSS
 // once for each theme, so they should be kept as minimal as possible.
 
-@mixin commenttag($color, $is-light) {
+@mixin specialtag($color, $is-light) {
   @if $is-light {
     background-color: $color;
+
+    a {
+      color: white;
+    }
   }
   @else {
     background-color: transparent;
     color: $color;
     border: 1px solid $color;
+
+    a {
+      color: $color;
+    }
   }
 }
 
@@ -101,11 +109,11 @@
   }
 
   .comment-tags {
-    .label-comment-tag-joke { @include commenttag($comment-tag-joke-color, $is-light); }
-    .label-comment-tag-noise { @include commenttag($comment-tag-noise-color, $is-light); }
-    .label-comment-tag-offtopic { @include commenttag($comment-tag-offtopic-color, $is-light); }
-    .label-comment-tag-troll { @include commenttag($comment-tag-troll-color, $is-light); }
-    .label-comment-tag-flame { @include commenttag($comment-tag-flame-color, $is-light); }
+    .label-comment-tag-joke { @include specialtag($comment-tag-joke-color, $is-light); }
+    .label-comment-tag-noise { @include specialtag($comment-tag-noise-color, $is-light); }
+    .label-comment-tag-offtopic { @include specialtag($comment-tag-offtopic-color, $is-light); }
+    .label-comment-tag-troll { @include specialtag($comment-tag-troll-color, $is-light); }
+    .label-comment-tag-flame { @include specialtag($comment-tag-flame-color, $is-light); }
   }
 
   .is-comment-collapsed {
@@ -176,6 +184,14 @@
     }
   }
 
+  .label-topic-tag-nsfw {
+    @include specialtag($topic-tag-nsfw-color, $is-light);
+  }
+
+  .label-topic-tag-spoiler {
+    @include specialtag($topic-tag-spoiler-color, $is-light);
+  }
+
   .post-button {
     color: $text-secondary-color;
 

tildes/scss/_variables.scss

@@ -31,6 +31,10 @@ $fg-dark: $base00;
 $fg-light: $base0;
 $fg-lightest: $base1;
 
+// Colors for special topic tags
+$topic-tag-nsfw-color: $red;
+$topic-tag-spoiler-color: $yellow;
+
 // Colors for comment tags
 $comment-tag-joke-color: $cyan;
 $comment-tag-noise-color: $yellow;

tildes/scss/modules/_label.scss

@@ -14,3 +14,8 @@
   margin: 0 0.4rem 0 0;
   white-space: nowrap;
 }
+
+.label-topic-tag-nsfw,
+.label-topic-tag-spoiler {
+  font-weight: bold;
+}

tildes/tildes/models/topic/topic.py

@@ -40,6 +40,9 @@ from tildes.schemas.topic import (
 # edits inside this period after creation will not mark the topic as edited
 EDIT_GRACE_PERIOD = timedelta(minutes=5)
 
+# special tags to put at the front of the tag list
+SPECIAL_TAGS = ['nsfw', 'spoiler']
+
 
 class Topic(DatabaseModel):
     """Model for a topic on the site.
@@ -153,7 +156,16 @@ class Topic(DatabaseModel):
     @hybrid_property
     def tags(self) -> List[str]:
         """Return the topic's tags."""
-        return [str(tag).replace('_', ' ') for tag in self._tags]
+        sorted_tags = [str(tag).replace('_', ' ') for tag in self._tags]
+
+        # move special tags in front
+        # reverse so that tags at the start of the list appear first
+        for tag in reversed(SPECIAL_TAGS):
+            if tag in sorted_tags:
+                sorted_tags.insert(
+                    0, sorted_tags.pop(sorted_tags.index(tag)))
+
+        return sorted_tags
 
     @tags.setter  # type: ignore
     def tags(self, new_tags: List[str]) -> None:

tildes/tildes/templates/includes/topic_tags.jinja2

@@ -1,6 +1,6 @@
 <ul class="topic-tags">
   {% for tag in topic.tags %}
-    <li class="label label-topic-tag">
+    <li class="label label-topic-tag label-topic-tag-{{ tag }}">
       <a href="/~{{ topic.group.path }}?tag={{ tag.replace(' ', '_') }}">{{ tag }}</a>
     </li>
   {% else %}

tildes/tildes/templates/macros/topics.jinja2

@@ -34,7 +34,7 @@
       {% if topic.tags %}
         <ul class="topic-tags">
           {% for tag in topic.tags %}
-            <li class="label label-topic-tag">
+            <li class="label label-topic-tag label-topic-tag-{{ tag }}">
               {% if request.matched_route.name in ('home', 'group') %}
                 <a href="{{ request.current_listing_normal_url({'tag': tag.replace(' ', '_')}) }}">{{ tag }}</a>
               {% else %}