Georg/teddit
1
0
Fork 0
mirror of https://codeberg.org/tacerus/teddit.git synced 2024-11-27 01:29:27 +01:00
Code Issues Projects Releases Wiki Activity

Add depth of each comment to the json. When creating the html, determine if the comment is an even or odd depth for css.

Browse Source
This commit is contained in:
Shaun Collins 2020-12-17 17:17:20 -05:00
parent 2bffbcdf0b
commit c695a392d6
3 changed files with 30 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
dist/css/styles.css vendored
View File

@ -98,77 +98,17 @@ body.dark .comment .body blockquote {
color: #afafaf; color: #afafaf;
border-color: #464646; border-color: #464646;
} }
body.dark .comment { body.dark .even-depth {
background: var(--darkbg); background: var(--darkbg);
} }
body.dark .comment .comment { body.dark .odd-depth {
background: var(--darkbglight); background: var(--darkbglight);
}
body.dark .comment .comment {
border-left: 1px solid #545454; border-left: 1px solid #545454;
} }
body.dark .comment .comment .comment {
background: var(--darkbg);
}
body.dark .comment .comment .comment .comment {
background: var(--darkbglight);
}
body.dark .comment .comment .comment .comment .comment {
background: var(--darkbg);
}
body.dark .comment .comment .comment .comment .comment .comment {
background: var(--darkbglight);
}
body.dark .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbg);
}
/* Is there any better way to do this??? send help naow */
body.dark .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbglight);
}
body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbg);
}
body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbglight);
}
body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbg);
}
body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbglight);
}
body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbg);
}
body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbglight);
}
body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbg);
}
body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbglight);
}
body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbg);
}
body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbglight);
}
body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbg);
}
body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbglight);
}
body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbg);
}
body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbglight);
}
body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--darkbg);
}
body.dark .comment .meta .created a { body.dark .comment .meta .created a {
color: #7b7b7b; color: #7b7b7b;
} }
@ -691,75 +631,19 @@ input[type="submit"]:hover,
.comment .md { .comment .md {
max-width: 60em; max-width: 60em;
} }
.comment .comment {
.even-depth {
background: var(--whitebg);
}
.odd-depth {
background: var(--lightgray); background: var(--lightgray);
}
.comment .comment {
border-left: 1px solid #dcdcdc; border-left: 1px solid #dcdcdc;
margin-top: 10px; margin-top: 10px;
} }
.comment .comment .comment {
background: var(--whitebg);
}
.comment .comment .comment .comment {
background: var(--lightgray);
}
.comment .comment .comment .comment .comment {
background: var(--whitebg);
}
.comment .comment .comment .comment .comment .comment {
background: var(--lightgray);
}
.comment .comment .comment .comment .comment .comment .comment {
background: var(--whitebg);
}
/* Is there any better way to do this??? send help naow */
.comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--lightgray);
}
.comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--whitebg);
}
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--lightgray);
}
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--whitebg);
}
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--lightgray);
}
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--whitebg);
}
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--lightgray);
}
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--whitebg);
}
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--lightgray);
}
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--whitebg);
}
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--lightgray);
}
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--whitebg);
}
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--lightgray);
}
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--whitebg);
}
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--lightgray);
}
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: var(--whitebg);
}
/* POST */ /* POST */
#post .info { #post .info {
float: left; float: left;

4
inc/compilePostComments.js
View File

@ -38,7 +38,7 @@ module.exports = function() {
edited_span = `<span title="this comment is edited">*</span>` edited_span = `<span title="this comment is edited">*</span>`
} }
comments_html = ` comments_html = `
<div class="comment" id="${comments.id}"> <div class="comment ${comments.depth % 2 === 0 ? 'even-depth' : 'odd-depth'}" id="${comments.id}">
<details open> <details open>
<summary> <summary>
<p class="author">${commentAuthor(comments, classlist, submitter && submitter_link, moderator && moderator_badge)}</p> <p class="author">${commentAuthor(comments, classlist, submitter && submitter_link, moderator && moderator_badge)}</p>
@ -124,7 +124,7 @@ module.exports = function() {
edited_span = `<span title="this comment is edited">*</span>` edited_span = `<span title="this comment is edited">*</span>`
} }
comments_html += ` comments_html += `
<div class="comment" id="${comment.id}"> <div class="comment ${comment.depth % 2 === 0 ? 'even-depth' : 'odd-depth'} id="${comment.id}">
<details open> <details open>
<summary> <summary>
<p class="author">${commentAuthor(comment, classlist, submitter && submitter_link, moderator && moderator_badge)}</p> <p class="author">${commentAuthor(comment, classlist, submitter && submitter_link, moderator && moderator_badge)}</p>

22
inc/processJsonPost.js
View File

@ -142,7 +142,8 @@ module.exports = function(fetch) {
distinguished: comment.distinguished, distinguished: comment.distinguished,
score_hidden: comment.score_hidden, score_hidden: comment.score_hidden,
edited: comment.edited, edited: comment.edited,
replies: [] replies: [],
depth: 0
} }
} else { } else {
obj = { obj = {
@ -158,7 +159,7 @@ module.exports = function(fetch) {
if(comment.replies && kind !== 'more') { if(comment.replies && kind !== 'more') {
if(comment.replies.data) { if(comment.replies.data) {
if(comment.replies.data.children.length > 0) { if(comment.replies.data.children.length > 0) {
obj.replies = processReplies(comment.replies.data.children, post_id) obj.replies = processReplies(comment.replies.data.children, post_id, 1)
} }
} }
} }
@ -197,7 +198,7 @@ module.exports = function(fetch) {
return { post_data: post_data, comments: comments_html } return { post_data: post_data, comments: comments_html }
} }
this.processReplies = (data, post_id) => { this.processReplies = (data, post_id, depth) => {
let return_replies = [] let return_replies = []
for(var i = 0; i < data.length; i++) { for(var i = 0; i < data.length; i++) {
let kind = data[i].kind let kind = data[i].kind
@ -218,7 +219,8 @@ module.exports = function(fetch) {
distinguished: reply.distinguished, distinguished: reply.distinguished,
score_hidden: reply.score_hidden, score_hidden: reply.score_hidden,
edited: reply.edited, edited: reply.edited,
replies: [] replies: [],
depth: depth
} }
} else { } else {
obj = { obj = {
@ -227,13 +229,13 @@ module.exports = function(fetch) {
id: reply.id, id: reply.id,
parent_id: reply.parent_id, parent_id: reply.parent_id,
post_id: post_id, post_id: post_id,
children: [] children: [],
depth: depth
} }
} }
if(reply.replies && kind !== 'more') { if(reply.replies && kind !== 'more') {
if(reply.replies.data.children.length) { if(reply.replies.data.children.length) {
let replies = []
for(var j = 0; j < reply.replies.data.children.length; j++) { for(var j = 0; j < reply.replies.data.children.length; j++) {
let comment = reply.replies.data.children[j].data let comment = reply.replies.data.children[j].data
let objct = {} let objct = {}
@ -252,7 +254,8 @@ module.exports = function(fetch) {
score_hidden: comment.score_hidden, score_hidden: comment.score_hidden,
distinguished: comment.distinguished, distinguished: comment.distinguished,
distinguished: comment.edited, distinguished: comment.edited,
replies: [] replies: [],
depth: depth + 1
} }
} else { } else {
objct = { objct = {
@ -261,7 +264,8 @@ module.exports = function(fetch) {
id: comment.id, id: comment.id,
parent_id: comment.parent_id, parent_id: comment.parent_id,
post_id: post_id, post_id: post_id,
children: [] children: [],
depth: depth + 1
} }
if(comment.children) { if(comment.children) {
for(var k = 0; k < comment.children.length; k++) { for(var k = 0; k < comment.children.length; k++) {
@ -273,7 +277,7 @@ module.exports = function(fetch) {
if(comment.replies) { if(comment.replies) {
if(comment.replies.data) { if(comment.replies.data) {
if(comment.replies.data.children.length > 0) { if(comment.replies.data.children.length > 0) {
objct.replies = processReplies(comment.replies.data.children, post_id) objct.replies = processReplies(comment.replies.data.children, post_id, depth )
} }
} }
} }