From ac14a7b094018a547d61775cffbe76634f5a630a Mon Sep 17 00:00:00 2001 From: StevenNMeza Date: Mon, 24 May 2021 20:39:28 +0200 Subject: [PATCH] Add link component --- inc/processJsonUser.js | 1 + static/css/styles.css | 85 ++++++++++++++++++------------------ views/components/link.pug | 90 ++++++++++++++++++++++++++++++++++++++ views/index.pug | 86 +----------------------------------- views/subreddit.pug | 91 +-------------------------------------- views/user.pug | 60 ++++++++++++++------------ 6 files changed, 169 insertions(+), 244 deletions(-) create mode 100644 views/components/link.pug diff --git a/inc/processJsonUser.js b/inc/processJsonUser.js index 2313ed1..4a0ec76 100644 --- a/inc/processJsonUser.js +++ b/inc/processJsonUser.js @@ -65,6 +65,7 @@ module.exports = function() { created: post.created_utc, ups: post.ups, url: replaceDomains(url, user_preferences), + domain: post.domain, thumbnail: await downloadAndSave(post.thumbnail), duration: duration, edited: post.edited, diff --git a/static/css/styles.css b/static/css/styles.css index 7a732aa..87e91e3 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -566,6 +566,9 @@ footer a { overflow: hidden; background: var(--whitebg); } +.commententry .comment { + padding-left: 0; +} .comment details summary { float: left; font-size: 0.833rem; @@ -924,14 +927,14 @@ footer a { width: 80%; min-height: 100vh; } -#user .entries .entry { +#user .entries .commententry { padding-left: 5px; padding-top: 10px; padding-bottom: 15px; float: left; width: 100%; } -#user .entries .entry:first-child { +#user .entries .commententry:first-child { padding-top: 0; } #user .info { @@ -947,70 +950,70 @@ footer a { font-size: 1.1rem; overflow-wrap: anywhere; } -#user .entries .entry .meta { +#user .entries .commententry .meta { float: left; } -#user .entries .entry .meta .title, -#user .entries .entry .meta .author, -#user .entries .entry .meta .subreddit, -#user .entries .entry .meta .flair { +#user .entries .commententry .meta .title, +#user .entries .commententry .meta .author, +#user .entries .commententry .meta .subreddit, +#user .entries .commententry .meta .flair { float: left; } -#user .entries .entry .meta a { +#user .entries .commententry .meta a { margin-right: 5px; margin-left: 5px; } -#user .entries .entry .title a { +#user .entries .commententry .title a { margin-left: 0; font-size: 0.86rem; } -#user .entries .entry .meta .author,#user .entries .entry .meta .subreddit { +#user .entries .commententry .meta .author,#user .entries .commententry .meta .subreddit { font-size: 11px; margin-top: 3px; } -#user .entries .entry .meta .author a { +#user .entries .commententry .meta .author a { font-weight: bold; } -#user .comment details { +#user .commententry details { padding-top: 2px; } -#user .comment details a.context, -#user .comment details a.comments { +#user .commententry details a.context, +#user .commententry details a.comments { float: left; } -#user .comment .meta p.ups,#user .comment .meta p.created { +#user .commententry .meta p.ups,#user .commententry .meta p.created { font-size: var(--sm-font); padding-right: 5px; } -#user .entries .entry .meta .created a { +#user .entries .commententry .meta .created a { color: var(--graytext); } -#user .entries .entry.t3 .title .meta { +#user .entries .commententry.t3 .title .meta { float: left; width: 100%; } -#user .entries .entry.t3 .title a { +#user .entries .commententry.t3 .title a { margin-bottom: 3px; } -#user .entries .entry.t3 .upvotes { +#user .entries .commententry.t3 .upvotes { float: left; width: 60px; } -#user .entries .entry.t3 .image { +#user .entries .commententry.t3 .image { float: left; width: 80px; } -#user .entries .entry.t3 .title { +#user .entries .commententry.t3 .title { width: calc(100% - 200px); float: left; } -#user .entries .entry .comment .meta .author { +#user .entries .commententry .commententry .meta .author { margin-top: 0; } -#user .comment .meta p { +#user .commententry .meta p { padding-right: 0; } -#user .comment .body { +#user .commententry .body { padding-top: 4px; padding-bottom: 0; } @@ -1018,25 +1021,25 @@ footer a { font-weight: bold; font-size: 1.1rem; } -#user .comment details summary { +#user .commententry details summary { font-size: var(--sm-font); } -#user .comment details summary p { +#user .commententry details summary p { margin-right: 5px; margin-left: 5px; } -#user .comment details summary a { +#user .commententry details summary a { margin-left: 5px; } -#user .entries .entry .image,#user .entries .entry .upvotes,#user .entries .entry .title,#user .entries .entry .meta { +#user .entries .commententry .image,#user .entries .commententry .upvotes,#user .entries .commententry .title,#user .entries .commententry .meta { float: left; } -#user .entries .entry .image { +#user .entries .commententry .image { margin-left: 0; margin-right: 8px; position: relative; } -#user .entries .entry .image a span { +#user .entries .commententry .image a span { position: absolute; bottom: 0; background: #0000005e; @@ -1047,29 +1050,29 @@ footer a { font-size: var(--sm-font); margin-bottom: 4px; } -#user .entries .entry .image img { +#user .entries .commententry .image img { max-width: 80px; } -#user .entries .entry .title a { +#user .entries .commententry .title a { float: left; } -#user .entries .entry .title .meta { +#user .entries .commententry .title .meta { width: 100%; } -#user .entries .entry .title .meta a { +#user .entries .commententry .title .meta a { float: initial; font-weight: bold; font-size: var(--sm-font); margin-left: 5px; } -#user .entries .entry .title .meta a.subreddit { +#user .entries .commententry .title .meta a.subreddit { font-weight: unset; } -#user .entries .entry .title .meta .submitted { +#user .entries .commententry .title .meta .submitted { font-size: var(--sm-font); color: var(--graytext); } -#user .entries .entry .meta .title { +#user .entries .commententry .meta .title { margin-left: 20px; } #user #links { @@ -1085,18 +1088,18 @@ footer a { #user #links details ul { margin-left: 20px; } -#user .entries .entry a.comments, #user .entries .entry a.context { +#user .entries .commententry a.comments, #user .entries .commententry a.context { color: gray; font-size: var(--sm-font); font-weight: bold; } -#user .entries .entry .title .meta a.comments { +#user .entries .commententry .title .meta a.comments { margin-left: 0; } -#user .entries .entry a.comments.t1,#user .entries .entry a.context { +#user .entries .commententry a.comments.t1,#user .entries .commententry a.context { margin-top: 0; } -#user .entries .entry a.context { +#user .entries .commententry a.context { margin-right: 10px; } /* FLAIR */ diff --git a/views/components/link.pug b/views/components/link.pug new file mode 100644 index 0000000..e61fdf1 --- /dev/null +++ b/views/components/link.pug @@ -0,0 +1,90 @@ +.link + .upvotes + .arrow + span #{kFormatter(link.ups)} + .arrow.down + .image + if link.images + if link.is_self_link + a(href="" + link.permalink + "") + img(src="" + link.images.thumb + "", alt="") + else + a(href=""+ link.url +"", rel="noopener noreferrer") + img(src="" + link.images.thumb + "", alt="") + else + a(href="" + link.permalink + "") + .no-image no image + .entry + .title + if link.is_self_link + a(href="" + link.permalink + "") + h2(class="" + (link.stickied ? 'green' : '') + "") #{cleanTitle(link.title)} + != link.link_flair + span (#{link.domain}) + else + a(href="" + link.url + "", rel="noopener noreferrer") + h2(class="" + (link.stickied ? 'green' : '') + "") #{cleanTitle(link.title)} + != link.link_flair + span (#{link.domain}) + .meta + p.submitted submitted + span(title="" + toUTCString(link.created) + "") #{timeDifference(link.created)} by + if link.author === '[deleted]' + span(class="deleted") [deleted] + else + a(href="/u/" + link.author + "") + | #{link.author} + != link.user_flair + p.to to + a(href="/r/" + link.subreddit + "") + | #{link.subreddit} + if link.stickied + span(class="green") stickied + .links + if link.over_18 + span.tag.nsfw NSFW + if link.selftext_html + details + summary + .line + .line + .line + .selftext + != unescape(link.selftext_html, user_preferences) + if (link.images && link.images.preview) + style. + details.preview-container img { + width: 100% !important; + height: auto !important; + max-width: none !important; + max-height: none !important; + opacity: 0; + } + details.preview-container[open][data-url="#{link.images.preview}"] .preview { + width: 100%; + height: auto; + background-image: url('#{link.images.preview}'); + background-repeat: no-repeat; + background-size: contain; + } + details.preview-container(data-url="" + link.images.preview + "") + summary + span ▶ + .preview + img(src=""+ link.images.thumb +"", alt="") + a(href="" + link.permalink + "", class="comments") #{link.num_comments} comments + - + let back_url = "/r/" + subreddit + "/" + sortby + "§2t="+ (past ? past : '') +"" + if(before && !subreddit_front) + back_url = "/r/" + subreddit + "/" + sortby + "§2t="+ (past ? past : '') +"§1before=" + before + "" + if(after) + back_url = "/r/" + subreddit + "/" + sortby + "§2t=" + (past ? past : '') + "§1after=" + after + "" + - let saved_post = false + if user_preferences.saved + each post_id in user_preferences.saved + if post_id === link.id + - saved_post = true + if saved_post + a(href="/unsave/" + link.id + "/?rk=" + redis_key + "&b=" + back_url + "") unsave + else + a(href="/save/" + link.id + "/?rk=" + redis_key + "&b=" + back_url + "") save diff --git a/views/index.pug b/views/index.pug index 32b30e3..8f707b4 100644 --- a/views/index.pug +++ b/views/index.pug @@ -68,91 +68,7 @@ html li(class=past === 'all' ? 'active' : '') a(href="?t=all") all time each link in json.links - .link - .upvotes - .arrow - span #{kFormatter(link.ups)} - .arrow.down - .image - if(link.images) - if link.is_self_link - a(href="" + link.permalink + "") - img(src=""+ link.images.thumb +"", alt="") - else - a(href="" + link.url + "", rel="noopener noreferrer") - img(src=""+ link.images.thumb +"", alt="") - else - a(href="" + link.permalink + "") - .no-image no image - .entry - .title - if link.is_self_link - a(href="" + link.permalink + "") - h2 #{cleanTitle(link.title)} - span (#{link.domain}) - else - a(href="" + link.url + "", rel="noopener noreferrer") - h2 #{cleanTitle(link.title)} - span (#{link.domain}) - .meta - p.submitted submitted - span(title="" + toUTCString(link.created) + "") #{timeDifference(link.created)} by - if link.author === '[deleted]' - span(class="deleted") [deleted] - else - a(href="/u/" + link.author + "") - | #{link.author} - span(class="to") to - a(href="/r/" + link.subreddit + "") - | #{link.subreddit} - .links - if link.over_18 - span.tag.nsfw NSFW - if link.selftext_html - details - summary - .line - .line - .line - .selftext - != unescape(link.selftext_html, user_preferences) - if (link.images && link.images.preview) - style. - details.preview-container img { - width: 100% !important; - height: auto !important; - max-width: none !important; - max-height: none !important; - opacity: 0; - } - details.preview-container[open][data-url="#{link.images.preview}"] .preview { - width: 100%; - height: auto; - background-image: url('#{link.images.preview}'); - background-repeat: no-repeat; - background-size: contain; - } - details.preview-container(data-url="" + link.images.preview + "") - summary - span ▶ - .preview - img(src=""+ link.images.thumb +"", alt="") - a(href="" + link.permalink + "", class="comments") #{link.num_comments} comments - - - let back_url = "/" + sortby + "§2t="+ (past ? past : '') +"" - if(before && !subreddit_front) - back_url = "/" + sortby + "§2t="+ (past ? past : '') +"§1before=" + before + "" - if(after) - back_url = "/" + sortby + "§2t=" + (past ? past : '') + "§1after=" + after + "" - - let saved_post = false - if user_preferences.saved - each post_id in user_preferences.saved - if post_id === link.id - - saved_post = true - if saved_post - a(href="/unsave/" + link.id + "/?rk=" + redis_key + "&b=" + back_url + "") unsave - else - a(href="/save/" + link.id + "/?rk=" + redis_key + "&b=" + back_url + "") save + include components/link.pug if json.info.before || json.info.after .view-more-links - var subreddit = 'all' diff --git a/views/subreddit.pug b/views/subreddit.pug index bfdbfe6..7d9e765 100644 --- a/views/subreddit.pug +++ b/views/subreddit.pug @@ -84,96 +84,7 @@ html p This subreddit either doesn't exist, or any posts weren't found. else each link in json.links - .link - .upvotes - .arrow - span #{kFormatter(link.ups)} - .arrow.down - .image - if link.images - if link.is_self_link - a(href="" + link.permalink + "") - img(src="" + link.images.thumb + "", alt="") - else - a(href=""+ link.url +"", rel="noopener noreferrer") - img(src="" + link.images.thumb + "", alt="") - else - a(href="" + link.permalink + "") - .no-image no image - .entry - .title - if link.is_self_link - a(href="" + link.permalink + "") - h2(class="" + (link.stickied ? 'green' : '') + "") #{cleanTitle(link.title)} - != link.link_flair - span (#{link.domain}) - else - a(href="" + link.url + "", rel="noopener noreferrer") - h2(class="" + (link.stickied ? 'green' : '') + "") #{cleanTitle(link.title)} - != link.link_flair - span (#{link.domain}) - .meta - p.submitted submitted - span(title="" + toUTCString(link.created) + "") #{timeDifference(link.created)} by - if link.author === '[deleted]' - span(class="deleted") [deleted] - else - a(href="/u/" + link.author + "") - | #{link.author} - != link.user_flair - p.to to - a(href="/r/" + link.subreddit + "") - | #{link.subreddit} - if link.stickied - span(class="green") stickied - .links - if link.over_18 - span.tag.nsfw NSFW - if link.selftext_html - details - summary - .line - .line - .line - .selftext - != unescape(link.selftext_html, user_preferences) - if (link.images && link.images.preview) - style. - details.preview-container img { - width: 100% !important; - height: auto !important; - max-width: none !important; - max-height: none !important; - opacity: 0; - } - details.preview-container[open][data-url="#{link.images.preview}"] .preview { - width: 100%; - height: auto; - background-image: url('#{link.images.preview}'); - background-repeat: no-repeat; - background-size: contain; - } - details.preview-container(data-url="" + link.images.preview + "") - summary - span ▶ - .preview - img(src=""+ link.images.thumb +"", alt="") - a(href="" + link.permalink + "", class="comments") #{link.num_comments} comments - - - let back_url = "/r/" + subreddit + "/" + sortby + "§2t="+ (past ? past : '') +"" - if(before && !subreddit_front) - back_url = "/r/" + subreddit + "/" + sortby + "§2t="+ (past ? past : '') +"§1before=" + before + "" - if(after) - back_url = "/r/" + subreddit + "/" + sortby + "§2t=" + (past ? past : '') + "§1after=" + after + "" - - let saved_post = false - if user_preferences.saved - each post_id in user_preferences.saved - if post_id === link.id - - saved_post = true - if saved_post - a(href="/unsave/" + link.id + "/?rk=" + redis_key + "&b=" + back_url + "") unsave - else - a(href="/save/" + link.id + "/?rk=" + redis_key + "&b=" + back_url + "") save + include components/link.pug if json.info.before || json.info.after .view-more-links if json.info.before && !subreddit_front diff --git a/views/user.pug b/views/user.pug index 94678d3..c5aae74 100644 --- a/views/user.pug +++ b/views/user.pug @@ -77,39 +77,43 @@ html br p(title="" + toUTCString(data.created) + "") account created: #{toDateString(data.created)} p verified: #{(data.verified) ? "yes" : "no" } - .entries + #links.entries if !data.posts || data.posts.length <= 0 h3 no posts/comments each post in data.posts if post.type === 't3' - .entry.t3 - .upvotes - .arrow - span #{kFormatter(post.ups)} - .arrow.down - .image - if post.thumbnail !== 'self' - a(href="" + post.permalink + "", rel="noopener noreferrer") - img(src="" + post.thumbnail + "", alt="") - if post.duration - span #{secondsToMMSS(post.duration)} - else - a(href="" + post.permalink + "", rel="noopener noreferrer") - .no-image no image - .title - a(href="" + post.permalink + "", rel="noopener noreferrer") #{cleanTitle(post.title)} - .meta - p.submitted(title="" + toUTCString(post.created) + "") submitted #{timeDifference(post.created)} - | by - a(href="/u/" + data.username + "") #{data.username} - | to - != post.user_flair - a(href="/r/" + post.subreddit + "", class="subreddit") #{post.subreddit} - if post.over_18 - span.tag.nsfw NSFW - a.comments(href="" + post.permalink + "") #{post.num_comments} comments + - + var link = post; + link.author = data.username; + include components/link.pug + //-.entry.t3 + //- .upvotes + //- .arrow + //- span #{kFormatter(post.ups)} + //- .arrow.down + //- .image + //- if post.thumbnail !== 'self' + //- a(href="" + post.permalink + "", rel="noopener noreferrer") + //- img(src="" + post.thumbnail + "", alt="") + //- if post.duration + //- span #{secondsToMMSS(post.duration)} + //- else + //- a(href="" + post.permalink + "", rel="noopener noreferrer") + //- .no-image no image + //- .title + //- a(href="" + post.permalink + "", rel="noopener noreferrer") #{cleanTitle(post.title)} + //- .meta + //- p.submitted(title="" + toUTCString(post.created) + "") submitted #{timeDifference(post.created)} + //- | by + //- a(href="/u/" + data.username + "") #{data.username} + //- | to + //- != post.user_flair + //- a(href="/r/" + post.subreddit + "", class="subreddit") #{post.subreddit} + //- if post.over_18 + //- span.tag.nsfw NSFW + //- a.comments(href="" + post.permalink + "") #{post.num_comments} comments if post.type === 't1' - .entry + .commententry .meta .title a(href="" + post.url + "", rel="noopener noreferrer") #{cleanTitle(post.link_title)}