devol
/
teddit-reddit-frontend-alternativa
mirror of https://codeberg.org/teddit/teddit
1
0
Fork 0
Code Issues Releases Wiki Activity

Add link component

This commit is contained in:
StevenNMeza 2021-05-24 20:39:28 +02:00
parent ca6d213bdc
commit ac14a7b094
6 changed files with 169 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
inc/processJsonUser.js
View File

@ -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,

85
static/css/styles.css
View File

@ -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 */

90
views/components/link.pug Normal file
View File

@ -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

86
views/index.pug
View File

@ -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'

91
views/subreddit.pug
View File

@ -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

60
views/user.pug
View File

@ -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)}