selfhostable, read-only reddit client
improve mobile ui, add pagination
+61
-22
-2
src/geddit.js
-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
+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
+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
+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
-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