highlight sticky comments

3 files changed, 20 insertions, 3 deletions

diff --git a/src/mixins/comment.pug b/src/mixins/comment.pug
index 3eca723..ffd4b5a 100644
--- a/src/mixins/comment.pug
+++ b/src/mixins/comment.pug
@@ -1,6 +1,7 @@
 include ../utils
 
 mixin infoContainer(data, next_id, prev_id)
+  - var hats = (data.is_submitter?['op']:[]).concat(data.distinguished=="moderator"?['mod']:[])
   div.comment-info-container
     p
       | #{fmtnum(data.ups)} ↑
@@ -12,7 +13,7 @@ mixin infoContainer(data, next_id, prev_id)
         a(href=`#${prev_id}` title="scroll to previous comment").nav-link prev
         |  · 
       span(class=`${data.is_submitter ? 'op' : ''}`)
-        | u/#{data.author} #{data.is_submitter ? '(op)' : ''}
+        | u/#{data.author} #{hats.length==0?'':`(${hats.join('|')})`}
       |  · 
       if data.collapsed_reason_code == "DELETED" || data.author == "[deleted]"
         a(href=`https://undelete.pullpush.io${data.permalink}`) search on undelete
@@ -22,6 +23,9 @@ mixin infoContainer(data, next_id, prev_id)
       if data.edited !== false
         | edited #{timeDifference(Date.now(), data.edited * 1000)} ago
         |  · 
+      if data.stickied
+        | stickied
+        |  · 
       a(href=`https://reddit.com${data.permalink}` title="view on reddit").nav-link open ↗
 
 -
@@ -38,7 +42,7 @@ mixin comment(com, isfirst, parent_id, next_id, prev_id)
       a(href=`/comments/${parent_id}/comment/${data.id}`)
         | #{data.count} more #{fmttxt(data.count, 'comment')}
   else
-    div(class=`comment ${isfirst ? 'first' : ''}`)
+    div(class=`comment ${isfirst ? 'first' : ''} ${data.stickied ? 'sticky' : ''}`)
       details(id=`${data.id}` open="")
         summary.expand-comments
           +infoContainer(data, next_id, prev_id)
diff --git a/src/mixins/post.pug b/src/mixins/post.pug
index 4022424..26dc976 100644
--- a/src/mixins/post.pug
+++ b/src/mixins/post.pug
@@ -4,7 +4,7 @@ mixin post(p, currentUrl)
   - var from = encodeURIComponent(currentUrl)
   - var viewQuery = query && query.view ? query.view : 'compact'
   - var sortQuery = query && query.sort ? query.sort + (query.t ? '&t=' + query.t : '') : 'hot'
-  article.post
+  article(class=`post ${p.stickied?"sticky":""}`)
     div.post-container(class=`${query.view}`)
       div.post-text(class=`${query.view}`)
         div.title-container(class=`${query.view}`)
diff --git a/src/public/styles.css b/src/public/styles.css
index edf0042..1cd5245 100644
--- a/src/public/styles.css
+++ b/src/public/styles.css
@@ -5,6 +5,7 @@
   --text-color: black;
   --text-color-muted: #999;
   --blockquote-color: green;
+  --sticky-color: lightgreen;
   --link-color: #29BC9B;
   --link-visited-color: #999;
   --accent: var(--link-color);
@@ -22,6 +23,7 @@
     --text-color: white;
     --text-color-muted: #999;
     --blockquote-color: lightgreen;
+    --sticky-color: #034611;
     --link-color: #79ffe1;
     --link-visited-color: #999;
     --accent: var(--link-color);
@@ -121,6 +123,10 @@ nav {
   align-items: stretch;
 }
 
+.post {
+  margin-bottom: 5px;
+}
+
 .post, .comments-container, .hero, .header, .footer {
   padding: 0.3rem;
   flex: 1 1 95%;
@@ -791,3 +797,10 @@ select {
   text-indent: 1px;
   text-overflow: '';
 }
+
+.sticky {
+  background-color: var(--sticky-color);
+  border-radius: 2px;
+  border: 4px solid var(--sticky-color);
+}
+