selfhostable, read-only reddit client
improve styles
+41
-21
+11
-7
src/mixins/post.pug
+11
-7
src/mixins/post.pug
···
7
7
a(href=`/comments/${p.id}`)
8
8
!= p.title
9
9
span.domain (#{p.domain})
10
-
div.info-container
11
-
div.info-item ↑ #{fmtnum(p.ups)}
12
-
div.info-item by u/#{p.author}
13
-
div.info-item
14
-
a(href=`/r/${p.subreddit}`) r/#{p.subreddit}
15
-
div.info-item
16
-
a(href=`/comments/${p.id}`) #{fmtnum (p.num_comments)} #{fmttxt(p.num_comments, 'comment')}
17
10
div.media-preview
18
11
if p.is_gallery && p.is_gallery == true
19
12
if p.gallery_data
···
27
20
else if p.post_hint == "hosted:video"
28
21
- var url = p.secure_media.reddit_video.dash_url
29
22
video(src=url data-dashjs-player width='100px' height='100px' onclick=`toggleDetails('${p.id}')`)
23
+
div.info-container
24
+
p
25
+
| ↑ #{fmtnum(p.ups)}
26
+
| ·
27
+
| 💬
28
+
a(href=`/comments/${p.id}`) #{fmtnum (p.num_comments)}
29
+
| ·
30
+
a(href=`/r/${p.subreddit}`) r/#{p.subreddit}
31
+
span.post-author
32
+
| ·
33
+
by u/#{p.author}
30
34
31
35
if p.is_gallery && p.is_gallery == true
32
36
if p.gallery_data
+28
-14
src/public/styles.css
+28
-14
src/public/styles.css
···
33
33
.post, .comments-container, .hero, .header, .footer {
34
34
padding: 0.3rem;
35
35
flex: 1 1 95%;
36
-
font-size: 0.8rem;
36
+
font-size: 1rem;
37
37
width: 100%;
38
38
}
39
39
40
-
.info-container, .comment-info-container {
40
+
.info-container, .comment-info-container, .more {
41
41
color: #777;
42
-
font-size: 0.6rem;
42
+
font-size: 0.8rem;
43
43
display: flex;
44
44
}
45
45
···
68
68
69
69
.media-preview img {
70
70
object-fit: cover;
71
-
width: 3rem;
72
-
height: 3rem;
71
+
}
72
+
73
+
.media-preview img,
74
+
.media-preview video {
75
+
width: 4rem;
76
+
height: 4rem;
77
+
}
78
+
79
+
.post-author {
80
+
display: none
73
81
}
74
82
75
83
@media (min-width: 768px) {
···
78
86
width: 90%;
79
87
font-size: 1rem;
80
88
}
81
-
.info-container, .comment-info-container {
89
+
.info-container, .comment-info-container, .more {
82
90
font-size: 0.9rem;
83
91
}
84
92
.domain {
85
93
font-size: 0.9rem;
86
94
}
87
-
.media-preview img {
88
-
object-fit: cover;
95
+
.media-preview img,
96
+
.media-preview video
97
+
{
89
98
width: 7rem;
90
99
height: 7rem;
91
100
}
101
+
.post-author {
102
+
display: inline
103
+
}
92
104
}
93
105
94
106
@media (min-width: 1080px) {
···
97
109
width: 50%;
98
110
font-size: 1rem;
99
111
}
100
-
.info-container, .comment-info-container {
112
+
.info-container, .comment-info-container, .more {
101
113
font-size: 0.9rem;
102
114
}
103
115
.domain {
104
116
font-size: 0.9rem;
105
117
}
106
-
.media-preview img {
107
-
object-fit: cover;
118
+
.media-preview img,
119
+
.media-preview video
120
+
{
108
121
width: 7rem;
109
122
height: 7rem;
123
+
}
124
+
.post-author {
125
+
display: inline
110
126
}
111
127
}
112
128
···
127
143
128
144
.more {
129
145
margin-bottom: 0px;
130
-
font-size: 0.7rem;
131
146
color: #777;
132
147
}
133
148
···
162
177
.post-media {
163
178
display: block;
164
179
margin: 0 auto;
165
-
max-width: 100%;
166
-
max-height: 400px;
180
+
max-width: 85%;
167
181
}
168
182
169
183
.title-container,.info-container, .comment-info-container {
+1
src/views/comments.pug
+1
src/views/comments.pug