selfhostable, read-only reddit client
16
fork

Configure Feed

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

improve mobile ui, add pagination

Akshay 5de14f99 9914e4bf

+61 -22
-2
src/geddit.js
··· 218 218 include_over_18: true 219 219 } 220 220 221 - console.log(this.host + "/search.json?" + new URLSearchParams(Object.assign(params, options))); 222 - 223 221 return await fetch(this.host + "/search.json?" + new URLSearchParams(Object.assign(params, options))) 224 222 .then(res => res.json()) 225 223 .then(json => json.data)
+2 -2
src/mixins/post.pug
··· 20 20 if p.gallery_data.items 21 21 - var item = p.gallery_data.items[0] 22 22 - var url = `https://i.redd.it/${item.media_id}.jpg` 23 - img(src=url width='100px' height='100px' onclick=`toggleDetails('${p.id}')`) 23 + img(src=url onclick=`toggleDetails('${p.id}')`) 24 24 else if p.post_hint == "image" || p.post_hint == "link" 25 25 if p.thumbnail && p.thumbnail != "self" || p.thumbnail != "default" 26 - img(src=p.thumbnail width='100px' height='100px' onclick=`toggleDetails('${p.id}')`) 26 + img(src=p.thumbnail onclick=`toggleDetails('${p.id}')`) 27 27 else if p.post_hint == "hosted:video" 28 28 - var url = p.secure_media.reddit_video.dash_url 29 29 video(src=url data-dashjs-player width='100px' height='100px' onclick=`toggleDetails('${p.id}')`)
+53 -15
src/public/styles.css
··· 16 16 flex-direction: row; 17 17 } 18 18 19 + .footer { 20 + display: flex; 21 + flex-direction: row; 22 + } 23 + 24 + .footer-item { 25 + margin-left: auto; 26 + } 27 + 19 28 nav { 20 29 display: flex; 21 30 align-items: stretch; 22 31 } 23 32 24 - .post, .comments-container, .hero, .header { 33 + .post, .comments-container, .hero, .header, .footer { 25 34 padding: 0.3rem; 26 - flex: 1 1 100%; 27 - font-size: 1rem; 35 + flex: 1 1 95%; 36 + font-size: 0.8rem; 28 37 width: 100%; 29 38 } 30 39 31 40 .info-container, .comment-info-container { 32 41 color: #777; 33 - font-size: 0.7rem; 42 + font-size: 0.6rem; 34 43 display: flex; 35 44 } 36 45 37 46 .domain { 38 47 color: #777; 39 - font-size: 0.7rem; 48 + font-size: 0.6rem; 40 49 } 41 50 42 - .info-item, .header-item { 51 + .info-item, .header-item, .footer-item { 43 52 margin-right: 14px; 44 53 } 45 54 46 - .header-item { 55 + .header-item, .footer-item { 47 56 position: relative; /* Needed for positioning the pseudo-element */ 48 57 } 49 58 ··· 57 66 font-size: 20px; /* Adjust size of the separator */ 58 67 } 59 68 69 + .media-preview img { 70 + object-fit: cover; 71 + width: 3rem; 72 + height: 3rem; 73 + } 74 + 60 75 @media (min-width: 768px) { 61 - .post, .comments-container, .hero, .header { 62 - flex: 1 1 65%; 63 - width: 75%; 76 + .post, .comments-container, .hero, .header, .footer { 77 + flex: 1 1 90%; 78 + width: 90%; 79 + font-size: 1rem; 64 80 } 65 81 .info-container, .comment-info-container { 66 - font-size: 0.8rem; 82 + font-size: 0.9rem; 83 + } 84 + .domain { 85 + font-size: 0.9rem; 86 + } 87 + .media-preview img { 88 + object-fit: cover; 89 + width: 7rem; 90 + height: 7rem; 67 91 } 68 92 } 69 93 70 94 @media (min-width: 1080px) { 71 - .post, .comments-container, .hero, .header { 95 + .post, .comments-container, .hero, .header, .footer { 72 96 flex: 1 1 50%; 73 97 width: 50%; 98 + font-size: 1rem; 74 99 } 75 100 .info-container, .comment-info-container { 76 - font-size: 0.8rem; 101 + font-size: 0.9rem; 102 + } 103 + .domain { 104 + font-size: 0.9rem; 105 + } 106 + .media-preview img { 107 + object-fit: cover; 108 + width: 7rem; 109 + height: 7rem; 77 110 } 78 111 } 79 112 ··· 121 154 margin-left: auto; 122 155 } 123 156 124 - .media-preview img { 125 - object-fit: cover; 157 + .bottom-links-container { 158 + display: flex; 159 + flex-direction: row; 126 160 } 127 161 128 162 .post-media { ··· 183 217 summary { 184 218 display: none; 185 219 } 220 + 221 + .footer { 222 + padding-bottom: 40px; 223 + }
+2 -1
src/routes/index.js
··· 17 17 var sort = req.params.sort ? req.params.sort : 'hot'; 18 18 var options = req.query; 19 19 20 - // var postsReq = G.getSubmissions(sort, `r/${subreddit}`, options); 21 20 var postsReq = G.getSubmissions(sort, `${subreddit}`, options); 22 21 var aboutReq = G.getSubreddit(`${subreddit}`); 23 22 24 23 var [posts, about] = await Promise.all([postsReq, aboutReq]); 24 + console.log(`posts for ${subreddit}`); 25 + console.log(posts.posts.length); 25 26 26 27 res.render('index', { subreddit, posts, about }); 27 28 });
+4 -2
src/views/index.pug
··· 4 4 doctype html 5 5 html 6 6 head 7 + meta(name="viewport" content="width=device-width, initial-scale=1.0") 7 8 meta(charset='UTF-8') 8 9 title reddit 9 10 link(rel='stylesheet', href='/styles.css') ··· 56 57 if posts 57 58 each child in posts.posts 58 59 +post(child.data) 59 - 60 - script(src='https://unpkg.com/htmx.org@1.9.10') 60 + div.footer 61 + div.footer-item 62 + a(href=`/r/${subreddit}?after=${posts.after}`) next