diff options
-rw-r--r-- | src/mixins/post.pug | 18 | ||||
-rw-r--r-- | src/public/styles.css | 42 | ||||
-rw-r--r-- | src/views/comments.pug | 1 | ||||
-rw-r--r-- | src/views/subs.pug | 1 |
4 files changed, 41 insertions, 21 deletions
diff --git a/src/mixins/post.pug b/src/mixins/post.pug index 6dbebec..006193f 100644 --- a/src/mixins/post.pug +++ b/src/mixins/post.pug | |||
@@ -7,13 +7,6 @@ mixin post(p) | |||
7 | a(href=`/comments/${p.id}`) | 7 | a(href=`/comments/${p.id}`) |
8 | != p.title | 8 | != p.title |
9 | span.domain (#{p.domain}) | 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 | div.media-preview | 10 | div.media-preview |
18 | if p.is_gallery && p.is_gallery == true | 11 | if p.is_gallery && p.is_gallery == true |
19 | if p.gallery_data | 12 | if p.gallery_data |
@@ -27,6 +20,17 @@ mixin post(p) | |||
27 | else if p.post_hint == "hosted:video" | 20 | else if p.post_hint == "hosted:video" |
28 | - var url = p.secure_media.reddit_video.dash_url | 21 | - var url = p.secure_media.reddit_video.dash_url |
29 | video(src=url data-dashjs-player width='100px' height='100px' onclick=`toggleDetails('${p.id}')`) | 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 | if p.is_gallery && p.is_gallery == true | 35 | if p.is_gallery && p.is_gallery == true |
32 | if p.gallery_data | 36 | if p.gallery_data |
diff --git a/src/public/styles.css b/src/public/styles.css index 9616ac8..f619dcc 100644 --- a/src/public/styles.css +++ b/src/public/styles.css | |||
@@ -33,13 +33,13 @@ nav { | |||
33 | .post, .comments-container, .hero, .header, .footer { | 33 | .post, .comments-container, .hero, .header, .footer { |
34 | padding: 0.3rem; | 34 | padding: 0.3rem; |
35 | flex: 1 1 95%; | 35 | flex: 1 1 95%; |
36 | font-size: 0.8rem; | 36 | font-size: 1rem; |
37 | width: 100%; | 37 | width: 100%; |
38 | } | 38 | } |
39 | 39 | ||
40 | .info-container, .comment-info-container { | 40 | .info-container, .comment-info-container, .more { |
41 | color: #777; | 41 | color: #777; |
42 | font-size: 0.6rem; | 42 | font-size: 0.8rem; |
43 | display: flex; | 43 | display: flex; |
44 | } | 44 | } |
45 | 45 | ||
@@ -68,8 +68,16 @@ nav { | |||
68 | 68 | ||
69 | .media-preview img { | 69 | .media-preview img { |
70 | object-fit: cover; | 70 | object-fit: cover; |
71 | width: 3rem; | 71 | } |
72 | height: 3rem; | 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 | @media (min-width: 768px) { | 83 | @media (min-width: 768px) { |
@@ -78,17 +86,21 @@ nav { | |||
78 | width: 90%; | 86 | width: 90%; |
79 | font-size: 1rem; | 87 | font-size: 1rem; |
80 | } | 88 | } |
81 | .info-container, .comment-info-container { | 89 | .info-container, .comment-info-container, .more { |
82 | font-size: 0.9rem; | 90 | font-size: 0.9rem; |
83 | } | 91 | } |
84 | .domain { | 92 | .domain { |
85 | font-size: 0.9rem; | 93 | font-size: 0.9rem; |
86 | } | 94 | } |
87 | .media-preview img { | 95 | .media-preview img, |
88 | object-fit: cover; | 96 | .media-preview video |
97 | { | ||
89 | width: 7rem; | 98 | width: 7rem; |
90 | height: 7rem; | 99 | height: 7rem; |
91 | } | 100 | } |
101 | .post-author { | ||
102 | display: inline | ||
103 | } | ||
92 | } | 104 | } |
93 | 105 | ||
94 | @media (min-width: 1080px) { | 106 | @media (min-width: 1080px) { |
@@ -97,17 +109,21 @@ nav { | |||
97 | width: 50%; | 109 | width: 50%; |
98 | font-size: 1rem; | 110 | font-size: 1rem; |
99 | } | 111 | } |
100 | .info-container, .comment-info-container { | 112 | .info-container, .comment-info-container, .more { |
101 | font-size: 0.9rem; | 113 | font-size: 0.9rem; |
102 | } | 114 | } |
103 | .domain { | 115 | .domain { |
104 | font-size: 0.9rem; | 116 | font-size: 0.9rem; |
105 | } | 117 | } |
106 | .media-preview img { | 118 | .media-preview img, |
107 | object-fit: cover; | 119 | .media-preview video |
120 | { | ||
108 | width: 7rem; | 121 | width: 7rem; |
109 | height: 7rem; | 122 | height: 7rem; |
110 | } | 123 | } |
124 | .post-author { | ||
125 | display: inline | ||
126 | } | ||
111 | } | 127 | } |
112 | 128 | ||
113 | .comments-container, .self-text { | 129 | .comments-container, .self-text { |
@@ -127,7 +143,6 @@ nav { | |||
127 | 143 | ||
128 | .more { | 144 | .more { |
129 | margin-bottom: 0px; | 145 | margin-bottom: 0px; |
130 | font-size: 0.7rem; | ||
131 | color: #777; | 146 | color: #777; |
132 | } | 147 | } |
133 | 148 | ||
@@ -162,8 +177,7 @@ nav { | |||
162 | .post-media { | 177 | .post-media { |
163 | display: block; | 178 | display: block; |
164 | margin: 0 auto; | 179 | margin: 0 auto; |
165 | max-width: 100%; | 180 | max-width: 85%; |
166 | max-height: 400px; | ||
167 | } | 181 | } |
168 | 182 | ||
169 | .title-container,.info-container, .comment-info-container { | 183 | .title-container,.info-container, .comment-info-container { |
diff --git a/src/views/comments.pug b/src/views/comments.pug index 7bd1f9e..0898a9c 100644 --- a/src/views/comments.pug +++ b/src/views/comments.pug | |||
@@ -4,6 +4,7 @@ doctype html | |||
4 | html | 4 | html |
5 | head | 5 | head |
6 | meta(charset='UTF-8') | 6 | meta(charset='UTF-8') |
7 | meta(name="viewport" content="width=device-width, initial-scale=1.0") | ||
7 | title reddit | 8 | title reddit |
8 | link(rel='stylesheet', href='/styles.css') | 9 | link(rel='stylesheet', href='/styles.css') |
9 | script(src="https://cdn.dashjs.org/latest/dash.all.min.js") | 10 | script(src="https://cdn.dashjs.org/latest/dash.all.min.js") |
diff --git a/src/views/subs.pug b/src/views/subs.pug index 038cd15..a6bbb7b 100644 --- a/src/views/subs.pug +++ b/src/views/subs.pug | |||
@@ -4,6 +4,7 @@ doctype html | |||
4 | html | 4 | html |
5 | head | 5 | head |
6 | meta(charset='UTF-8') | 6 | meta(charset='UTF-8') |
7 | meta(name="viewport" content="width=device-width, initial-scale=1.0") | ||
7 | title reddit | 8 | title reddit |
8 | link(rel='stylesheet', href='/styles.css') | 9 | link(rel='stylesheet', href='/styles.css') |
9 | 10 | ||