selfhostable, read-only reddit client
16
fork

Configure Feed

Select the types of activity you want to include in your feed.

fixup info-styles, add collapse everywhere

Akshay 4e586aac d18f2494

+75 -53
+6 -2
readme.txt
··· 5 5 - [ ] fix gallery thumbnails 6 6 - [x] pass query params into templates, add into pagination 7 7 - [ ] subscription manager: reorder, mass add 8 - - [ ] styles for info-containers 8 + - [x] styles for info-containers 9 9 - [ ] open in reddit/reply in reddit link 10 10 - [ ] placeholder for unresolvable thumbnails 11 - - [ ] expand/collapse comments 11 + - [x] expand/collapse comments 12 + - [x] fix title rendering in views/comments.pug 13 + - [x] fix spacing between comments 14 + - [x] collapse even singular comments 15 + - [ ] highlights for op, sticky etc.
+16 -19
src/mixins/comment.pug
··· 2 2 3 3 mixin infoContainer(data) 4 4 div.comment-info-container 5 - div.info-item #{fmtnum(data.ups)} ↑ 6 - div.info-item u/#{data.author} #{data.is_submitter ? '(OP)' : ''} 5 + | #{fmtnum(data.ups)} ↑ 6 + |  ·  7 + span(class=`${data.is_submitter ? 'op' : ''}`) 8 + | u/#{data.author} #{data.is_submitter ? '(op)' : ''} 9 + |  ·  7 10 if data.collapsed_reason_code == "DELETED" 8 - div.info-item 9 - a(href=`https://undelete.pullpush.io${data.permalink}`) search on undelete 10 - div.info-item #{timeDifference(Date.now(), data.created * 1000)} 11 + a(href=`https://undelete.pullpush.io${data.permalink}`) search on undelete 12 + |  ·  13 + | #{timeDifference(Date.now(), data.created * 1000)} 11 14 12 15 - 13 16 function hasReplies(data) { ··· 20 23 - var hasReplyData = hasReplies(data) 21 24 22 25 if kind == "more" 23 - div(class=`${isfirst ? 'first' : ''}`) 24 - div.more #{data.count} more comments 26 + div(class=`more ${isfirst ? 'first' : ''}`) 27 + | #{data.count} more comments 25 28 else 26 29 div(class=`comment ${isfirst ? 'first' : ''}`) 27 - if hasReplyData 28 - details(id=`${data.id}` open="") 29 - summary.expand-comments 30 - +infoContainer(data) 31 - div.comment-body 32 - != data.body_html 33 - 30 + details(id=`${data.id}` open="") 31 + summary.expand-comments 32 + +infoContainer(data) 33 + div.comment-body 34 + != data.body_html 35 + if hasReplyData 34 36 div.replies 35 37 each reply in data.replies.data.children 36 38 +comment(reply, false) 37 - 38 - else 39 - +infoContainer(data) 40 - div.comment-body 41 - != data.body_html
+44 -24
src/public/styles.css
··· 7 7 --blockquote-color: green; 8 8 --link-color: #29BC9B; 9 9 --link-visited-color: #999; 10 + --accent: var(--link-color); 10 11 11 12 font-family: Inter, sans-serif; 12 - font-feature-settings: 'ss01' 1, 'kern' 1, 'liga' 1, 'cv05' 1, 'tnum' 1, 'dlig' 1, 'ss01' 1, 'ss07' 1, 'ss08' 1; 13 + font-feature-settings: 'ss01' 1, 'kern' 1, 'liga' 1, 'cv05' 1, 'dlig' 1, 'ss01' 1, 'ss07' 1, 'ss08' 1; 13 14 14 15 } 15 16 ··· 22 23 --blockquote-color: lightgreen; 23 24 --link-color: #79ffe1; 24 25 --link-visited-color: #999; 26 + --accent: var(--link-color); 25 27 } 26 28 } 27 29 ··· 38 40 main { 39 41 display: flex; 40 42 flex-direction: column; 41 - gap: 1rem; 42 43 align-items: center; 43 44 } 44 45 ··· 111 112 } 112 113 113 114 .post, .hero { 114 - font-size: 1rem; 115 + font-size: 0.9rem; 115 116 } 116 117 117 118 .comments-container { 118 - font-size: 1rem; 119 + font-size: 0.9rem; 119 120 } 120 121 121 122 .info-container a, 122 123 .info-container, 123 124 .comment-info-container, 124 125 .more, 125 - summary::before, 126 - hr { 126 + summary::before 127 + { 127 128 color: var(--text-color-muted) 128 129 } 129 130 ··· 163 164 height: 4rem; 164 165 } 165 166 167 + .media-preview a { 168 + font-size: 2rem; 169 + text-decoration: none; 170 + padding: 1rem; 171 + } 172 + 166 173 .post-author { 167 174 display: none 168 175 } ··· 180 187 width: 90%; 181 188 } 182 189 .post, .hero { 183 - font-size: 1.3rem; 190 + font-size: 1rem; 184 191 } 185 192 .comments-container { 186 - font-size: 1.3rem; 193 + font-size: 1rem; 187 194 } 188 195 .info-container, .comment-info-container, .more 189 196 { 190 - font-size: 1rem; 197 + font-size: 0.8rem; 191 198 } 192 199 summary::before { 193 - font-size: 0.8rem; 200 + font-size: 0.7rem; 194 201 } 195 202 .domain { 196 - font-size: 1rem; 203 + font-size: 0.8rem; 197 204 } 198 205 .media-preview img, 199 206 .media-preview video 200 207 { 201 208 width: 7rem; 202 209 height: 7rem; 210 + } 211 + .media-preview a { 212 + font-size: 2rem; 213 + padding: 2rem; 203 214 } 204 215 .post-author { 205 216 display: inline ··· 215 226 width: 60%; 216 227 } 217 228 .post, .hero { 218 - font-size: 1.3rem; 229 + font-size: 1rem; 219 230 } 220 231 .comments-container { 221 - font-size: 1.3rem; 232 + font-size: 1rem; 222 233 } 223 234 .info-container, .comment-info-container, .more { 224 - font-size: 1rem; 235 + font-size: 0.8rem; 225 236 } 226 237 summary::before { 227 - font-size: 0.8rem; 238 + font-size: 0.7rem; 228 239 } 229 240 .domain { 230 - font-size: 1rem; 241 + font-size: 0.8rem; 231 242 } 232 243 .media-preview img, 233 244 .media-preview video ··· 235 246 width: 7rem; 236 247 height: 7rem; 237 248 } 249 + .media-preview a { 250 + font-size: 2rem; 251 + padding: 2rem; 252 + } 238 253 .post-author { 239 254 display: inline 240 255 } ··· 250 265 .comment, .more { 251 266 width: 100%; 252 267 border-left: 1px dashed var(--text-color-muted); 253 - padding: 10px 0px 0px 24px; 268 + padding: 8px 0px 0px 24px; 254 269 box-sizing: border-box; 255 270 } 256 271 ··· 258 273 padding: 0px 0px 0px 24px; 259 274 } 260 275 261 - .more { 262 - margin-bottom: 0px; 263 - } 264 - 265 276 .first { 266 277 border-left: none; 267 278 padding-left: 0; 268 - margin: 0; 269 - margin-top: 40px; 279 + margin-top: 10px; 270 280 } 271 281 272 282 .post-container { ··· 321 331 } 322 332 323 333 hr { 324 - border 1px solid #000; 334 + border: none; 335 + border-top: 1px dashed var(--text-color-muted); 336 + height: 0; 325 337 } 326 338 327 339 blockquote { ··· 402 414 width: auto; 403 415 max-height: 500px; 404 416 } 417 + 418 + .post-title { 419 + margin-top: 0; 420 + } 421 + 422 + .op { 423 + color: var(--accent); 424 + }
+9 -8
src/views/comments.pug
··· 21 21 h3.sub-title 22 22 a(href=`/r/${post.subreddit}`) ← r/#{post.subreddit} 23 23 24 - h2 #{post.title} 24 + div.info-container 25 + p 26 + | #{fmtnum(post.ups)} ↑ 27 + |  ·  by u/#{post.author} 28 + |  ·  29 + | #{timeDifference(Date.now(), post.created * 1000)} 30 + 31 + h2.post-title 32 + != post.title 25 33 26 34 if post.is_gallery && post.is_gallery == true 27 35 if post.gallery_data ··· 47 55 48 56 if post.selftext_html 49 57 p.self-text !{post.selftext_html} 50 - 51 - div.info-container 52 - p 53 - | #{fmtnum(post.ups)} ↑ 54 - |  ·  by u/#{post.author} 55 - |  ·  56 - | #{timeDifference(Date.now(), post.created * 1000)} 57 58 58 59 hr 59 60