From 46608309c21aa9fda90fcc6ceadfbbdce2faab5f Mon Sep 17 00:00:00 2001 From: Akshay Date: Fri, 1 Nov 2024 11:28:28 +0000 Subject: even better galleries, fix font sizes everywhere --- src/geddit.js | 2 +- src/mixins/comment.pug | 4 +-- src/mixins/header.pug | 9 ++++++ src/mixins/post.pug | 24 ++++++++++------ src/public/styles.css | 74 ++++++++++++++++++++++++++++++++++---------------- src/routes/index.js | 2 -- src/views/comments.pug | 12 +++++++- src/views/index.pug | 19 +++++++------ src/views/subs.pug | 7 +++-- 9 files changed, 104 insertions(+), 49 deletions(-) create mode 100644 src/mixins/header.pug (limited to 'src') diff --git a/src/geddit.js b/src/geddit.js index 902d859..64e1564 100644 --- a/src/geddit.js +++ b/src/geddit.js @@ -14,7 +14,7 @@ class Geddit { async getSubmissions(sort = null, subreddit = null, options = {}) { let params = { - limit: 50, + limit: 20, include_over_18: true, } diff --git a/src/mixins/comment.pug b/src/mixins/comment.pug index 545ee59..8d341c9 100644 --- a/src/mixins/comment.pug +++ b/src/mixins/comment.pug @@ -8,8 +8,8 @@ mixin comment(com, isfirst) else div(class=`comment ${isfirst?'first':''}`) div.comment-info-container - div.info-item u/#{data.author} - div.info-item ↑ #{fmtnum(data.ups)} + div.info-item #{fmtnum(data.ups)} ↑ + div.info-item u/#{data.author} #{data.is_submitter?'(OP)':''} if data.collapsed_reason_code == "DELETED" div.info-item a(href=`https://undelete.pullpush.io${data.permalink}`) search on undelete diff --git a/src/mixins/header.pug b/src/mixins/header.pug new file mode 100644 index 0000000..e3b3870 --- /dev/null +++ b/src/mixins/header.pug @@ -0,0 +1,9 @@ +mixin header() + div.header + div.header-item + a(href=`/`) home + div.header-item + a(href=`/subs`) subscriptions + div.header-item + a(href=`/r/popular`) popular + diff --git a/src/mixins/post.pug b/src/mixins/post.pug index 8a66d53..20ec7c8 100644 --- a/src/mixins/post.pug +++ b/src/mixins/post.pug @@ -9,9 +9,9 @@ mixin post(p) span.domain (#{p.domain}) div.info-container p - | ↑ #{fmtnum(p.ups)} + | #{fmtnum(p.ups)} ↑ |  ·  - a(href=`/comments/${p.id}`) #{fmtnum (p.num_comments)} replies + a(href=`/comments/${p.id}`) #{fmtnum (p.num_comments)} ↩ |  ·  a(href=`/r/${p.subreddit}`) r/#{p.subreddit} span.post-author @@ -36,12 +36,14 @@ mixin post(p) if p.gallery_data.items details(id=`${p.id}`) summary expand gallery - each item in p.gallery_data.items - - var url = `https://i.redd.it/${item.media_id}.jpg` - a(href=`/media/${url}`) - img(src=url).post-media + div.gallery + each item in p.gallery_data.items + - var url = `https://i.redd.it/${item.media_id}.jpg` + div.gallery-item + a(href=`/media/${url}`) + img(src=url) button(onclick=`toggleDetails('${p.id}')`) close - if (p.post_hint == "image" || p.post_hint == "link") && p.thumbnail && p.thumbnail != "self" && p.thumbnail != "default" + if p.post_hint == "image" && p.thumbnail && p.thumbnail != "self" && p.thumbnail != "default" details(id=`${p.id}`) summary expand image a(href=`/media/${p.url}`) @@ -53,4 +55,10 @@ mixin post(p) - var url = p.secure_media.reddit_video.dash_url video(src=url controls data-dashjs-player).post-media button(onclick=`toggleDetails('${p.id}')`) close - + else if p.post_hint == "link" && p.thumbnail && p.thumbnail != "self" && p.thumbnail != "default" + details(id=`${p.id}`) + summary expand link + a(href=`${p.url}`) + | #{p.url} + br + button(onclick=`toggleDetails('${p.id}')`) close diff --git a/src/public/styles.css b/src/public/styles.css index 7a27e82..aa2fff1 100644 --- a/src/public/styles.css +++ b/src/public/styles.css @@ -2,6 +2,7 @@ body { font-family: 'Inter', sans-serif; + overflow-x: hidden; } main { @@ -14,6 +15,7 @@ main { .header { display: flex; flex-direction: row; + justify-content: center; } .footer { @@ -33,10 +35,17 @@ nav { .post, .comments-container, .hero, .header, .footer { padding: 0.3rem; flex: 1 1 95%; - font-size: 1rem; width: 100%; } +.post { + font-size: 1rem; +} + +.comments-container { + font-size: 0.8rem; +} + .info-container, .comment-info-container, .more { color: #777; font-size: 0.8rem; @@ -45,26 +54,13 @@ nav { .domain { color: #777; - font-size: 0.6rem; + font-size: 0.8rem; } .info-item, .header-item, .footer-item { margin-right: 14px; } -.header-item, .footer-item { - position: relative; /* Needed for positioning the pseudo-element */ -} - -.header-item:not(:last-child)::after { - content: "·"; /* Middle dot as the separator */ - position: absolute; - right: -10px; /* Adjust position as needed */ - top: 50%; - transform: translateY(-50%); /* Center vertically */ - color: #888; /* Separator color */ - font-size: 20px; /* Adjust size of the separator */ -} .media-preview img { object-fit: cover; @@ -84,13 +80,18 @@ nav { .post, .comments-container, .hero, .header, .footer { flex: 1 1 90%; width: 90%; - font-size: 1rem; + } + .post { + font-size: 1.3rem; + } + .comments-container { + font-size: 1.1rem; } .info-container, .comment-info-container, .more { - font-size: 0.9rem; + font-size: 1rem; } .domain { - font-size: 0.9rem; + font-size: 1rem; } .media-preview img, .media-preview video @@ -107,13 +108,18 @@ nav { .post, .comments-container, .hero, .header, .footer { flex: 1 1 50%; width: 50%; - font-size: 1rem; + } + .post { + font-size: 1.3rem; + } + .comments-container { + font-size: 1.1rem; } .info-container, .comment-info-container, .more { - font-size: 0.9rem; + font-size: 1rem; } .domain { - font-size: 0.9rem; + font-size: 1rem; } .media-preview img, .media-preview video @@ -154,14 +160,16 @@ nav { } .post-container { - align-self: stretch; display: flex; + flex-direction: row; + align-items: center; } .post-text { + display: flex; flex-direction: column; align-items: stretch; - justify-content: space-between; + justify-content: space-evenly; } .media-preview { @@ -178,6 +186,7 @@ nav { display: block; margin: 0 auto; max-width: 85%; + padding: 5px; } .title-container,.info-container, .comment-info-container { @@ -211,7 +220,7 @@ pre, code { } pre { - padding: 10px; + padding: 10px 0px 10px 10px; width: 100%; overflow: auto; } @@ -242,3 +251,20 @@ a { overflow-wrap: break-word; } +.gallery { + display: flex; + overflow-x: auto; + scroll-snap-type: x mandatory; + padding: 5px; +} + +.gallery-item { + flex: 0 0 auto; + scroll-snap-align: start; + margin-right: 10px; +} + +.gallery img { + width: auto; + height: 300px; +} diff --git a/src/routes/index.js b/src/routes/index.js index 5f43764..cef05da 100644 --- a/src/routes/index.js +++ b/src/routes/index.js @@ -21,8 +21,6 @@ router.get('/r/:subreddit/:sort?', async (req, res) => { var aboutReq = G.getSubreddit(`${subreddit}`); var [posts, about] = await Promise.all([postsReq, aboutReq]); - console.log(`posts for ${subreddit}`); - console.log(posts.posts.length); res.render('index', { subreddit, posts, about }); }); diff --git a/src/views/comments.pug b/src/views/comments.pug index e335cae..d7a8ab4 100644 --- a/src/views/comments.pug +++ b/src/views/comments.pug @@ -1,4 +1,5 @@ include ../mixins/comment +include ../mixins/header doctype html html @@ -10,8 +11,11 @@ html script(src="https://cdn.dashjs.org/latest/dash.all.min.js") body main#content + +header() div.hero - h4 r/#{post.subreddit} + h3 + a(href=`/r/${post.subreddit}`) r/#{post.subreddit} + h2 #{post.title} if post.is_gallery && post.is_gallery == true @@ -28,6 +32,12 @@ html if post.selftext_html p.self-text !{post.selftext_html} + div.info-container + p + | #{fmtnum(post.ups)} ↑ + |  ·  by u/#{post.author} + + hr div.comments-container each child in comments diff --git a/src/views/index.pug b/src/views/index.pug index 3df82f7..3f284f3 100644 --- a/src/views/index.pug +++ b/src/views/index.pug @@ -1,5 +1,6 @@ include ../mixins/post include ../mixins/sub +include ../mixins/header - var subs = [] doctype html html @@ -38,13 +39,7 @@ html document.addEventListener('DOMContentLoaded', ()=>updateButton("#{subreddit}")); body main#content - div.header - div.header-item - a(href=`/`) home - div.header-item - a(href=`/subs`) subscriptions - div.header-item - a(href=`/r/popular`) popular + +header() div.hero a(href=`/r/${subreddit}`) @@ -52,11 +47,17 @@ html if about p #{about.public_description} div#button-container - a(href=`/r/${subreddit}`) + ul + li + a(href=`/r/${subreddit}/hot`) hot + li + a(href=`/r/${subreddit}/top`) top + li + a(href=`/r/${subreddit}/top?t=all`) top all if posts each child in posts.posts +post(child.data) div.footer div.footer-item - a(href=`/r/${subreddit}?after=${posts.after}`) next + a(href=`/r/${subreddit}?after=${posts.after}`) next → diff --git a/src/views/subs.pug b/src/views/subs.pug index a6bbb7b..2d2ee4f 100644 --- a/src/views/subs.pug +++ b/src/views/subs.pug @@ -1,4 +1,5 @@ include ../mixins/sub +include ../mixins/header doctype html html @@ -29,5 +30,7 @@ html document.addEventListener('DOMContentLoaded', buildSubList); body main#content - h1 subscriptions - div#subList + +header() + div.hero + h1 subscriptions + div#subList -- cgit v1.2.3