selfhostable, read-only reddit client

highlight sticky comments

authored by oppi.li and committed by PortableProgrammer 12fba690 eae5094e

Changed files
+20 -3
src
+6 -2
src/mixins/comment.pug
··· 1 1 include ../utils 2 2 3 3 mixin infoContainer(data, next_id, prev_id) 4 + - var hats = (data.is_submitter?['op']:[]).concat(data.distinguished=="moderator"?['mod']:[]) 4 5 div.comment-info-container 5 6 p 6 7 | #{fmtnum(data.ups)} ↑ ··· 12 13 a(href=`#${prev_id}` title="scroll to previous comment").nav-link prev 13 14 |  ·  14 15 span(class=`${data.is_submitter ? 'op' : ''}`) 15 - | u/#{data.author} #{data.is_submitter ? '(op)' : ''} 16 + | u/#{data.author} #{hats.length==0?'':`(${hats.join('|')})`} 16 17 |  ·  17 18 if data.collapsed_reason_code == "DELETED" || data.author == "[deleted]" 18 19 a(href=`https://undelete.pullpush.io${data.permalink}`) search on undelete ··· 22 23 if data.edited !== false 23 24 | edited #{timeDifference(Date.now(), data.edited * 1000)} ago 24 25 |  ·  26 + if data.stickied 27 + | stickied 28 + |  ·  25 29 a(href=`https://reddit.com${data.permalink}` title="view on reddit").nav-link open ↗ 26 30 27 31 - ··· 38 42 a(href=`/comments/${parent_id}/comment/${data.id}`) 39 43 | #{data.count} more #{fmttxt(data.count, 'comment')} 40 44 else 41 - div(class=`comment ${isfirst ? 'first' : ''}`) 45 + div(class=`comment ${isfirst ? 'first' : ''} ${data.stickied ? 'sticky' : ''}`) 42 46 details(id=`${data.id}` open="") 43 47 summary.expand-comments 44 48 +infoContainer(data, next_id, prev_id)
+1 -1
src/mixins/post.pug
··· 4 4 - var from = encodeURIComponent(currentUrl) 5 5 - var viewQuery = query && query.view ? query.view : 'compact' 6 6 - var sortQuery = query && query.sort ? query.sort + (query.t ? '&t=' + query.t : '') : 'hot' 7 - article.post 7 + article(class=`post ${p.stickied?"sticky":""}`) 8 8 div.post-container(class=`${query.view}`) 9 9 div.post-text(class=`${query.view}`) 10 10 div.title-container(class=`${query.view}`)
+13
src/public/styles.css
··· 5 5 --text-color: black; 6 6 --text-color-muted: #999; 7 7 --blockquote-color: green; 8 + --sticky-color: lightgreen; 8 9 --link-color: #29BC9B; 9 10 --link-visited-color: #999; 10 11 --accent: var(--link-color); ··· 22 23 --text-color: white; 23 24 --text-color-muted: #999; 24 25 --blockquote-color: lightgreen; 26 + --sticky-color: #034611; 25 27 --link-color: #79ffe1; 26 28 --link-visited-color: #999; 27 29 --accent: var(--link-color); ··· 119 121 nav { 120 122 display: flex; 121 123 align-items: stretch; 124 + } 125 + 126 + .post { 127 + margin-bottom: 5px; 122 128 } 123 129 124 130 .post, .comments-container, .hero, .header, .footer { ··· 791 797 text-indent: 1px; 792 798 text-overflow: ''; 793 799 } 800 + 801 + .sticky { 802 + background-color: var(--sticky-color); 803 + border-radius: 2px; 804 + border: 4px solid var(--sticky-color); 805 + } 806 +