From 12fba690f13ad288dfd86070e31b97f7e69a2070 Mon Sep 17 00:00:00 2001 From: Akshay Date: Sun, 29 Dec 2024 10:49:18 +0000 Subject: highlight sticky comments --- src/mixins/comment.pug | 8 ++++++-- src/mixins/post.pug | 2 +- src/public/styles.css | 13 +++++++++++++ 3 files changed, 20 insertions(+), 3 deletions(-) (limited to 'src') 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); +} + -- cgit v1.2.3