From eae5094ea241cc69b38cce328b73e858e6ff63de Mon Sep 17 00:00:00 2001 From: PortableProgrammer Date: Mon, 30 Dec 2024 21:17:57 +0000 Subject: Feat: Card View Initial Commit --- src/views/comments.pug | 6 ++++-- src/views/index.pug | 33 ++++++++++++++++++++------------- src/views/post-search.pug | 4 ++++ src/views/search.pug | 6 ++++++ src/views/sub-search.pug | 6 +++++- src/views/subs.pug | 4 +++- 6 files changed, 42 insertions(+), 17 deletions(-) (limited to 'src/views') diff --git a/src/views/comments.pug b/src/views/comments.pug index 17af45a..1caf65a 100644 --- a/src/views/comments.pug +++ b/src/views/comments.pug @@ -6,6 +6,8 @@ include ../utils - var post = data.post - var comments = data.comments +- var viewQuery = 'view=' + (query && query.view ? query.view : 'compact') +- var sortQuery = 'sort=' + (query && query.sort ? query.sort + (query.t ? '&t=' + query.t : '') : 'hot') doctype html html +head(post.title) @@ -27,7 +29,7 @@ html |    | ยท |    - a(href=`/r/${post.subreddit}`) r/#{post.subreddit} + a(href=`/r/${post.subreddit}?${sortQuery}&${viewQuery}`) r/#{post.subreddit} div.info-container - var domain = (new URL(post.url)).hostname @@ -65,7 +67,7 @@ html if post.selftext_html div.self-text - != post.selftext_html + != convertInlineImageLinks(post.selftext_html) hr diff --git a/src/views/index.pug b/src/views/index.pug index 0f00efe..5c7d550 100644 --- a/src/views/index.pug +++ b/src/views/index.pug @@ -2,6 +2,8 @@ include ../mixins/post include ../mixins/header include ../mixins/head include ../utils + - var viewQuery = query && query.view ? query.view : 'compact' + - var sortQuery = query && query.sort ? query.sort + (query.t ? '&t=' + query.t : '') : 'hot' doctype html html +head("home") @@ -14,9 +16,9 @@ html div.sub-title h1 if isMulti - a(href=`/`) lurker + a(href=`/?${sortQuery}&${viewQuery}`) lurker else - a(href=`/r/${subreddit}`) + a(href=`/r/${subreddit}?${sortQuery}&${viewQuery}`) | r/#{subreddit} if !isMulti div#button-container @@ -32,27 +34,32 @@ html a(href="https://donate.stripe.com/dR62bTaZH1295Da4gg") oppiliappan |, author of lurker hr - details - summary.sorting sorting by #{query.sort + (query.t?' '+query.t:'')} + details.sort-details + summary.sorting sorting by #{query.sort + (query.t?' '+query.t:'')}, #{viewQuery} view div.sort-opts div - a(href=`/r/${subreddit}?sort=hot`) hot + a(href=`/r/${subreddit}?sort=hot&view=${viewQuery}`) hot div - a(href=`/r/${subreddit}?sort=new`) new + a(href=`/r/${subreddit}?sort=new&view=${viewQuery}`) new div - a(href=`/r/${subreddit}?sort=rising`) rising + a(href=`/r/${subreddit}?sort=rising&view=${viewQuery}`) rising div - a(href=`/r/${subreddit}?sort=top`) top + a(href=`/r/${subreddit}?sort=top&view=${viewQuery}`) top div - a(href=`/r/${subreddit}?sort=top&t=day`) top day + a(href=`/r/${subreddit}?sort=top&t=day&view=${viewQuery}`) top day div - a(href=`/r/${subreddit}?sort=top&t=week`) top week + a(href=`/r/${subreddit}?sort=top&t=week&view=${viewQuery}`) top week div - a(href=`/r/${subreddit}?sort=top&t=month`) top month + a(href=`/r/${subreddit}?sort=top&t=month&view=${viewQuery}`) top month div - a(href=`/r/${subreddit}?sort=top&t=year`) top year + a(href=`/r/${subreddit}?sort=top&t=year&view=${viewQuery}`) top year div - a(href=`/r/${subreddit}?sort=top&t=all`) top all + a(href=`/r/${subreddit}?sort=top&t=all&view=${viewQuery}`) top all + div.sort-opts + div + a(href=`/r/${subreddit}?sort=${sortQuery}&view=compact`) compact + div + a(href=`/r/${subreddit}?sort=${sortQuery}&view=card`) card if posts each child in posts.posts diff --git a/src/views/post-search.pug b/src/views/post-search.pug index b80f9f6..8f93798 100644 --- a/src/views/post-search.pug +++ b/src/views/post-search.pug @@ -2,6 +2,8 @@ include ../mixins/post include ../mixins/header include ../mixins/head +- var viewQuery = query && query.view ? query.view : 'compact' +- var sortQuery = query && query.sort ? query.sort + (query.t ? '&t=' + query.t : '') : 'hot' doctype html html +head("search posts") @@ -14,6 +16,8 @@ html form(action="/post-search" method="get").search-bar - var prefill = original_query ?? ""; input(type="text" name="q" placeholder="type in a search term..." value=prefill required).search-input + input(type="hidden" name="sort" value=sortQuery) + input(type="hidden" name="view" value=viewQuery) button(type="submit").search-button go if message div.search-message diff --git a/src/views/search.pug b/src/views/search.pug index ef9b53e..4dc5c0c 100644 --- a/src/views/search.pug +++ b/src/views/search.pug @@ -1,6 +1,8 @@ include ../mixins/header include ../mixins/head +- var viewQuery = query && query.view ? query.view : 'compact' +- var sortQuery = query && query.sort ? query.sort + (query.t ? '&t=' + query.t : '') : 'hot' doctype html html +head("search subreddits") @@ -14,6 +16,8 @@ html form(action="/sub-search" method="get").search-bar - var prefill = original_query ?? ""; input(type="text" name="q" placeholder="type in a search term..." value=prefill required).search-input + input(type="hidden" name="sort" value=sortQuery) + input(type="hidden" name="view" value=viewQuery) button(type="submit").search-button go hr @@ -23,6 +27,8 @@ html form(action="/post-search" method="get").search-bar - var prefill = original_query ?? ""; input(type="text" name="q" placeholder="type in a search term..." value=prefill required).search-input + input(type="hidden" name="sort" value=sortQuery) + input(type="hidden" name="view" value=viewQuery) button(type="submit").search-button go p | you can narrow search results using filters: diff --git a/src/views/sub-search.pug b/src/views/sub-search.pug index f2402f7..cb8eeef 100644 --- a/src/views/sub-search.pug +++ b/src/views/sub-search.pug @@ -1,6 +1,8 @@ include ../mixins/header include ../mixins/head +- var viewQuery = (query && query.view) ? query.view : 'compact' +- var sortQuery = (query && query.sort) ? query.sort + (query.t ? '&t=' + query.t : '') : 'hot' doctype html html +head("search subreddits") @@ -13,6 +15,8 @@ html form(action="/sub-search" method="get").search-bar - var prefill = original_query ?? ""; input(type="text" name="q" placeholder="type in a search term..." value=prefill required).search-input + input(type="hidden" name="sort" value=sortQuery) + input(type="hidden" name="view" value=viewQuery) button(type="submit").search-button go if message div.search-message @@ -25,7 +29,7 @@ html - var isSubbed = subs.includes(subreddit) div.sub-title h3 - a(href=`/r/${subreddit}`) + a(href=`/r/${subreddit}?sort=${sortQuery}&view=${viewQuery}`) | r/#{subreddit} div#button-container if isSubbed diff --git a/src/views/subs.pug b/src/views/subs.pug index 8fca12d..aff8258 100644 --- a/src/views/subs.pug +++ b/src/views/subs.pug @@ -1,6 +1,8 @@ include ../mixins/header include ../mixins/head +- var viewQuery = query && query.view ? query.view : 'compact' +- var sortQuery = query && query.sort ? query.sort + (query.t ? '&t=' + query.t : '') : 'hot' doctype html html +head("subscriptions") @@ -16,7 +18,7 @@ html - var isSubbed = true div.sub-title h4 - a(href=`/r/${subreddit}`) + a(href=`/r/${subreddit}?sort=${sortQuery}&view=${viewQuery}`) | r/#{subreddit} div#button-container if isSubbed -- cgit v1.2.3 From fc5a28a9c3ea695b5b0f5c65e0c8a5ad5c83dec1 Mon Sep 17 00:00:00 2001 From: Nick Warner <60248569+PortableProgrammer@users.noreply.github.com> Date: Thu, 2 Jan 2025 08:51:23 -0700 Subject: Fix subtitle subreddit link sort/view querystrings --- src/views/index.pug | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/views') diff --git a/src/views/index.pug b/src/views/index.pug index 5c7d550..847adbb 100644 --- a/src/views/index.pug +++ b/src/views/index.pug @@ -16,9 +16,9 @@ html div.sub-title h1 if isMulti - a(href=`/?${sortQuery}&${viewQuery}`) lurker + a(href=`/?sort=${sortQuery}&view=${viewQuery}`) lurker else - a(href=`/r/${subreddit}?${sortQuery}&${viewQuery}`) + a(href=`/r/${subreddit}?sort=${sortQuery}&view=${viewQuery}`) | r/#{subreddit} if !isMulti div#button-container -- cgit v1.2.3 From dcd33d89e28c97cc620397d912316a116ac091ba Mon Sep 17 00:00:00 2001 From: PortableProgrammer Date: Wed, 8 Jan 2025 16:06:14 +0000 Subject: Feat: Card View - Separate sort and view detail options --- src/views/index.pug | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src/views') diff --git a/src/views/index.pug b/src/views/index.pug index 847adbb..9f5142b 100644 --- a/src/views/index.pug +++ b/src/views/index.pug @@ -35,7 +35,7 @@ html |, author of lurker hr details.sort-details - summary.sorting sorting by #{query.sort + (query.t?' '+query.t:'')}, #{viewQuery} view + summary.sorting sorting by #{query.sort + (query.t?' '+query.t:'')} div.sort-opts div a(href=`/r/${subreddit}?sort=hot&view=${viewQuery}`) hot @@ -55,6 +55,8 @@ html a(href=`/r/${subreddit}?sort=top&t=year&view=${viewQuery}`) top year div a(href=`/r/${subreddit}?sort=top&t=all&view=${viewQuery}`) top all + details.sort-details + summary.sorting viewing as #{viewQuery} div.sort-opts div a(href=`/r/${subreddit}?sort=${sortQuery}&view=compact`) compact -- cgit v1.2.3 From e351d76a0e3dfc99a2ea3747ecb3aa06c7c6a613 Mon Sep 17 00:00:00 2001 From: PortableProgrammer Date: Wed, 8 Jan 2025 17:44:39 +0000 Subject: Feat: Card View - Update `media` page, allow zooming --- src/views/media.pug | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) (limited to 'src/views') diff --git a/src/views/media.pug b/src/views/media.pug index 4476dbb..e945704 100644 --- a/src/views/media.pug +++ b/src/views/media.pug @@ -2,9 +2,14 @@ include ../mixins/head doctype html html +head("home") - body - div.media-maximized-container + script(type='text/javascript'). + function toggleZoom() { + Array.from(document.getElementsByClassName('media-maximized')).forEach(element => element.classList.toggle('zoom')); + } + + body.media-maximized + div.media-maximized.container if kind == 'img' - img(src=url).media-maximized + img(src=url onclick=`toggleZoom()`).media-maximized else video(src=url controls).media-maximized -- cgit v1.2.3 From 1c5214d6c35feeb685a55ed8a27b37af62c0ad36 Mon Sep 17 00:00:00 2001 From: PortableProgrammer Date: Wed, 8 Jan 2025 22:21:06 +0000 Subject: Use separate styles for sort/vew opts to utilize appropriate `grid-template-rows` values --- src/views/index.pug | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src/views') diff --git a/src/views/index.pug b/src/views/index.pug index 9f5142b..a35837b 100644 --- a/src/views/index.pug +++ b/src/views/index.pug @@ -55,9 +55,9 @@ html a(href=`/r/${subreddit}?sort=top&t=year&view=${viewQuery}`) top year div a(href=`/r/${subreddit}?sort=top&t=all&view=${viewQuery}`) top all - details.sort-details - summary.sorting viewing as #{viewQuery} - div.sort-opts + details.view-details + summary.viewing viewing as #{viewQuery} + div.view-opts div a(href=`/r/${subreddit}?sort=${sortQuery}&view=compact`) compact div -- cgit v1.2.3